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

@font-face {
  font-family:'NanumMyeongjo';
  src:url('../../font/NanumMyeongjo.eot');
  src:url('../../font/NanumMyeongjo.woff') format('woff'),
       url('../../font/NanumMyeongjo.ttf') format('truetype'),
       url('../../font/NanumMyeongjo.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;
}

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(../common/img/bg/bg.jpg);}
#warp-all{position:relative; width:1010px; height:568px; 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%}
#allBlind{position:absolute; width:1010px; height:800px; top:568px; left:0px; background-color:#fff; z-index:100000;}
#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-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:490px; height:25px; z-index:100;}
.weekBox{position:relative; float:left; left:0px; top:0px; height:25px; background-color:#fff; opacity:0.8;}
/* 차시번호 박스 */ .weekNumBox{position:relative; float:left; left:0px; top:0px; width:24px; height:24px; /* 배경색상 */ background-color:#000;}
/* 차시번호 */.weekNum{position:absolute; left:0px; top:4px; width:24px; font-family:'NanumBarunGothicBold'; color:#fff; font-size:16px; text-align:center;}
/* 차시명 */.weekName{position:relative; float:left; top:5px; font-family:'NanumBarunGothicBold'; color:#201a2f; font-size:15px; padding:0px 10px; letter-spacing:0px;}
.weekEnd{position:relative; float:left;}

.smallTitle{position:absolute; display:inline-block; left:30px; top:30px; width:300px; z-index:100; font-family:'NanumBarunGothicBold'; font-size:15px; color:#000; letter-spacing:-0.5px; 
			text-shadow:0px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff, -2px 0px 1px #ffffff;
			-moz-text-shadow:0px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff, -2px 0px 1px #ffffff;
			-webkit-text-shadow:0px -2px 1px #ffffff, 2px 0px 1px #ffffff, 0px 2px 1px #ffffff, -2px 0px 1px #ffffff;}
/* 과정명 - 과정명 길이에 따라 left값을 수정해 주면 됨 */
.subject{position:absolute; left:850px; top:0px; z-index:100;}

/**********/
/* 인덱스 */
/**********/
#ui-menu{position:absolute; left:0px; width:100%;}
.indexBg{position:absolute; top:0px; left:0px; width:1010px; background-image:url(../../img/ui-img/indexBg.png);}

/* 화면 전체를 덮는 스타일일 때 */
/*#ui-menu{z-index:2000; top:0px;}
.indexBg{height:568px;}

.subList a{position:absolute; text-decoration:none; left:713px; width:250px; font-family:'NanumBarunGothicBold'; font-weight:bold;
			font-size:37px;
			color:#9e9598;}
.subList a:hover, .subList a:focus, .subList a.selected{text-decoration:underline;
			color:#ffffff;}

#indexClose a{position:absolute; left:1016px; top:76px; width:46px; height:46px; background-image:url(../../img/ui-img/indexClose.png); background-position:0px 0px; z-index:2000;}
#indexClose a:hover{background-position:-50px 0px;}*/

/* 아래에서 위로 올라오는 스타일일 때 */
#ui-menu{z-index:1000;; top:630px;}
.indexBg a, .subList a{display:block; cursor:pointer; text-decoration:none;}
.subList a{position:absolute; top:13px; height:206px; text-indent:-9999px; background-position:0px 0px;}
.subList a:hover, .subList a:focus, .subList a.selected{background-position:-300px 0px;}
.subText{position:absolute; left:32px; top:70px; font-family:'NanumBarunGothic'; font-size:19px; color:#fff; padding-left:10px; background:url('../../img/ui-img/menuBulletOff.png') 0px 6px no-repeat; text-indent:0px;}
.subList a:hover .subText, .subList a:focus .subText, .subList a.selected .subText{color:#ffed1f; background:url('../../img/ui-img/menuBulletOn.png') 0px 6px no-repeat;}

/***************/
/* 스크립트 창 */
/***************/
#scriptUI{position:absolute; background:url(../../img/ui-img/script_top.png); left:0px; bottom:0px; z-index:1111;}
#scriptUI .top{width:1010px; height:23px;}	
#scriptUI .text{width:1010px; height:86px;}
#scriptUI .txt{position:relative; font-family:'NanumBarunGothic'; font-size:16px; width:890px; height:86px; left:30px; color:#fff; letter-spacing:1px; line-height:24px; word-break:keep-all;}
#scriptUI .txt .smi1{position:relative; float:left; width:100px; clear:both; /*자막창 사람 부분 글자 색상*/color:#ffc9bd; text-align:right;}
#scriptUI .txt .smi2{position:relative; float:left; width:780px; padding-left:5px;}

/***************/
/* 학습 도우미 */
/***************/
/* 학습도우미 일반 */
#ui-help{position:absolute; top:0px; left:0px; width:1010px; height:568px; z-index:10000; background-color:#120f0c;}
#popClose a{position:absolute; left:953px; top:15px; width:42px; height:42px; text-indent:-9999px; cursor:pointer; background:url(../../img/help/close2.png) top no-repeat; background-position:0px 0px;}
#popClose a:hover{background-position:-50px 0px;}
#popClose2 a{position:absolute; left:953px; top:15px; width:42px; height:42px; text-indent:-9999px; cursor:pointer; background:url(../../img/help/close.png) top no-repeat; background-position:0px 0px;}
#popClose2 a:hover{background-position:-50px 0px;}
#helpBtn1, #helpBtn2 a, #helpBtn3 a, #helpBtn4 a{position:absolute; width:138px; left:10px; text-indent:-9999px;}
#helpBtn2 a{top:10px; height:183px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:0px 0px;}
#helpBtn4 a{top:193px; height:183px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:-200px 0px;}
#helpBtn3 a{top:376px; height:182px; background:url(../../img/help/helpBtn.png) top no-repeat; background-position:-400px 0px;}
#helpBtn2 a:hover, #helpBtn2 a.selected{background-position:0px -300px;}
#helpBtn4 a:hover, #helpBtn4 a.selected{background-position:-200px -300px;}
#helpBtn3 a:hover, #helpBtn3 a.selected{background-position:-400px -300px;}

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

#mapAll #chap1, #mapAll #chap2, #mapAll #chap3, #mapAll #chap4, #mapAll #chap5, #mapAll #chap6, #mapAll #chap7, #mapAll #chap8, #mapAll #chap9, #mapAll #chap10, #mapAll #chap11, #mapAll #chap12, #mapAll #chap13, #mapAll #chap14, #mapAll #chap15, #mapAll #chap16, #mapAll #chap17, #mapAll #chap18, #mapAll #chap19, #mapAll #chap20, #mapAll #chap21, #mapAll #chap22, #mapAll #chap23, #mapAll #chap24, #mapAll #chap25, #mapAll #chap26, #mapAll #chap27, #mapAll #chap28, #mapAll #chap29, #mapAll #chap30, #mapAll #chap31, #mapAll #chap32, #mapAll #chap33, #mapAll #chap34, #mapAll #chap35, #mapAll #chap36, #mapAll #chap37, #mapAll #chap38, #mapAll #chap39, #mapAll #chap40, #mapAll #chap41, #mapAll #chap42, #mapAll #chap43, #mapAll #chap44, #mapAll #chap45, #mapAll #chap46, #mapAll #chap47, #mapAll #chap48, #mapAll #chap49, #mapAll #chap50, #mapAll #chap51, #mapAll #chap52, #mapAll #chap53, #mapAll #chap54, #mapAll #chap55, #mapAll #chap56, #mapAll #chap57, #mapAll #chap58, #mapAll #chap59, #mapAll #chap60{/*러닝맵 각 차시명 사이즈*/position:absolute; left:295px; width:639px; height:25px; font-family:'NanumBarunGothic'; font-size:12px; color:#000;}
#mapAll .chasiNum{position:absolute; left:0px; top:6px; width:49px; font-family:'NanumBarunGothicBold'; text-align:center;}
#mapAll .chasiName{position:absolute; left:50px; top:6px; width:300px; font-family:'NanumBarunGothic';}
#mapAll .chasiUnit{position:absolute; left:365px; top:6px; width:275px; font-family:'NanumBarunGothic'; text-align:center;}
#mapAll .selected{background:url(../../img/help/chasiBg.png) 0px 0px no-repeat;}
#mapAll .selected .chasiNum{color:#008756}
#mapAll .selected .chasiName{font-family:'NanumBarunGothicBold'; color:#008756;}
#mapAll .selected .chasiUnit{font-family:'NanumBarunGothicBold'; color:#008756;}

#module1, #module2, #module3, #module4, #module5, #module6, #module7, #module8, #module9, #module10{/*러닝맵 화면 위치 및 크기값*/ position:absolute; left:0px; top:0px; width:1010px; height:568px;}

.moduleName{position:absolute; left:213px; width:82px; font-family:'NanumBarunGothic'; font-size:12px; color:#000; text-align:center; line-height:20px;}
.moduleNameTxt{position:absolute; left:0px; width:100%;}
.moduleName .high{font-family:'NanumBarunGothicBold';}
.moduleName.selected2{background:url(../../img/help/moduleBg.png) top no-repeat; color:#008513;}

/*러닝맵 화면이 두개 이상일 경우 화면 이동 버튼*/
#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:1010px; height:568px; background:url(../../img/help/bg_01.png);}
#screenAll #screenBtn1 a, #screenAll #screenBtn2 a, #screenAll #screenBtn3 a, #screenAll #screenBtn4 a, #screenAll #screenBtn5 a, #screenAll #screenBtn6 a{position:absolute; width:29px; height:29px; text-indent:-9999px; cursor:pointer;}
#screenAll #screenBtn1 a{left:298px; top:135px; 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:897px; top:135px; 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:298px; top:421px; 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:699px; top:455px; 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:787px; top:455px; 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:897px; top:421px; 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:332px; top:135px; width:560px; height:315px;}

/* 선생님 소개 관련 */
#teacherAll{position:absolute; left:0px; top:0px; width:1010px; height:568px; background:url(../../img/help/bg_01.png);}
/* 선생님 소개 화면 */
#teacher1, #teacher2, #teacher3, #teacher4, #teacher5{position:absolute; left:148px; top:10px; width:853px; height:549px;}
#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);}
#teacher5{background:url(../../img/help/teacher05.png);}
.teacherText1{position:absolute; font-family:'NanumMyeongjo'; font-size:20px; color:#32455e;}
#teacherAll ul{position:absolute; font-family:'NanumMyeongjo'; font-size:18px; padding:0px; margin:0px;}
#teacherAll ul li{font-family:'NanumMyeongjo'; font-size:15px; color:#151313; opacity:0.8; list-style:none; padding-top:5px; line-height:18px;}
/* 이름 탭 이동 버튼 */
#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:507px; top:507px;}
#teacherPrevBtn a{position:absolute; left:0px; top:0px; width:24px; height:27px; 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:24px; height:27px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:-50px 0px;}
#teacherNextBtn a:hover{background-position:-50px -50px;}
#teacherNowNum{position:absolute; left:18px; top:4px; width:38px; text-align:center; font-family:'NanumBarunGothicBold'; font-size:20px; color:#ef4476;}
#teacherTotNum{position:absolute; left:61px; top:4px; width:38px; text-align:center; font-family:'NanumBarunGothicBold'; font-size:20px; color:#615f51;}
#teacherNumDot{position:absolute; left:56px; top:11px; width:5px; height:5px; background:url(../../img/help/mapMove.png) top no-repeat; background-position:-30px 0px;}

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

/* 저작권 관련 */
#copyrightAll{position:absolute; left:0px; top:0px; width:1010px; height:568px; 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:75px; height:75px; 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:416px; top:180px; 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:370px; top:370px; 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:0px; top:0px; width:280px; height:300px; z-index:100}
#bookmarkAll{position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden;}
#bookmarkBtn a{position:absolute; left:244px; top:0px; width:36px; height:36px; text-indent:-9999px; background: url(../../img/ui-img/bookmarkBtn.png) top no-repeat; background-position:0px 0px; z-index:100}
#bookmarkBtn a:hover, #bookmarkBtn a.selected{height:126px; background-position: -50px 0px;}
#bookmark{position:absolute; left:280px; 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:225px; height:22px; display:none; font-family:'NanumBarunGothic'; color:#fff; font-size:14px; text-decoration:none; padding-left:18px; padding-top:4px; background:url(../../img/ui-img/bookmarkDot.png) 0px -1px no-repeat; word-break:keep-all;}
#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:#ff9601; background: url(../../img/ui-img/bookmarkDot_over.png) 0px -1px 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:#ff9601; background: url(../../img/ui-img/bookmarkDot_over.png) 0px -1px no-repeat; background-color:#252021;}