@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=vietnamese');

p, h1, h2, h3 {margin: 0px;}
dl, dt, dd, ul, ol, li {list-style:none; margin: 0px; padding: 0px;}
html, body { width: 100%; height: 100%; margin: 0px;}
img {border:none; vertical-align:middle;height:auto}
a{outline:none; text-decoration:none; padding:0px; border:0;}
a:hover, a:active, a:visited{text-decoration:none; border:0;}
body {
    padding:0; margin:0; overflow:hidden; font-family:"Nanum Barun Gothic L"; background-color: transparent; line-height:1;background-color: #000000;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
input, textarea {margin:0; padding:0;font-family:"Nanum Barun Gothic L";font-size:15px; outline: none; border: 0px; line-height: 19px; color: #000000; resize: none;}

div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td, img, textarea, a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

.mainTable {width: 100%; height: 100%; margin-left: auto; margin-right: auto;}

/*UseSet*/
@font-face {
  font-family: 'NanumBarunGothic L';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumBarunGothicLight.eot');
  src: url('../fonts/NanumBarunGothic/NanumBarunGothicLight.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumBarunGothicLight.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumBarunGothicLight.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumBarunGothic R';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumBarunGothic.eot');
  src: url('../fonts/NanumBarunGothic/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumBarunGothic.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumBarunGothic.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumBarunGothic B';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumBarunGothicBold.eot');
  src: url('../fonts/NanumBarunGothic/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumBarunGothicBold.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumBarunGothicBold.ttf') format('truetype');
}

@font-face {
  font-family: 'NanumSquare L';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumSquareL.eot');
  src: url('../fonts/NanumBarunGothic/NanumSquareL.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumSquareL.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumSquareL.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumSquare R';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumSquareR.eot');
  src: url('../fonts/NanumBarunGothic/NanumSquareR.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumSquareR.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumSquareR.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumSquare B';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumSquareB.eot');
  src: url('../fonts/NanumBarunGothic/NanumSquareB.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumSquareB.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumSquareB.ttf') format('truetype');
}
@font-face {
  font-family: 'NanumSquare EB';
  font-style: normal;
  src: url('../fonts/NanumBarunGothic/NanumSquareEB.eot');
  src: url('../fonts/NanumBarunGothic/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NanumBarunGothic/NanumSquareEB.woff') format('woff'),
       url('../fonts/NanumBarunGothic/NanumSquareEB.ttf') format('truetype');
}

@font-face {
  font-family: 'NotoSansKR L';
  font-style: normal;
  src: url('../fonts/NotoSansKr/NotoSans-Light.eot');
  src: url('../fonts/NotoSansKr/NotoSans-Light.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NotoSansKr/NotoSans-Light.woff2') format('woff2'),
       url('../fonts/NotoSansKr/NotoSans-Light.woff') format('woff'),
       url('../fonts/NotoSansKr/NotoSans-Light.otf') format('opentype');
}
@font-face {
  font-family: 'NotoSansKR R';
  font-style: normal;
  src: url('../fonts/NotoSansKr/NotoSans-Medium.eot');
  src: url('../fonts/NotoSansKr/NotoSans-Medium.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NotoSansKr/NotoSans-Medium.woff2') format('woff2'),
       url('../fonts/NotoSansKr/NotoSans-Medium.woff') format('woff'),
       url('../fonts/NotoSansKr/NotoSans-Medium.otf') format('opentype');
}
@font-face {
  font-family: 'NotoSansKR B';
  font-style: normal;
  src: url('../fonts/NotoSansKr/NotoSans-Bold.eot');
  src: url('../fonts/NotoSansKr/NotoSans-Bold.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NotoSansKr/NotoSans-Bold.woff2') format('woff2'),
       url('../fonts/NotoSansKr/NotoSans-Bold.woff') format('woff'),
       url('../fonts/NotoSansKr/NotoSans-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'NotoSansKR EB';
  font-style: normal;
  src: url('../fonts/NotoSansKr/NotoSans-Black.eot');
  src: url('../fonts/NotoSansKr/NotoSans-Black.eot?#iefix') format('embedded-opentype'),
       url('../fonts/NotoSansKr/NotoSans-Black.woff2') format('woff2'),
       url('../fonts/NotoSansKr/NotoSans-Black.woff') format('woff'),
       url('../fonts/NotoSansKr/NotoSans-Black.otf') format('opentype');
}


#wrap {height:100%;overflow:hidden;}
#header {height:50px;background:#111;position:fixed;top:0;right:0;left:0;z-index:100000;opacity:1.0;}
#header .title {font-family:'NotoSansKR R';font-size:18px;color:#ffffff;background:#111111;font-weight:bold;margin-left:200px;height:50px;line-height:50px;overflow:hidden;}
#header .index_group{cursor:pointer;position:absolute;top:0px;left:0px;width:100%;height:50px;z-index:130000;background-color:#222;width:180px;}
#header .lesson {position:absolute;top:0px;right:50px;font-family:"NanumBarunGothic R";font-size:15px;font-weight:bold;color:#039ee4;width:140px;height:50px;line-height:50px;text-align:right;padding-right:5px;background:#111;}
#header .close {position:absolute;top:0px;right:0px;width:50px;height:50px;background:#111111;}
#header .close div {position:absolute;top:0px;right:0px;width:50px;height:50px;background:url(../images/close_btn.png) 50% 50% no-repeat;background-size:20px auto;cursor:pointer;transition: all ease 0.5s;cursor:pointer;z-index:110000}
#header .close div:hover {transform: rotate(540deg);}

#header .btn_index {position:absolute;top:13px;left:10px;width:20px;height:22px;background:url(../images/menu_btn_on.png) 0px 0px no-repeat;background-size:23px auto;}
#header .index_text {position:absolute;top:16px;left:40px;font-family:"NotoSansKR R";font-size:16px;color:#ffffff;}

#header_actions .btn_index {position:absolute;top:13px;left:10px;width:44px;height:44px;background:url(../images/menu_list.png) 0px 0px no-repeat;background-size:44px auto;}
#header_actions .close div {position:absolute;top:0px;right:0px;width:70px;height:70px;background:url(../images/close_btn.png) 50% 50% no-repeat;background-size:40px auto;cursor:pointer;transition: all ease 0.5s;cursor:pointer;z-index:120000}


#content {height:100%;overflow:hidden;background:#000;position:relative;margin-top:50px;}
#wrapper-content {min-height: 470px;height: 100%;display: flex;align-items: center; justify-content: center;}
#wrapper-content > div {margin:0 auto;text-align:center;width: 100%;height: 100%;}
#wrapper-content img {max-width: 100%; max-height:100% }
#content-body {min-height:470px;height:100%;}

#footer {width:100%;height:40px;background:#111;font-family:"NotoSansKR L";font-size:13px;color:#cccccc;z-index:108000;position:relative;}
#footer div {display:inline-block;}
#footer .guide {width:90px;height:40px;line-height:40px;background-color:#222;text-align:center;cursor:pointer;}
#footer .helper {width:90px;height:40px;line-height:40px;background-color:#222;text-align:center;cursor:pointer;margin-left:-2px;}
#footer .memo {width:90px;height:40px;line-height:40px;background-color:#222;text-align:center;cursor:pointer;margin-left:-2px;}
#footer .guide:hover {color:#ffffff;background-color:#005586;}
#footer .helper:hover {color:#ffffff;background-color:#005586;}
#footer .memo:hover {color:#ffffff;background-color:#005586;}
#footer .navi {width:110px;height:24px;background-color:#262626;border-radius:20px;text-align:center;float:right;margin-top:6px;margin-right:10px;}
#footer .navi_btns {height:24px;margin-top:1px;margin-left:0px;width:115px}
#footer .navi_btns li{display:inline-block;font-size:14px;color:#cccccc;line-height:11px;float:left;position:relative;}
#footer .btn_prev {top:2px;width:30px;height:18px;margin-right:5px;cursor:pointer;}
#footer .btn_next {top:2px;width:30px;height:18px;margin-left:5px;cursor:pointer;}
#footer .cur_page {top:5px;width:16px;}
#footer .slash {top:5px;width:10px;}
#footer .tot_page {top:5px; width:16px;}

#player_wrapper {margin:0 auto;width:100%;height:567px;text-align:center;}
#loading {position:absolute;top:50%;margin-top:-10px;color:#fff;width:100%;text-align:center;}


/*목차*/
.menu {position:fixed;top:0px;left:0px;width:100%;height:42px;z-index:9900;}
.menu .menu_group {position:absolute;top:0px;left:-180px;width:180px;height:3000px;overflow-y:hidden;}
.menu .menu_group .menu_title {margin-top:53px;font-family:"NotoSansKR B";font-size:34px;color:#ffffff;min-height:40px;padding:10px;}
.menu .menu_bg {position:absolute;top:0px;left:0px;width:180px;height:100%;background-color:#1195d1;}
.menu ul {width:100%;font-family:"NanumBarunGothic L";font-size:17px;text-align:left;color: #ffffff;}
.menu li {font-family:'NotoSansKR L';font-size:14px;position:relative;width:160px;height:40px;padding-left:20px;cursor:pointer;line-height:41px;background:none;border-bottom:1px #33a8dd solid;}
.menu li a {text-decoration:none;color:#fff}
.menu li a:hover {background-color:#005586;}
.menu .menu_li {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.menu .menu_li.active {background-color:#005586;}
.menu .menu_li:hover {background-color:#005586;}
.menu .menu_li.active span {position:absolute;top:10px;right:10px;width:16px;height:23px;background-image:url(../images/menu_icon.png);display:inline-block;}


/**/
.p_b_01, .p_b_02, .p_n_01, .p_n_02 {width:2px;height:10px;background-color:#ffffff;}
.p_b_01 {position:absolute;top:0px;left:13px;transform:rotate(45deg)}
.p_b_02 {position:absolute;top:7px;left:13px;transform:rotate(-45deg)}
.p_n_01 {position:absolute;top:0px;left:15px;transform:rotate(-45deg)}
.p_n_02 {position:absolute;top:7px;left:15px;transform:rotate(45deg)}

.btn_prev:hover .p_b_01 {background-color:#46d8d5;}
.btn_prev:hover .p_b_02 {background-color:#46d8d5;}
.btn_next:hover .p_n_01 {background-color:#46d8d5;}
.btn_next:hover .p_n_02 {background-color:#46d8d5;}

.corner {position:absolute;top:0px;left:0px;width:100%;height:100%;}
.corner_l {position:absolute;bottom:0px;left:0px;width:267px;height:267px;background-image:url(../images/corner_01.png);}
.corner_r {position:absolute;top:0px;right:0px;width:84px;height:84px;background-image:url(../images/corner_02.png);}

.navi_group { }
.btn_prev2 {position:absolute;top:0%;left:10px;z-index:9000;width:70px;height:50%;opacity:0.5;}
.btn_prev2 div {position:absolute;top:50%;left:0px;width:70px;height:70px;margin-top:15px;border-radius:50%;background:#666 url(../images/prev_btn2.png) no-repeat 45% center;background-size:25px auto;cursor:pointer;opacity:1.0;}
.btn_next2 {position:absolute;top:0%;right:10px;z-index:9000;width:70px;height:50%;opacity:0.5;}
.btn_next2 div {position:absolute;top:50%;right:0px;width:70px;height:70px;margin-top:15px;border-radius:50%;background:#666 url(../images/next_btn2.png) no-repeat 55% center;background-size:25px auto;cursor:pointer;opacity:1.0;}