@charset "utf-8";
/* CSS Document */

@font-face {
  font-family:'NanumBarunGothic';
  src:url('../font/NanumBarunGothic.eot');
  src:url('../font/NanumBarunGothic.woff') format('woff'),
       url('../font/NanumBarunGothic.ttf') format('truetype'),
       url('../font/NanumBarunGothic.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
    font-family: 'NanumSquareEB';
    src: url('../font/NanumSquareEB.eot');
    src: url('../font/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
        url('../font/NanumSquareEB.woff') format('woff'),
        url('../font/NanumSquareEB.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquareB';
    src: url('../font/NanumSquareB.eot');
    src: url('../font/NanumSquareB.eot?#iefix') format('embedded-opentype'),
        url('../font/NanumSquareB.woff') format('woff'),
        url('../font/NanumSquareB.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
body, div, p{ margin:0; padding:0;} 
html,body{overflow:hidden; height:100%;	-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none;}
/*#warp-all{position:relative; width:1120px; height:630px; z-index:1000; display:table; -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; overflow:hidden; background:url(../img/bg/bg.png); background-position:-50% -50%; background-size:100% 100%}
#allBlind{position:absolute; width:1120px; height:630px; top:630px; left:0px; background-color:#fff; z-index:100000; display:none; clip: rect(0px, 1120px, 630px, 0px);}*/

#warp-all{
position:absolute; width:1120px; height:630px; z-index:1000; display:table;
-moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left;
overflow:hidden; background:url(../img/bg/bg.jpg); background-position:-50% -50%; background-size:100% 100%;

clip: rect(0px, 1120px, 630px, 0px);
}


#ui-loading{position:absolute; left:545px; top:285px; width:32px; height:32px; background-image:url(../img/ui-img/loading.gif); z-index:2000;}
#ui-top{position:absolute; top:13px; left:12px; z-index:1010;}
#ui-top2{position:absolute; top:40px; left:30px; z-index:1000;}
#ui-contents{position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:100; overflow:hidden;}
#ui-bottom_bg{position:absolute; top:500px; left:0px; width:1120px; height:130px; z-index:1100; background-image:url(../img/ui-img/bottomBg.png); pointer-events:none;}
ul, li{list-style:none; margin:0px}

/**********/
/* 최상단 */
/**********/
/* 차시명 */
.week{position:absolute; left:0px; top:0px; width:960px; height:30px; z-index:100;}

/* 과정명 - 과정명 길이에 따라 left값을 수정해 주면 됨 */
.subject{position:absolute; left:1010px; top:0px; z-index:100; display:none;}

.first {position:absolute; top:0px;}
/*
#ui-menu{position:absolute; top:0px; left:-247px; width:309px; height:4px; z-index:1000; word-break:keep-all; transition: left 0.3s ease-in-out;}
.indexBg{position:absolute; left:0px; width:232px; background-image:url(../img/index-img/indexBg.png);}

.indexBg a, .subList a{display:block; cursor:pointer;}

.subListhr {padding-left:0px; height:1px; width:232px; background-image:url(../img/index-img/line.png);}

.menuList a{font-family:'NanumSquareEB'; color:#000000; font-size:17px; display:table-cell; vertical-align:middle; text-align:middle; vertical-align:middle; text-decoration:none; }

.menuList .menuList1 .menuList2 .menuList3 .menuList4 .menuList5 .menuList6 .menuList7
.menuList .menuList a:focus, .menuList a.selected {color:#ee853e;}
.menuList .menuList a:focus, .menuList a:hover {color:#ee853e;}

.menuList1, .menuList2, .menuList5, .menuList4, .menuList6, .menuList7 {width:232px; height:46px; padding-left:36px; display:table-cell; vertical-align:middle; }
.menuList3 {width:232px; height:80px; padding-left:36px; display:table-cell; vertical-align:middle; }
.menuList3 {border-bottom:1px solid #ebebeb;}
.menuList .menuList1 {background-image:url(../img/index-img/01_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList1 {background-image:url(../img/index-img/01_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList1 {background-image:url(../img/index-img/01_icon_over.png);}

.menuList .menuList2 {background-image:url(../img/index-img/02_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList2 {background-image:url(../img/index-img/02_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList2 {background-image:url(../img/index-img/02_icon_over.png);}

.menuList .menuList3 {background-image:url(../img/index-img/03_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList3 {background-image:url(../img/index-img/03_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList3 {background-image:url(../img/index-img/03_icon_over.png);}

.menuList .menuList4 {background-image:url(../img/index-img/04_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList4 {background-image:url(../img/index-img/04_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList4 {background-image:url(../img/index-img/04_icon_over.png);}

.menuList .menuList5 {background-image:url(../img/index-img/05_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList5 {background-image:url(../img/index-img/05_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList5 {background-image:url(../img/index-img/05_icon_over.png);}

.menuList .menuList6 {background-image:url(../img/index-img/06_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList6 {background-image:url(../img/index-img/06_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList6 {background-image:url(../img/index-img/06_icon_over.png);}

.menuList .menuList7 {background-image:url(../img/index-img/07_icon.png); background-repeat:no-repeat;}
.menuList .menuList a:focus, .menuList a.selected .menuList7 {background-image:url(../img/index-img/07_icon_over.png);}
.menuList .menuList a:focus, .menuList a:hover .menuList7 {background-image:url(../img/index-img/07_icon_over.png);}

#indexClose a{position:absolute; left:213px; top:-19px; width:19px; height:19px; background-image:url(../img/index-img/closebtn.png); background-position:0px 0px; z-index:2000;}
*/

/***************/
/* 스크립트 창 */
/***************/
#scriptUI{position:absolute; background:url(../img/ui-img/script_top.png); left:0px; bottom:0px; /*display:none;*/ z-index:1111;}
#scriptUI .top{width:1120px; height:23px;}	
#scriptUI .text{width:1120px; height:86px;}
/* #scriptUI .txt{position:relative; font-family:'NanumBarunGothic'; font-size:16px; width:1000px; height:86px; left:30px; color:#fff; letter-spacing:1px; line-height:24px; word-break:keep-all;} */
/* #scriptUI .txt .smi1{position:relative; float:left; width:110px; clear:both; color:#fdd100; text-align:right;} */
/* #scriptUI .txt .smi2{position:relative; float:left; width:880px; padding-left:5px; padding-bottom:5px;} */

#scriptUI #scriptClose{position:relative; left:1078px; top:10px;}	
#scriptUI .top a{width:21px; height:21px; display:block; text-indent:-9999px; cursor:pointer; background:url(../img/ui-img/script_close.png) top no-repeat; background-position:0px 0px;}
#scriptUI .top a:hover{background-position:0px -30px;}
#scriptUI .bottom{width:1120px; height:64px;}

#scriptUI .txt {
    position: relative;
    width: 1000px;
    left: 30px;
    height: 86px;
    margin: 0;
    padding: 0 10px;
    font-size: 0;
    overflow-y: auto;
    color: #fff;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
  }
  #scriptUI .txt::-webkit-scrollbar {
    width: 6px;
  }
  
  #scriptUI .txt::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.3);
    border-radius: 3px;
  }
  
  #scriptUI .txt::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .caption-line {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    word-break: keep-all;
  }
  
  .caption-name {
    flex: 0 0 auto;
    width: 80px;
    font-weight: bold;
    color: #fdd100;
    text-align: right;
    margin-right: 10px;
  }
  
  .caption-text {
    flex: 1;
    white-space: normal;
    line-height: 24px;
  }


#myVideo{width:100%; height:100%; z-index:11;}
#mobileStartBtn a{position:absolute; left:50%; transform: translateX(-50%); top:150px; width:178px; height:178px; text-align:center; text-indent:-9999px; background:url(../img/ui-img/mobileStart.png); z-index:10000;}
#mobileText{display:none; position:absolute; left:50%;  transform: translateX(-50%); top:341px; text-align:center; color:#000; font-family:'NanumBarunGothic'; font-size:18px; z-index:10000;}
.scroll_txt{overflow-x:hidden; overflow-y:auto;}

#promise{position:absolute; left:0px; top:0px; display:none; z-index:9999;}
#promise a{position:absolute; width:1120px; height:630px; text-indent:-9999px; background:url(../img/ui-img/promise.png) top no-repeat; }

/* 인트로 페이지 팝업 */
/*
.introPopupBtn a {
  transform: translateX(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  opacity: 0;
}

.introPopupBtn.show a {
  transform: translateX(0px);
  opacity: 1;
}

.introPopupBtn a{position:absolute; left:958px; top:523px; width:131px; height:29px; background-image:url('../img/page/profile/profile_btn.png');}
.introPopupBtn a:hover{background-image:url('../img/page/profile/profile_btn_over.png'); }
.introPop{position:absolute; left:0px; top:0px; width:1120px; height:630px; display:none;}
.introPopTeacher{position:absolute; left:0px; top:0px; width:1120px; height:630px; background-image:url('../img/page/profile/profile.png');}
.introPopClose a{position:absolute; left:1040px; top:30px; width:35px; height:35px; background-image:url('../img/page/profile/profile_close.png'); }
.introPopClose a:hover{background-image:url('../img/page/profile/profile_close_over.png'); }
*/