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

/*****************/
/* 전체 공용 css */
/*****************/
@font-face {
  font-family:'NanumBarunGothicLight';
  src:url('../../font/NanumBarunGothicLight.eot');
  src:url('../../font/NanumBarunGothicLight.woff') format('woff'),
       url('../../font/NanumBarunGothicLight.ttf') format('truetype'),
       url('../../font/NanumBarunGothicLight.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@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:'NanumBarunGothicBold';
  src:url('../../font/NanumBarunGothicBold.eot');
  src:url('../../font/NanumBarunGothicBold.woff') format('woff'),
       url('../../font/NanumBarunGothicBold.ttf') format('truetype'),
       url('../../font/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'RoundedElegance';
  src:url('../../font/RoundedElegance.eot');
  src:url('../../font/RoundedElegance.woff') format('woff'),
       url('../../font/RoundedElegance.ttf') format('truetype'),
       url('../../font/RoundedElegance.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  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.woff2') format('woff2'),
        url('../../font/NanumSquareB.woff') format('woff'),
        url('../../font/NanumSquareB.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquareRoundEB';
    src: url('../../font/NanumSquareRoundEB.eot');
    src: url('../../font/NanumSquareRoundEB.eot?#iefix') format('embedded-opentype'),
        url('../../font/NanumSquareRoundEB.woff2') format('woff2'),
        url('../../font/NanumSquareRoundEB.woff') format('woff'),
        url('../../font/NanumSquareRoundEB.ttf') format('truetype');
    font-weight: 300;
    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.woff2') format('woff2'),
        url('../../font/NanumSquareEB.woff') format('woff'),
        url('../../font/NanumSquareEB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
  font-family: 'NanumSquare_acEB';
  src: url('../../font/NanumSquare_acEB.eot');
  src: url('../../font/NanumSquare_acEB.eot?#iefix') format('embedded-opentype'),
       url('../../font/NanumSquare_acEB.ttf') format('truetype'),
       url('../../font/NanumSquare_acEB.woff') format('woff');
  font-weight: normal;
  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; background:url(../../img/bg/bg.png);}
#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:800px; top:630px; left:0px; background-color:#fff; z-index:100000; display:none;}
#ui-loading{position:absolute; left:544px; top:299px; width:32px; height:32px; background-image:url(../../img/ui-img/loading.gif); z-index:2000;}
#ui-top{position:absolute; top:0px; left:0px; z-index:1000;}
#ui-top2{position:absolute; top:0px; left:0px; z-index:1000;}
#ui-contents{position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:100; overflow:hidden;}
ul, li{list-style:none; margin:0px}

/**********/
/* 최상단 */
/**********/
/* 차시명 */
.week{position:absolute; left:0px; top:0px; width:600px; height:30px; z-index:100;}
.week2{position:absolute; left:1px; top:29px; width:212px; height:33px; z-index:100;}
.week3{position:absolute; left:1px; top:29px; width:212px; height:33px; z-index:100;}
.week4{position:absolute; left:1px; top:29px; width:212px; height:33px; z-index:100;}
.week5{position:absolute; left:1px; top:29px; width:212px; height:33px; z-index:100;}

/*.weekBox{position:relative; float:left; left:0px; top:0px; height:100%; background-color:#fff; opacity:1;}
/* 차시번호 박스 */ /*.weekNumBox{position:relative; float:left; left:0px; top:0px; width:30px; height:30px; /* 배경색상 */ /*background-color:#2529a4;}
/* 차시번호 *//*.weekNum{position:absolute; left:0px; top:5px; width:100%; font-family:'RoundedElegance'; color:#fff; font-size:20px; text-align:center;}
/* 차시명 *//*.weekName{position:relative; float:left; top:7px; font-family:'NanumBarunGothicBold'; color:#000000; font-size:16px; padding:0px 6px; letter-spacing:0px;}
/*.weekEnd{position:relative; float:left;}*/

.smallTitle{position:absolute; display:inline-block; left:30px; top:30px; width:700px; height:26px; z-index:100; font-family:'NanumBarunGothicBold'; font-size:15px; color:#ffc90c;}
.smallTitleLeft{position:relative; float:left; width:22px; height:25px; background-image:url(../../img/page/smallTitleLeft.png);}
.smallTitleBody{position:relative; float:left; height:21px; background-image:url(../../img/page/smallTitleBody.png); padding-top:4px;}
.smallTitleRight{position:relative; float:left; width:25px; height:25px; background-image:url(../../img/page/smallTitleRight.png);}
.smallTitleText{font-family:'NanumBarunGothic'; color:#ffffff;}
.pageTitle{position:relative; display:inline-block; float:left; height:25px; margin-left:-15px; font-family:'NanumBarunGothic'; font-size:13px; color:#ffc90c; display:none;}
.pageTitleLeft{position:relative; float:left; width:0px; height:0px; border-top:25px solid none; border-bottom:25px solid rgba(0, 0, 0, 0.5); border-right:25px solid none; border-left:14px solid transparent;}
.pageTitleBody{position:relative; float:left; height:19px; background-color:rgba(0, 0, 0, 0.5); padding-top:6px; padding-left:2px; padding-right:2px;}
.pageTitleRight{position:relative; float:left; width:0px; height:0px; border-top:25px solid none; border-bottom:25px solid transparent; border-right:25px solid none; border-left:15px solid rgba(0, 0, 0, 0.5);}
.pageTitleText{color:#ffffff;}

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




/***************/
/* 스크립트 창 */
/***************/
#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:105px; clear:both; /*자막창 사람 부분 글자 색상*/color:#ffc90c; text-align:right;}
#scriptUI .txt .smi2{position:relative; float:left; width:890px; padding-left:5px; padding-bottom:5px;}

/***************/
/* 학습 도우미 */
/***************/
/*학습도우미 일반*/
#ui-help{position:absolute; top:0px; left:0px; width:1120px; height:630px; z-index:10000; background-color:#120f0c;}
#popClose a{position:absolute; left:1074px; top:17px; width:32px; height:32px; text-indent:-9999px; cursor:pointer; background:url(../../img/help/close.png) top no-repeat; background-position:0px 0px;}
#popClose a:hover{background-position:-50px 0px;}
#helpBtn1 a, #helpBtn2 a, #helpBtn3 a, #helpBtn4 a{position:absolute; width:83px; height:21px; top:26px; text-indent:-9999px;}
#helpBtn1 a{left:697px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:0px 0px;}
#helpBtn2 a{left:772px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:-200px 0px;}
#helpBtn3 a{left:861px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:-400px 0px;}
#helpBtn4 a{left:963px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:-600px 0px;}
#helpBtn1 a:hover, #helpBtn1 a.selected{background-position:0px -50px;}
#helpBtn2 a:hover, #helpBtn2 a.selected{background-position:-200px -50px;}
#helpBtn3 a:hover, #helpBtn3 a.selected{background-position:-400px -50px;}
#helpBtn4 a:hover, #helpBtn4 a.selected{background-position:-600px -50px;}

/* 러닝맵 관련 */
#mapAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background:url(../../img/help/bg_01.png);}

.chap{position:absolute; width:440px; height:25px;}
.chapNumBox{position:relative; float:left; width:25px; height:25px; background-image:url(../../img/help/mapNumBg.png); background-position:0px 0px;}
.chapNumTxt{/*차시번호*/ position:absolute; left:0px; top:1px; width:25px; text-align:center; font-family:'RoundedElegance'; font-size:23px; color:#ffc90c;}
.chapTxt{/*차시명*/position:relative; float:left; width:auto; top:2px; font-family:'NanumBarunGothic'; font-size:20px; color:#afa4a4; padding-left:7px; padding-right:7px; letter-spacing:-1.5px;}
.chapLine{/*구분 선*/ position:relative; float:right; top:12px; height:1px; background-color:#ffc90c;}
.chap .downBtn a{position:relative; float:right; top:2px; width:28px; height:20px; background-image:url(../../img/help/downBtn.png); background-position:0px 0px; cursor:pointer;}

.chap.selected .chapNumBox{/*차시번호 강조색*/ background-position:-50px 0px;}
.chap.selected .chapNumTxt{/*차시번호 강조색*/ color:#0f0f0f;}
.chap.selected .chapTxt{/*차시명 강조색*/color:#ffffff;}

.module{/*러닝맵 화면 위치 및 크기값*/ position:absolute; left:0px; top:0px; width:1120px; height:630px;}

.moduleNum{/*모듈명 크기값*/ position:absolute; width:743px; height:40px; background-position:0px 0px;}
.moduleNum.selected{background-position:0px -50px;}

/*러닝맵 화면이 두개 이상일 경우 화면 이동 버튼*/
#mapMove{position:absolute; left:653px; top:555px;}
#mapPrevBtn a{position:absolute; left:0px; top:0px; width:21px; height:27px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:0px 0px;}
#mapPrevBtn a:hover{background-position:0px -50px;}
#mapNextBtn a{position:absolute; left:83px; top:0px; width:21px; height:27px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:-50px 0px;}
#mapNextBtn a:hover{background-position:-50px -50px;}
#mapNowNum{/*현재 화면 번호*/ position:absolute; left:28px; top:4px; text-align:center; font-family:'NanumBarunGothic'; font-size:20px; color:#ff6f28; font-weight:bold;}
#mapTotNum{/*전체 화면 개수*/position:absolute; left:65px; top:4px; text-align:center; font-family:'NanumBarunGothic'; font-size:20px; color:#010101; font-weight:bold;}
#mapNumDot{position:absolute; left:51px; top:5px; width:1px; height:17px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:-30px 0px;}

/* 화면 안내 관련 */
#screenAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background:url(../../img/help/bg_02.png);}
#screenAll #screenBtn1 a, #screenAll #screenBtn2 a, #screenAll #screenBtn3 a, #screenAll #screenBtn4 a, #screenAll #screenBtn5 a, #screenAll #screenBtn6 a{position:absolute; width:25px; height:25px; text-indent:-9999px; cursor:pointer;}
#screenAll #screenBtn1 a{left:253px; top:172px; background:url(../../img/help/number.png) top no-repeat; background-position:0px 0px;}
#screenAll #screenBtn1 a:hover, #screenAll #screenBtn1 a.selected{background-position:0px -35px;}
#screenAll #screenBtn2 a{left:253px; top:252px; background:url(../../img/help/number.png) top no-repeat; background-position:-40px 0px;}
#screenAll #screenBtn2 a:hover, #screenAll #screenBtn2 a.selected{background-position:-40px -35px;}
#screenAll #screenBtn3 a{left:284px; top:525px; background:url(../../img/help/number.png) top no-repeat; background-position:-80px 0px;}
#screenAll #screenBtn3 a:hover, #screenAll #screenBtn3 a.selected{background-position:-80px -35px;}
#screenAll #screenBtn4 a{left:654px; top:525px; background:url(../../img/help/number.png) top no-repeat; background-position:-120px 0px;}
#screenAll #screenBtn4 a:hover, #screenAll #screenBtn4 a.selected{background-position:-120px -35px;}
#screenAll #screenBtn5 a{left:877px; top:525px; background:url(../../img/help/number.png) top no-repeat; background-position:-160px 0px;}
#screenAll #screenBtn5 a:hover, #screenAll #screenBtn5 a.selected{background-position:-160px -35px;}
#screenAll #screenBtn6 a{left:976px; top:512px; background:url(../../img/help/number.png) top no-repeat; background-position:-200px 0px;}
#screenAll #screenBtn6 a:hover, #screenAll #screenBtn6 a.selected{background-position:-200px -35px;}
#screenAll #screen0, #screenAll #screen1, #screenAll #screen2, #screenAll #screen3, #screenAll #screen4, #screenAll #screen5, #screenAll #screen6{position:absolute; left:283px; top:172px; width:620px; height:348px;}

/* 선생님 소개 관련 */
#teacherAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background:url(../../img/help/bg_04.png);}
/* 선생님 소개 화면 */
#teacher1, #teacher2, #teacher3, #teacher4{position:absolute; left:0px; top:0px; width:1120px; height:630px;}
#teacher1{background:url(../../img/help/teacher01.png);}
#teacher2{background:url(../../img/help/teacher02.png);}
#teacher3{background:url(../../img/help/teacher03.png);}
#teacher4{background:url(../../img/help/teacher04.png);}
.teacherNameBig{position:absolute; font-family:'NanumBarunGothic'; font-size:40px; color:#ffc808;}
.teacherNameSmall{position:absolute; font-family:'NanumBarunGothic'; font-size:30px; color:#e1e1e1;}
.teacherText1{position:absolute; font-family:'NanumBarunGothic'; font-size:20px; color:#ffc808; border-bottom:1px solid #ffc808; padding-bottom:1px;}
.teacherText2{position:absolute; font-family:'NanumBarunGothic'; font-size:17px; color:#e1e1e1; line-height:21px;}
/* 이름 탭 이동 버튼 */
#teacherName1 a, #teacherName2 a, #teacherName3 a, #teacherName4 a{position:absolute; top:90px; width:183px; height:39px;}
#teacherName1 a{left:327px; background:url(../../img/help/teacherName.png) top no-repeat; background-position:0px 0px;}
#teacherName1 a:hover, #teacherName1 a.selected{background-position:0px -50px;}
#teacherName2 a{left:514px; background:url(../../img/help/teacherName.png) top no-repeat; background-position:-200px 0px;}
#teacherName2 a:hover, #teacherName2 a.selected{background-position:-200px -50px;}
#teacherName3 a{left:700px; background:url(../../img/help/teacherName.png) top no-repeat; background-position:-400px 0px;}
#teacherName3 a:hover, #teacherName3 a.selected{background-position:-400px -50px;}
#teacherName4 a{left:887px; background:url(../../img/help/teacherName.png) top no-repeat; background-position:-600px 0px;}
#teacherName4 a:hover, #teacherName4 a.selected{background-position:-600px -50px;}
/* 백넥 버튼 */
#teacherMove{position:absolute; left:653px; top:555px;}
#teacherPrevBtn a{position:absolute; left:0px; top:0px; width:23px; height:25px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:0px 0px;}
#teacherPrevBtn a:hover{background-position:0px -50px;}
#teacherNextBtn a{position:absolute; left:93px; top:0px; width:23px; height:25px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:-50px 0px;}
#teacherNextBtn a:hover{background-position:-50px -50px;}
#teacherNowNum{position:absolute; left:28px; top:0px; text-align:center; font-family:'NanumBarunGothicc'; font-size:20px; color:#237200; font-weight:bold;}
#teacherTotNum{position:absolute; left:69px; top:0px; text-align:center; font-family:'NanumBarunGothic'; font-size:20px; color:#615f51; font-weight:bold;}
#teacherNumDot{position:absolute; left:51px; top:10px; width:5px; height:6px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:-30px 0px;}

/* 키보드 제어 관련 */
#keyAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background:url(../../img/help/bg_03.png);}

/* 저작권 관련 */
#copyrightAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background:url(../../img/help/bg_04.png);}
#copyBtn a{position:absolute; left:796px; top:90px; width:274px; height:59px; background:url(../../img/help/copyrightBtn.png); background-position:0px 0px;}
#copyBtn a:hover{background-position:0px -80px;}

/************/
/* skip버튼 */
/************/
#skip a{display:block; position:absolute; right:20px; bottom:20%; width:82px; height:82px; cursor:pointer; text-indent:-9999px; background:url(../../img/ui-img/skipBtn.png) top no-repeat; background-position:0px 0px; z-index:1000;}
#skip a:hover{background-position:0px -100px;}

/**********/
/* 동영상 */
/**********/
#myVideo{width:100%; height:100%; z-index:11;}
#mobileStartBtn a{position:absolute; left:471px; top:211px; 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:425px; top:401px; text-align:center; color:#000; font-family:'NanumBarunGothic'; font-size:18px; z-index:10000;}
.scroll_txt{overflow-x:hidden; overflow-y:auto;}

/* 북마크 */
#ui-bookmark{position:absolute; right:-280px; top:200px; width:309px; height:200px; z-index:100}
#bookmarkBtn a{position:absolute; left:0px; top:0px; width:29px; height:118px; text-indent:-9999px; background: url(../../img/ui-img/bookmarkBtn.png) top no-repeat; background-position: 0px 0px; z-index:100}
#bookmarkBtn a:hover{background-position: -30px 0px;}
#bookmark{position:absolute; left:29px; top:0px; width:280px; height:200px; z-index:99}
#bookmarkTop{position:absolute; left:0px; top:0px; width:280px; height:11px; background: url(../../img/ui-img/bookmarkBg.png);}
#bookmarkMiddle{position:absolute; left:0px; top:11px; width:280px; height:150px; background: url(../../img/ui-img/bookmarkBg.png);}
#bookmarkBottom{position:absolute; left:0px; top:161px; width:280px; height:11px; background: url(../../img/ui-img/bookmarkBg.png);}
#bookmarkText1 a, #bookmarkText2 a, #bookmarkText3 a, #bookmarkText4 a, #bookmarkText5 a, #bookmarkText6 a, #bookmarkText7 a, #bookmarkText8 a, #bookmarkText9 a, #bookmarkText10 a{position:absolute; left:0px; width:265px; height:22px; display:none; font-family:'NanumBarunGothic'; color:#fff; font-size:14px; text-decoration:none; padding-left:15px; padding-top:4px; background: url(../../img/ui-img/bookmarkDot.png) no-repeat;}
#bookmarkText1 a img, #bookmarkText2 a img, #bookmarkText3 a img, #bookmarkText4 a img, #bookmarkText5 a img, #bookmarkText6 a img, #bookmarkText7 a img, #bookmarkText8 a img, #bookmarkText9 a img, #bookmarkText10 a img{vertical-align:middle;}
#bookmarkText1 a:hover, #bookmarkText2 a:hover, #bookmarkText3 a:hover, #bookmarkText4 a:hover, #bookmarkText5 a:hover, #bookmarkText6 a:hover, #bookmarkText7 a:hover, #bookmarkText8 a:hover, #bookmarkText9 a:hover, #bookmarkText10 a:hover{color:#ffc90c; background: url(../../img/ui-img/bookmarkDot_over.png) no-repeat;}
#bookmarkText1 a.selected, #bookmarkText2 a.selected, #bookmarkText3 a.selected, #bookmarkText4 a.selected, #bookmarkText5 a.selected, #bookmarkText6 a.selected, #bookmarkText7 a.selected, #bookmarkText8 a.selected, #bookmarkText9 a.selected, #bookmarkText10 a.selected{/* 글자 색깔 */ color:#ffc90c; background: url(../../img/ui-img/bookmarkDot_over.png) no-repeat; background-color:#252021;}

.fiDownBtn a{position:absolute; left:851px; top:529px; width:209px; height:38px; background-image: url(../../img/page/fiDownBtn.png); background-position:0px 0px; z-index:10000;}
.fiDownBtn a:hover{background-position:0px -59px;}



/* css 수정 */
body{display: flex; align-items: center; justify-content: center;}
.first{display: flex; flex-direction: column;}
#menu{top:unset; bottom:0;}
#ui-menu, #ui-bottom{left: 0 !important;}
#ui-bottom{top: unset; bottom:0;}
.indexBtn{top:unset; bottom: 0; }
.indexBtn #menu_on a{top: unset; bottom: 35px;}
#myVideo{background-color: #000;}
#indexClose a{display: none;}