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

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

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

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

#warp-all{position:relative; width:1120px; height:630px; z-index:1000; -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%}

/* 가변브라우징 css */
#warp-all.full{width:100%; height:100%; z-index:1000;}
#warp-all.full #skip a{bottom:10%;}
#warp-all.fullScreen{width:100%; height:100%;}
#warp-all.fullScreen #ui-contents{left:0; top:0; width:100%; height:100%;}

#ui-loading{position:absolute; left:calc((100% - 32px) / 2); top:calc((100% - 32px) / 2); width:32px; height:32px; background-image:url('../../img/ui-img/loading.gif'); z-index:2000;}
#ui-contents{position:absolute; left:calc((100% - 1120px) / 2); top:calc((100% - 630px) / 2); width:1120px; height:630px; z-index:100; overflow:hidden;}
ul, li{list-style:none; margin:0px}

#page{display:none;}

/**********/
/* 최상단 */
/**********/
#ui-top{position:absolute; top:0px; left:0px; width:100%; z-index:1191; opacity:1; transition:0.3s;}
#ui-top.hide{opacity:0;}
/* 과정명 - 과정명 길이에 따라 left값을 수정해 주면 됨 */
.subject{position:absolute; right:0px; top:0px; z-index:100;}
.smallTitle{position:absolute; left:29px; top:29px; min-width:100px; height:20px; display:none;}
.smallTitleHead{position:relative; float:left; left:0px; top:0px; width:11px; height:20px; background-image:url('../../img/ui-img/smallTitleHead.png');}
.smallTitleBody{position:relative; float:left; left:0px; top:0px; height:16px; padding:4px 0px 0px 0px; background-image:url('../../img/ui-img/smallTitleBody.png'); font-family:'NanumBarunGothicBold'; color:#ffffff; font-size:13px;}
.smallTitleFoot{position:relative; float:left; left:0px; top:0px; width:15px; height:20px; background-image:url('../../img/ui-img/smallTitleFoot.png');}

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

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

.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;}
.indexBg a, .subList a{display:block; cursor:pointer;}
.subList a{position:absolute; height:322px; top:47px; background-position:0px 0px;}
.subList a:hover, .subList a:focus, .subList a.selected{background-position:-200px 0px;}
.indexLine{position:absolute; width:1px; height:341px; top:0px; background-image:url('../../img/ui-img/indexLine.png');}

/***************/
/* 스크립트 창 */
/***************/
#scriptUI{position:absolute; left:calc((100% - 1120px) / 2); bottom:0px; background-image:url('../../img/ui-img/script_top.png'); 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:100px; clear:both; /*자막창 사람 부분 글자 색상*/color:#0096ff; text-align:right;}
#scriptUI .txt .smi2{position:relative; float:left; width:890px; padding-left:5px;}

/***************/
/* 학습 도우미 */
/***************/
/*학습도우미 일반*/
#ui-help{position:absolute; left:calc((100% - 1120px) / 2); top:calc((100% - 630px) / 2); width:1120px; height:630px; font-family:'NanumBarunGothic'; z-index:10000; background-color:#003b91;}
#popClose a{position:absolute; left:1049px; top:25px; width:46px; height:46px; text-indent:-9999px; cursor:pointer; background-image:url('../../img/help/close.png'); background-position:0px 0px;}
#popClose a:hover{background-position:-50px 0px;}
.helpBtnText{display:table-cell; vertical-align:middle;}
#helpBtn1 a, #helpBtn2 a, #helpBtn3 a, #helpBtn4 a{position:absolute; top:100px; height:45px; font-size:30px; display:table; color:#ffffff; text-align:center; border:1px solid #0000ff; background-color:#0000ff; text-decoration:none;}
#helpBtn1 a:hover, #helpBtn1 a.selected, #helpBtn2 a:hover, #helpBtn2 a.selected, #helpBtn3 a:hover, #helpBtn3 a.selected, #helpBtn4 a:hover, #helpBtn4 a.selected{color:#0000ff; background-color:#26f7ff; border:1px solid #0000ff;}

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

.mapPage{/* 러닝맵 각 페이지 */ position:absolute; left:0px; top:0px; width:1120px; height:630px;}
.module{/* 러닝맵 모듈 */ position:absolute; width:428px; height:44px; border:1px solid #404548; font-size:20px; color:#404548; display:table; text-align:center;}
.module.selected{border:1px solid #0000ff; color:#0000ff;}
.moduleText{display:table-cell; vertical-align:middle;}

.chap{/* 러닝맵 차시명 */ position:absolute; width:100%; height:22px;}
.chapNumTxt{/*차시번호*/ position:absolute; font-family:'NanumBarunGothic'; left:0px; top:2px; font-size:17px; color:#404548;}
.chapLine{/*구분 선*/ position:absolute; left:58px; top:0px; width:2px; height:19px; background-image:url('../../img/help/chapLine.png'); background-position:0px 0px;}
.chapTxt{/*차시명*/position:absolute; left:71px; top:2px; font-family:'NanumBarunGothic'; font-size:17px; color:#404548; letter-spacing:-0.6px;}

.chap.selected .chapNumTxt, .chap.selected .chapTxt{font-family:'NanumBarunGothicBold'; /*차시번호 강조색*/ color:#0000ff;}
.chap.selected .chapLine{background-position:0px 0px;}

/*러닝맵 화면이 두개 이상일 경우 화면 이동 버튼*/
#mapMove{position:absolute; left:630px; top:560px;}
.mapBtn a{position:absolute; left:0px; top:0px; width:30px; height:30px; background-position:0px 0px;}
.mapBtn a:hover, .mapBtn a.selected{background-position:0px -50px;}

/* 화면 안내 관련 */
#screenAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background-image:url('../../img/help/bg_00.png');}
.screenBtn a{position:absolute; display:table; color:#1f1f1f; width:29px; height:29px; font-size:22px; opacity:0.5; text-align:center; border:1px solid #1f1f1f; text-decoration:none;}
.screenBtn a:hover, .screenBtn a.selected{color:#0000ff; opacity:1; border:1px solid #0000ff;} 
.screenBtn:nth-child(1) a{left:249px; top:184px;}
.screenBtn:nth-child(2) a{left:847px; top:184px;}
.screenBtn:nth-child(3) a{left:249px; top:470px;}
.screenBtn:nth-child(4) a{left:719px; top:504px;}
.screenBtn:nth-child(5) a{left:755px; top:504px;}
.screenBtn:nth-child(6) a{left:847px; top:470px;}
.screenBtnText{display:table-cell; vertical-align:middle;}
#screenAll #screen{position:absolute; left:283px; top:184px; width:560px; height:315px; background-size:100% 100%;}

/* 강사 소개 관련 */
#teacherAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background-image:url('../../img/help/bg_00.png');}
/* 강사 소개 화면 */
.teacher{position:absolute; left:0px; top:0px; width:1120px; height:630px;}
/* 이름 탭 이동 버튼 */
#teacherName1 a, #teacherName2 a, #teacherName3 a, #teacherName4 a{position:absolute; top:90px; width:183px; height:39px;}
#teacherName1 a{left:327px; background-image:url('../../img/help/teacherName.png'); background-position:0px 0px;}
#teacherName1 a:hover, #teacherName1 a.selected{background-position:0px -50px;}
#teacherName2 a{left:514px; background-image:url('../../img/help/teacherName.png'); background-position:-200px 0px;}
#teacherName2 a:hover, #teacherName2 a.selected{background-position:-200px -50px;}
#teacherName3 a{left:700px; background-image:url('../../img/help/teacherName.png'); background-position:-400px 0px;}
#teacherName3 a:hover, #teacherName3 a.selected{background-position:-400px -50px;}
#teacherName4 a{left:887px; background-image:url('../../img/help/teacherName.png'); background-position:-600px 0px;}
#teacherName4 a:hover, #teacherName4 a.selected{background-position:-600px -50px;}
/* 백넥 버튼 */
#teacherMove{position:absolute; left:506px; top:552px;}
#teacherPrevBtn a{position:absolute; left:0px; top:0px; width:23px; height:25px; background-image:url('../../img/help/mapMove.png'); background-position:0px 0px;}
#teacherPrevBtn a:hover{background-position:0px -50px;}
#teacherNextBtn a{position:absolute; left:87px; top:0px; width:23px; height:25px; background-image:url('../../img/help/mapMove.png'); background-position:-50px 0px;}
#teacherNextBtn a:hover{background-position:-50px -50px;}
#teacherNowNum{position:absolute; left:28px; top:3px; text-align:center; font-family:'NanumBarunGothicBold'; font-size:20px; color:#00aeef;}
#teacherTotNum{position:absolute; left:69px; top:3px; text-align:center; font-family:'NanumBarunGothicBold'; font-size:20px; color:#95948a;}
#teacherNumDot{position:absolute; left:51px; top:10px; width:5px; height:6px; background-image:url('../../img/help/mapMove.png'); background-position:-100px 0px;}

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

/* 저작권 관련 */
#copyrightAll{position:absolute; left:0px; top:0px; width:1120px; height:630px; background-image:url('../../img/help/bg_01.png');}
.copyText{position:absolute; left:336px; width:730px; font-family:'NanumBarunGothic'; color:#05233d; font-size:18px; padding-left:10px; background-image:url('../../img/help/helpDot.png') 0px 9px no-repeat; line-height:24px;}

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

/**********/
/* 동영상 */
/**********/
#myVideo{width:100%; height:100%; z-index:11;}
.scroll_txt{overflow-x:hidden; overflow-y:auto;}

#videobg{position:absolute; left:0px; top:0px; width:1120px; height:630px;}

/* 북마크 */
#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'); 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:#0096ff; 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:#0096ff; background: url('../../img/ui-img/bookmarkDot_over.png') no-repeat; background-color:#252021;}