@charset "utf-8"; /* 스크롤바 스타일*/ ::-webkit-scrollbar {width:10px;} ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{display:block; width:10px; height:16px; overflow:hidden;} ::-webkit-scrollbar-button:start:decrement{background-position:0 0} ::-webkit-scrollbar-button:end:increment{background-position:0 -18px} ::-webkit-scrollbar-track{background:#a9b4ae;-webkit-border-radius:6px; border-radius:6px; -webkit-box-shadow: inset 0 0 0} ::-webkit-scrollbar-thumb{background:#838785;-webkit-border-radius:6px; border-radius:6px;} html{ scrollbar-face-color :#838785; scrollbar-highlight-color : #5c5c5c; scrollbar-3dlight-color : #FFFFFF; scrollbar-shadow-color : #5c5c5c; scrollbar-darkshadow-color :#FFFFFF; scrollbar-track-color : #a9b4ae; scrollbar-arrow-color : #838785; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } * { -webkit-text-size-adjust:none; } /* Reset */ html {overflow-y:auto; overflow-x:hidden;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,form,fieldset,p,button,input {margin:0;padding:0;} body,h1,h2,h3,h4,input,button,select,textarea {font-family:NanumGothic,Helvetica,Arial,'돋움',dotum,sans-serif;font-size:12px;line-height:1.4em;color:#444;} body {background-color:#000;word-break:break-all;} header,footer,article,div,hgroup,aside,nav,detail,figure,figcaption {display:block;} img,fieldset,iframe {border:0 none;} ol, li {list-style:none;} input,select,button {vertical-align:middle;} img {vertical-align:middle;} *:first-child+html img {vertical-align:top;} table {border-collapse:collapse;} tr td {word-wrap:break-word;} em,address {font-style:normal;} label,button {cursor:pointer; border:none;} button {margin:0;padding:0;} a {color:#666666;text-decoration:none;} a:hover,a:focus {text-decoration:none;} button * {position:relative;} input[type=text],select {border:1px solid #c0c0c0;} textarea {border:none; overflow-y:auto; resize:none;} input:focus {outline:0;} textarea:focus {outline:0;} /* font */ @font-face { font-family: 'NanumGothic'; src: url('../css/font/NanumGothic.eot'); src: url('../css/font/NanumGothic.eot?#iefix') format('embedded-opentype'), url('../css/font/NanumGothic.woff') format('woff'), url('../css/font/NanumGothic.ttf') format('truetype'), url('../css/font/NanumGothic.svg#georgiaWeb') format('svg'); } /* common style */ .d-hidden {overflow:hidden; height:0; width:0; position:absolute; text-indent:-9999px;} .clearfix:before, .clearfix:after {content:" ";display: table;} .clearfix:after {clear:both;} /* ---------------------- common layout ---------------------- */ /* object bg */ .object {position:absolute;top:0;left:0;width:1000px;height:630px;z-index:-1;} #cont01 .object{background:url(../images/bg/cont_bg1.png) 0 0 no-repeat;} #cont02 .object{background:url(../images/bg/cont_bg2.png) 0 0 no-repeat;} #cont03 .object{background:url(../images/bg/cont_bg3.png) 0 0 no-repeat;} #cont04.oxQuiz .object{background:url(../images/bg/oxquiz_bg4.png) 0 0 no-repeat;} #cont04.bookPaper .object{background:url(../images/bg/bookpaper_bg4.png) 0 0 no-repeat;} #cont04.newsPaper .object{background:url(../images/bg/newspaper_bg4.png) 0 0 no-repeat;} #cont04.myThink .object{background:url(../images/bg/mythink_bg4.png) 0 0 no-repeat;} #cont04.checked .object{background:url(../images/bg/checked_bg4.png) 0 0 no-repeat;} #cont04.click .object{background:url(../images/bg/click_bg4.png) 0 0 no-repeat;} #cont04.video .object{background:url(../images/bg/video_bg4.png) 0 0 no-repeat;} #cont04.webtoon .object{background:url(../images/bg/webtoon_bg4.png) 0 0 no-repeat;} #cont05 .object{background:url(../images/bg/cont_bg5.png) 0 0 no-repeat;} #cont05.bg_video .object{background:url(../images/bg/cont_bg11.png) 0 0 no-repeat;} #cont06 .object{background:url(../images/bg/cont_bg6.png) 0 0 no-repeat;} #cont08 .object{background:url(../images/bg/cont_bg8.png) 0 0 no-repeat;} #cont09 .object{background:url(../images/bg/cont_bg9.png) 0 0 no-repeat;} #cont10 .object{background:url(../images/bg/cont_bg10.png) 0 0 no-repeat;} #cont12 .object{background:url(../images/bg/cont_bg12.png) 0 0 no-repeat;} #teacher_interview {height:454px; background:url(../images/bg/video_bg12.png) -34px -119px no-repeat;} #teacher_interview .vodSection { position: relative; top: 4px; left: 34px; width: 780px; height: 439px; } /*공통 타이틀*/ .pageTitWrap {position:relative; right:0; top:62px; width:957px; height:54px; } h1.pageTit {position:absolute; left:28px; top:5px;} p.pTxtHead {position:absolute; right:-30px; top:13px;} /* bg */ div#pageBg {position:absolute; left:0; top:0; width:1000px; height:630px; z-index:-2;} div#pageBg img {position:absolute; left:0; top:0;} div#uiContents {width:100%; height:100%; overflow:hidden; position:absolute; top:0; left:0; text-align:center;} div#cont01,div#cont02,div#cont03,div#cont04,div#cont05,div#cont06,div#cont07,div#cont08,div#cont09,div#cont10,div#cont11,div#cont12 {position:absolute; left:0; width:100%; height:100%; text-align:left;} /* uiMenu */ #topM {margin-left:-330px; width:667px; min-height:64px; position:absolute; top:0; left:50%; z-index:10000; background:url(../images/res/menu_bg.png) 0 0 no-repeat;} div#topMBtn a {position:absolute; width:80px; height:40px; left:50%; top:0; margin-left:-40px; display:block; background:url(../images/res/btnIndexMenu.png) 0 1px no-repeat; text-indent:-2000px; cursor:pointer;} .open #topMBtn a:hover, .open #topMBtn a.on { background:url(../images/res/btnIndexMenu.png) 0 -40px no-repeat; } #topMenuBox {position:relative; top:0;} #topMenuBox ul {display:table; padding-bottom:2px;} #topMenuBox ul > li > a.depth1 {display:block; background:url(../images/res/menu.png) 0 0 no-repeat; text-indent:-9999px; overflow:hidden;} #topMenuBox ul li.mn_00, #topMenuBox ul li.mn_01, #topMenuBox ul li.mn_02 {float:left;} #topMenuBox ul li.mn_00 a.depth1 {width:137px; height:24px; background-position:0 0;} #topMenuBox ul li.mn_00 a.depth1.on {background-position:0 -177px;} #topMenuBox ul li.mn_00 a.depth1:hover {background-position:0 -177px;} #topMenuBox ul li.mn_01 a.depth1 {width:388px; height:24px; background-position:-137px 0;} #topMenuBox ul li.mn_01 a.depth1.on {background-position:-137px -177px;} #topMenuBox ul li.mn_01 a.depth1:hover {background-position:-137px -177px;} #topMenuBox ul li.mn_02 a.depth1 {width:139px; height:24px; background-position:-527px 0;} #topMenuBox ul li.mn_02 a.depth1.on {background-position:-527px -177px;} #topMenuBox ul li.mn_02 a.depth1:hover {background-position:-527px -177px;} #topMenuBox ul li ul {padding-top:6px;} #topMenuBox ul li ul.depth2 li > a {display:block; margin-bottom: 3px; background:url(../images/res/menu.png) 0 0 no-repeat; text-indent:-9999px; overflow:hidden;} #topMenuBox ul li.mn_00 ul.depth2 li > a {width:137px; height:15px;} #topMenuBox ul li.mn_01 ul.depth2 li > a {width:388px; height:15px;} #topMenuBox ul li.mn_02 ul.depth2 li > a {width:139px; height:15px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_01 a {background-position:0 -30px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_01 a.on {background-position:0 -207px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_01 a:hover {background-position:0 -207px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_02 a {background-position:0 -48px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_02 a.on {background-position:0 -225px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_02 a:hover {background-position:0 -225px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_03 a {background-position:0 -66px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_03 a.on {background-position:0 -243px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_03 a:hover {background-position:-0 -243px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_04 a {background-position:0 -84px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_04 a.on {background-position:0 -261px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_04 a:hover {background-position:0 -261px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_05 a {background-position:0 -102px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_05 a.on {background-position:0 -279px;} #topMenuBox ul li.mn_00 ul.depth2 li.sm_05 a:hover {background-position:0 -279px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_01 a {background-position:-137px -30px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_01 a.on {background-position:-137px -207px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_01 a:hover {background-position:-137px -207px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_02 a {background-position:-137px -48px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_02 a.on {background-position:-137px -225px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_02 a:hover {background-position:-137px -225px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_03 a {background-position:-137px -66px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_03 a.on {background-position:-137px -243px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_03 a:hover {background-position:-137px -243px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_04 a {background-position:-137px -84px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_04 a.on {background-position:-137px -261px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_04 a:hover {background-position:-137px -261px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_05 a {background-position:-137px -102px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_05 a.on {background-position:-137px -279px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_05 a:hover {background-position:-137px -279px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_06 a {background-position:-137px -120px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_06 a.on {background-position:-137px -297px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_06 a:hover {background-position:-137px -297px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_07 a {background-position:-137px -138px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_07 a.on {background-position:-137px -315px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_07 a:hover {background-position:-137px -315px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_08 a {background-position:-137px -156px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_08 a.on {background-position:-137px -333px;} #topMenuBox ul li.mn_01 ul.depth2 li.sm_08 a:hover {background-position:-137px -333px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_01 a {background-position:-528px -30px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_01 a.on {background-position:-528px -207px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_01 a:hover {background-position:-528px -207px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_02 a {background-position:-528px -48px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_02 a.on {background-position:-528px -225px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_02 a:hover {background-position:-528px -225px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_03 a {background-position:-528px -66px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_03 a.on {background-position:-528px -243px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_03 a:hover {background-position:-528px -243px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_04 a {background-position:-528px -84px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_04 a.on {background-position:-528px -261px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_04 a:hover {background-position:-528px -261px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_05 a {background-position:-528px -102px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_05 a.on {background-position:-528px -279px;} #topMenuBox ul li.mn_02 ul.depth2 li.sm_05 a:hover {background-position:-528px -279px;} /* uiTop */ div#uiTop {width:100%; height:70px; position:absolute; z-index:100;} div#uiTop h1 {position:absolute; right:13px; top:9px;} div#uiTop h2 {position:absolute; left:15px; top:14px;} div#uiTop p {position:absolute; right:16px; top:35px;} /* uiBottom */ div#uiBottom {position:absolute; bottom:0; width:100%; height:40px; background:url(../images/player/bg_player.png) no-repeat; z-index: 1010;} div#uiBottomLogo {position:absolute; top:5px; left:13px;} div#uiBottomLogo h2 {width:70px; height:25px; background:url(../images/player/btm_logo.png) no-repeat; text-indent:-2000px;} div#uiBottom div#quickM {position:absolute; right:154px; top:7px; z-index: 1012;} div#uiBottom div#quickM ul li {position:relative; float:left;} div#uiBottom div#quickM ul li > a {width:26px; height:26px; margin:0 3px; display:inline-block; background:url(../images/player/btn_quick.png) 0 0 no-repeat;} div#uiBottom div#quickM .bookmark a {background-position:0 0;} div#uiBottom div#quickM .speed a {background-position:-26px 0;} div#uiBottom div#quickM .toolbox a {background-position:-52px 0;} div#uiBottom div#quickM .csboard a {background-position:-78px 0;} div#uiBottom div#quickM .bookmark:hover a, div#uiBottom div#quickM .bookmark:focus a, div#uiBottom div#quickM .bookmark.on a {background-position:0 -26px;} div#uiBottom div#quickM .speed:hover a, div#uiBottom div#quickM .speed:focus a, div#uiBottom div#quickM .speed.on a {background-position:-26px -26px;} div#uiBottom div#quickM .toolbox:hover a, div#uiBottom div#quickM .toolbox:focus a, div#uiBottom div#quickM .toolbox.on a {background-position:-52px -26px;} div#uiBottom div#quickM .csboard:hover a, div#uiBottom div#quickM .csboard:focus a, div#uiBottom div#quickM .csboard.on a {background-position:-78px -26px;} div#uiBottom div#quickM .bookmark a.deactivation {background-position: 0 -52px;} div#uiBottom div#quickM .speed a.deactivation {background-position: -26px -52px;} div#uiBottom div#quickM .toolbox a.deactivation {background-position: -52px -52px;} div#uiBottom div#quickM .csboard a.deactivation {background-position: -78px -52px;} /* quickM tooltip */ div#uiBottom div#quickM ul li:hover .tooltip {position:absolute; top:-32px; opacity:1; display:block; z-index:1001;} div#uiBottom div#quickM .bookmark .tooltip {width:50px; left:-9px; } div#uiBottom div#quickM .speed .tooltip {width:40px; left:-4px; } div#uiBottom div#quickM .toolbox .tooltip {width:65px; left:-17px; } div#uiBottom div#quickM .csboard .tooltip {width:65px; left:-17px; } .tooltip { display:none; } .tooltip-arrow { position: absolute; width: 0; height: 0; bottom: -11px; left: 50%; margin-left: -5px; border-width: 13px 5px 0; border-style: solid; border-color: transparent; border-top-color: #000; } .tooltip-inner {padding:3px 8px; color:#fff; font-size:12px; text-align:center; background:#000;} /* volume tooltip */ /* div#uiBottom .jp-controls li:hover .tooltip {position:absolute; top:-32px; opacity:1; display:block; z-index:1001;} div#uiBottom .jp-controls .play .tooltip {width:40px; left:-13px; } div#uiBottom .jp-controls .pause .tooltip {width:65px; left:-13px; } div#uiBottom .jp-controls .reload .tooltip {width:65px; left:8px; } div#uiBottom .jp-controls .script .tooltip {width:65px; left:60px; } div#uiBottom .jp-controls .full .tooltip {width:65px; left:84px; } div#uiBottom .jp-volume-controls li:hover .tooltip {position:absolute; top:-32px; opacity:1; display:block; z-index:1001;} */ /* 이전, 다음페이지 tooltip */ div#uiBottom .gPaging li:hover .tooltip {position:absolute; top:-32px; opacity:1; display:block; z-index:1001;} div#uiBottom .gPaging .prev .tooltip {width:80px; position:absolute; left:-13px; } div#uiBottom .gPaging #nextPage .tooltip {width:80px; left:-50px; } div#uiBottom .gPaging .prev .tooltip {left: -28px;} div#uiBottom .gPaging .next .tooltip {right: 0;} div#uiBottom .gPaging .next .tooltip .tooltip-arrow { left: 62px; } /* 스크립트 창 */ div.scriptUI{position:absolute; left:42px; bottom:36px; width:910px; height:128px; background:url(../images/player/bgScript.png) 0 0 no-repeat; z-index:1000;} div.scriptTxt {position: absolute; top: 32px; left: 20px; width: 870px; height: 80px; overflow-y: auto; padding-right:10px; font-size: 14px; color: #fff; line-height: 20px;} div#uiBottom div.scriptUI a { display:block; position:absolute; top:10px; right:14px; width:39px; height:14px; background:url(../images/player/btnScript.png); text-indent:-1000px; } div#uiBottom div.scriptUI a.btnScriptClose { background-position:0 0;} div#uiBottom div.scriptUI a.btnScriptClose:hover, div#ui_bottom div.scriptUI a.btnScriptClose:focus { background-position:0 -14px;} /* 검색 창 */ .uiSearch {position:absolute; left:100px; top:9px; width:121px; height:24px; background:url(../images/player/search_bg.png) no-repeat;} .uiSearch .searchWord {padding:0 10px; width:80px; height:24px; background-color:transparent; border:none; color:#777; font-size:13px;} .uiSearch .btnSearch {position:absolute; right:2px; top:0; width:35px; height:24px; text-indent:-2000px; background:url(../images/player/search_bg.png) -121px 0 no-repeat;} /* uiBottom gPaging */ .gPaging {position:absolute; width:129px; text-align:center; top:7px; right:14px; font-family:Arial,Helvetica,sans-serif; font-size:17px; color:#6b6b6b; z-index: 1012; } a#prevPage, a#nextPage {display:inline-block; width:26px; height:26px; background:url(../images/player/paging.png) 0 0 no-repeat;} a#prevPage {background-position: 0 0; position:absolute; left:0;} a#nextPage {background-position: -26px 0; position:absolute; right:0; bottom:0;} a#prevPage:hover, a#prevPage:focus, a#prevPage.on {background-position: 0 -26px;} a#nextPage:hover,a#nextPage:focus, a#nextPage.on {background-position: -26px -26px;} .gPaging span {display:inline-block;} .gPaging #naviCurrent {position:absolute; top:4px; left:32px; font-size:26px; color:#7f9bff;} .gPaging #naviTotal {position:absolute; top:4px; left:70px; font-size:26px; color:#f5f5f5;} .gPaging #naviCurrent + span {width:2px; height:26px; text-indent:-9999px; background:url(../images/player/paging.png) -2px -52px no-repeat;} /* 배속 창 */ .speedTip {position:absolute; bottom:30px; right:96px; width:200px; height:39px; overflow:hidden; background:url(../images/player/quick_menu.png) 0 -174px no-repeat; z-index:1000;} .speedTip ul li {padding:3px 0; float:left;} .speedTip ul li a {text-align:center; height:18px; margin:0 4px; display:inline-block; background: url(../images/player/quick_menu.png) 0 0 no-repeat;} .speedTip ul li a.sp1 {width:37px; background-position:0 -212px;} .speedTip ul li a.sp2 {width:23px; background-position:-37px -212px;} .speedTip ul li a.sp3 {width:37px; background-position:-60px -212px;} .speedTip ul li a.sp4 {width:37px; background-position:-97px -212px;} .speedTip ul li a.sp5 {width:23px; background-position:-134px -212px;} .speedTip ul li a.sp1:hover, .speedTip ul li a.sp1.on {background-position:0 -229px;} .speedTip ul li a.sp2:hover, .speedTip ul li a.sp2.on {background-position:-37px -229px;} .speedTip ul li a.sp3:hover, .speedTip ul li a.sp3.on {background-position:-60px -229px;} .speedTip ul li a.sp4:hover, .speedTip ul li a.sp4.on {background-position:-97px -229px;} .speedTip ul li a.sp5:hover, .speedTip ul li a.sp5.on {background-position:-134px -229px;} .speedTip ul li a span {position:absolute; text-indent:-1000px;} /* 북마크 창 */ .bookmarkWrap {z-index:1002;position:absolute;bottom:32px;right:100px;width:465px;height:315px;background:url(../images/res/bookmarktip.png) no-repeat;} .bookmarkWrap .popupClose {position:absolute; width:24px; height:62px; right:4px; top:12px; background:url(../images/res/btnPopupClose.png) 0 0 no-repeat;} .bookmarkWrap .popupClose:hover, a.bookmarkWrap .popupClose:focus {background-position:0 -62px;} .bookmarkWrap h1 {text-indent:-2000px;} .bookmarkAddWrap {position:relative; width:361px; margin:51px 16px 0 38px;} .bookmarkAddWrap h2, .bookmarkAddWrap p, .bookmarkAddWrap span {display:block; position:absolute;} .bookmarkAddWrap h2 {width:110px; left:0; } .bookmarkAddWrap p {width:175px; left:115px; padding: 3px; height:29px; *height:24px; text-align: left; background:#e5e5e5; border-radius:4px;} .bookmarkAddWrap p input {padding: 2px 5px; height:23px; *height:17px;} .bookmarkAddWrap p input.timeSet {width: 60px; *width: 41px;} .bookmarkAddWrap p input.titleText {width: 105px;} .bookmarkAddWrap span {left:300px; top:1px;} .bookmarkAddWrap span a.btnBookmarkAdd {width:53px; height:26px; display:inline-block; background:url(../images/res/btn_bookmark_add.png) 0 0 no-repeat;} .bookmarkAddWrap span a.btnBookmarkAdd:hover {background:url(../images/res/btn_bookmark_add.png) 0 -26px no-repeat;} .tableWrap {width:420px; height:215px; padding:3px; overflow-y:auto; overflow-x:hidden;} table.bookmarkTable {width: 361px; margin:38px 16px 0 38px; border: 1px solid #cdcdcd;} table.bookmarkTable tbody th, table.bookmarkTable tbody td { padding: 2px 4px 2px 6px;; line-height:18px;} table.bookmarkTable tbody th {font-weight:bold; border-right:1px solid #cdcdcd; } table.bookmarkTable tbody td {text-align:right;} table.bookmarkTable tbody td.text-left {text-align:left;} table.bookmarkTable > tbody > tr.odd {background-color: #fff;} table.bookmarkTable > tbody > tr.even {background-color: #ebebeb;} a.btn_bookmark_save {width:31px; height:25px; vertical-align: middle; display:inline-block; background: url(../images/res/btn_bookmark_save.png) 0 0 no-repeat;} a.btn_bookmark_save:hover {background-position:0 -25px;} a.btn_bookmark_cancel {width:31px; height:25px; vertical-align: middle; display:inline-block; background: url(../images/res/btn_bookmark_cancel.png) 0 0 no-repeat;} a.btn_bookmark_cancel:hover {background-position:0 -25px;} a.btn_bookmark_modify {width:31px; height:25px; vertical-align: middle; display:inline-block; background: url(../images/res/btn_bookmark_modify.png) 0 0 no-repeat;} a.btn_bookmark_modify:hover {background-position:0 -25px;} a.btn_bookmark_del {width:31px; height:25px; vertical-align: middle; display:inline-block; background: url(../images/res/btn_bookmark_del.png) 0 0 no-repeat;} a.btn_bookmark_del:hover {background-position:0 -25px;} /* 부가기능 */ .toolboxTip {position:absolute; bottom:30px; right:12px; width:256px; height:70px; overflow:hidden; background:url(../images/player/quick_menu.png) 0 0 no-repeat; z-index:1011;} .toolboxTip ul li {padding:3px 0; float:left;} .toolboxTip ul li a {text-align:center; height:52px; margin:0 4px; display:inline-block; background: url(../images/player/quick_menu.png) 0 0 no-repeat;} .toolboxTip ul li a.tm1 {width:63px; background-position:0 -70px;} .toolboxTip ul li a.tm2 {width:41px; background-position:-63px -70px;} .toolboxTip ul li a.tm3 {width:62px; background-position:-104px -70px;} .toolboxTip ul li a.tm4 {width:51px; background-position:-166px -70px;} .toolboxTip ul li a.tm1:hover, .toolboxTip ul li a.tm1.on {background-position:0 -122px;} .toolboxTip ul li a.tm2:hover, .toolboxTip ul li a.tm2.on {background-position:-63px -122px;} .toolboxTip ul li a.tm3:hover, .toolboxTip ul li a.tm3.on {background-position:-104px -122px;} .toolboxTip ul li a.tm4:hover, .toolboxTip ul li a.tm4.on {background-position:-166px -122px;} .toolboxTip ul li a span {position:absolute; text-indent:-1000px;} /* 부가기능팝업 */ /* 학습도우미 */ #studyHelpPopup {width:960px; height:560px; position:fixed; left:20px; top:30px; z-index:1004; background:url(../images/popup/popup_bg.png) no-repeat;} #studyHelpPopup > h1 { padding: 13px 0 14px 14px; text-align: left;} #studyHelpPopup a.PopClose {position:absolute; width:38px; height:38px; right:28px; top:20px; background:url(../images/popup/btn_close.png) no-repeat;} #studyHelpPopup a.PopClose:hover, #studyHelpPopup a.PopClose:focus {background-position:0 -38px;} .studyHelpWrap {position: relative;} .studyTab {width:934px; height:448px; position: relative; left: 13px; top:29px; background:url(../images/popup/study_tab_bg.png) 0 0 no-repeat;} .studyTab .studyImages {position: absolute; top: 13px; text-align: center;} .studyTab .helpImages {position: relative; top: 13px; text-align: center;} .studyTab .explain {position: relative; top: 8px; text-align: center;} .guideTxt {position:absolute; top:-25px; right:54px;} a.helpTabMenu {position:absolute; display:block; width:167px; height:32px; top:-25px; background:url(../images/popup/btnHelp.png) no-repeat; text-indent:-2000px;} a#helpTab01 {left:70px;background-position:0 0;} a#helpTab02 {left:240px;background-position:-170px 0;} a#helpTab03 {left:410px;background-position:-340px 0;} a#helpTab01:hover, a#helpTab01.on {background-position:0 -33px;} a#helpTab02:hover, a#helpTab02.on {background-position:-170px -33px;} a#helpTab03:hover, a#helpTab03.on {background-position:-340px -33px;} /* 학습단계 */ a.listTabMenu {position:absolute; display:block; width:65px; height:142px; left:3px; background:url(../images/popup/tabHelp.png) no-repeat; text-indent:-2000px;} a#listTab01 {top:7px; background-position:0 -3px;} a#listTab02 {top:150px; background-position:0 -145px;} a#listTab03 {top:296px; background-position:0 -289px;} a#listTab01.listTabOn {background-position:-65px -3px; top:7px;} a#listTab02.listTabOn {background-position:-65px -145px;} a#listTab03.listTabOn {background-position:-65px -289px;} a#listTab01:hover {background-position:-65px -3px;} a#listTab02:hover {background-position:-65px -145px;} a#listTab03:hover {background-position:-65px -289px;} div.listTabDisplayBg {position:absolute; top:5px; left:76px;} div.listTabDisplayImg {position:absolute; width:851px; height:422px; overflow:hidden; left:-8px; top:5px;} .listTabDisplayBox {position:absolute; left:0; top:0; } /* 화면구성 */ ol.helpExplain li a {display:block;overflow:hidden;position:absolute;background:url(../images/popup/explainList.png) 0 0 no-repeat; text-indent:-9999px} ol.helpExplain li a.ex01 {top:-2px;right:78px; width:290px;height:122px; background-position:0 0;} ol.helpExplain li a.ex02 {top:2px;left:46px; width:340px;height:109px; background-position:0 -242px;} ol.helpExplain li a.ex03 {top:-2px;left:345px; width:235px;height:127px; background-position:0 -460px;} ol.helpExplain li a.ex04 {top:62px;left:80px; width:630px;height:318px; background-position:0 -714px;} ol.helpExplain li a.ex05 {top:62px;right:1px; width:228px;height:318px; background-position:0 -1350px;} ol.helpExplain li a.ex06 {top:312px;left:22px; width:258px;height:117px; background-position:0 -1986px;} ol.helpExplain li a.ex07 {top:266px;left:278px; width:412px;height:160px; background-position:0 -2220px;} ol.helpExplain li a.ex08 {top:266px;right:213px; width:299px;height:160px; background-position:0 -2540px;} ol.helpExplain li a.ex09 {top:286px;right:18px; width:264px;height:143px; background-position:0 -2860px;} ol.helpExplain li a.ex01:hover,ol.helpExplain li a.ex01:focus {background-position:0 -120px;} ol.helpExplain li a.ex02:hover,ol.helpExplain li a.ex02:focus {background-position:0 -351px;} ol.helpExplain li a.ex03:hover,ol.helpExplain li a.ex03:focus {background-position:0 -587px;} ol.helpExplain li a.ex04:hover,ol.helpExplain li a.ex04:focus {background-position:0 -1032px;} ol.helpExplain li a.ex05:hover,ol.helpExplain li a.ex05:focus {background-position:0 -1668px;} ol.helpExplain li a.ex06:hover,ol.helpExplain li a.ex06:focus {background-position:0 -2102px;} ol.helpExplain li a.ex07:hover,ol.helpExplain li a.ex07:focus {background-position:0 -2380px;} ol.helpExplain li a.ex08:hover,ol.helpExplain li a.ex08:focus {background-position:0 -2700px;} ol.helpExplain li a.ex09:hover,ol.helpExplain li a.ex09:focus {background-position:0 -3003px;} /* 러닝맵 */ #learningMapPopup {width:960px; height:560px; position:fixed; left:20px; top:30px; z-index:1004; background:url(../images/popup/popup_bg.png) no-repeat;} #learningMapPopup > h1 { padding: 13px 0 14px 14px; text-align: left;} #learningMapPopup a.PopClose {position:absolute; width:38px; height:38px; right:28px; top:20px; background:url(../images/popup/btn_close.png) no-repeat;} #learningMapPopup a.PopClose:hover, #learningMapPopup a.PopClose:focus {background-position:0 -38px;} .learningMapWrap {width:920px; height:464px; margin: 0 0 0 20px; background:url(../images/popup/learning_table_bg.png) no-repeat;} .learningTableWrap .table {padding:3px; width:440px;} .learningTableWrap .table.pull-left {float:left;} .learningTableWrap .table.pull-right {float:right;} .learningTableWrap .table thead tr {background:url(../images/popup/thead_green_bg.png) 0 0 repeat-x;} .learningTableWrap .table thead tr th {height: 34px; color: #fff; font-size: 19px; text-align: center;} .learningTableWrap .table tbody tr th {font-size:18px; border-bottom-color: #b1b1b1; color: #333;} .learningTableWrap .table tbody th, .learningTableWrap .table tbody td { padding: 4px 16px; border: 1px solid #dfdfdf; line-height: 18px; letter-spacing: -0.05px; font-size: 15px; font-weight: bold; color: #555; } .learningTableWrap .table tbody td.text-center {text-align:center;} .learningTableWrap .table tbody tr.trBg {height:45px; background:url(../images/popup/tr_bg.png) 0 0 repeat-x;} .learningTableWrap .table tbody tr.trBg td {text-align: center;} .learningTableWrap .table tbody tr.trBg th {border-right:1px solid #fff;} .learningTableWrap .table tbody tr.line td {border-bottom-color: #b1b1b1;} .learningTableWrap tr.on{ background-color:#F3A806 !important } .learningTableWrap th.on{ background-color:#F3A806 !important } /* 키보드제어 */ #keyBoardPopup {width:960px; height:560px; position:fixed; left:20px; top:30px; z-index:1004; background:url(../images/popup/popup_bg.png) no-repeat;} #keyBoardPopup > h1 { padding: 13px 0 14px 14px; text-align: left;} #keyBoardPopup a.PopClose {position:absolute; width:38px; height:38px; right:28px; top:20px; background:url(../images/popup/btn_close.png) no-repeat;} #keyBoardPopup a.PopClose:hover, #keyBoardPopup a.PopClose:focus {background-position:0 -38px;} .keyboardWrap {text-align:center;} /* 참고문헌 */ #referencePopup {width:960px; height:560px; position:fixed; left:20px; top:30px; z-index:1004; background:url(../images/popup/popup_bg.png) no-repeat;} #referencePopup > h1 { padding: 13px 0 14px 14px; text-align: left;} #referencePopup a.PopClose {position:absolute; width:38px; height:38px; right:28px; top:20px; background:url(../images/popup/btn_close.png) no-repeat;} #referencePopup a.PopClose:hover, #referencePopup a.PopClose:focus {background-position:0 -38px;} .referenceWrap {width:908px; height:375px; padding:15px; margin: 42px 0 0 35px; background:url(../images/popup/reference_bg.png) no-repeat;} .referenceWrap .table {padding: 0 16px 13px 0; height: 356px; overflow-x: hidden; overflow-y: auto;} .referenceWrap .table thead tr {background:url(../images/popup/thead_blue_bg.png) 0 0 repeat-x;} .referenceWrap .table thead tr th {height: 34px; color: #fff; font-size: 19px;} .referenceWrap .table tbody tr th {font-size:18px; border-bottom-color: #b1b1b1; color: #333;} .referenceWrap .table tbody th, .referenceWrap .table tbody td { padding: 7px 14px; border: 1px solid #dfdfdf; line-height: 18px; letter-spacing: -0.05px; font-size: 15px; font-weight: bold; color: #555; } .referenceWrap .table tbody td.text-center {text-align:center;} .referenceWrap .table tbody tr.line td {border-bottom-color: #b1b1b1;} .referenceWrap .table tbody tr td[rowspan] {border-bottom-color: #b1b1b1;} .referenceWrap .table .book {margin-bottom:10px;} .referenceWrap .table .book:after {content:" "; display:table; clear:both;} .referenceWrap .table .book span {float:left; margin-right: 5px; display:inline-block;} .referenceWrap .table .book p {margin-top: 2px; float: left;} /* 다음 페이지 말풍선 */ #pageNextBubble {display:block; overflow:hidden; position:absolute; bottom:30px; right:10px; width:87px; height:102px; z-index:1010; background:url(../images/res/bubblePop.png) 0 0 no-repeat; text-indent:-1000px;} /* 마지막 페이지 말풍선 */ #pageNextBubble.lastpage {display:block; overflow:hidden; position:absolute; bottom:30px; right:10px; width:87px; height:102px; z-index:1010; background:url(../images/res/bubble_lastPop.png) 0 0 no-repeat; text-indent:-1000px;} /* ---------------------- layout ---------------------- */ /* 00 인트로 */ div#wrapContents {position:relative; width:1000px; height:630px; overflow:hidden;} div#cont00 h1 {position:absolute; top:77px; left: 68px;} div#cont00 h2 {position:absolute; top:177px; left: 58px;} .startBtn {display:block; position:relative; top:232px; left:395px; width:116px; height:120px; background:url(../images/res/btn_start.png) 0 0 no-repeat; text-indent:-9999px;} .startBtn:hover,.startBtn:focus {background-position:0 -121px;} /* cont03 학습내용 및 학습목표 */ #studyGoalBox {position:relative; z-index:1;} #studyGoalBox h2 {height:0; overflow:hidden; text-indent:-1000px; position:absolute;} #studyGoalBox ul li {position:relative; margin-bottom:11px; padding-left:15px; font-size:17px; letter-spacing: -0.025em; font-weight: bold; line-height:20px;} #studyGoalBox ul li span.bu {display: block; position: absolute; top: 5px; left: 0; width:10px; height:10px; background:url(../images/res/bu.png) 0 0 no-repeat;} #studyGoalBox .studyGoal ul li span.bu {background-position:0 0;} #studyGoalBox .studyVal ul li span.bu {background-position:-10px 0;} div.studyGoal {width: 690px; height: 125px; position: absolute; top: 90px; left: 93px; overflow-x: hidden; overflow-y: auto;} div.studyVal {width: 690px; height: 125px; position: absolute; top:272px; left: 93px; overflow-x: hidden; overflow-y: auto; } .nextKeyword { position:relative; width: 647px; height: 65px; left: 60px; top: 422px; } .nextKeyword h3 { text-indent:-2000px;} .studyKeyword { width:810px; padding: 22px 0 0 110px; font-size:18px; font-weight:bold; } .studyKeyword span.click { display: inline-block; position: relative; padding: 18px 12px; margin: 0 4px; min-width: 100px; font-size: 18px; background: rgb(204, 142, 87); font-weight: bold; color: #000; text-align: center; border: 1px solid #000;border-radius: 10px;} .studyKeyword span.click a { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #d9d9d9 url(../images/res/btn_click.png) 20px 10px no-repeat; border-radius: 10px;} .studyKeyword span.click a:hover, .studyKeyword span.click a:focus{background-position: 20px -33px;} /* cont04 생각해보기 */ #thinkWrap { position:relative;} .thinkSubject { position: absolute; top: 90px; left: 122px; width: 800px; font-size: 23px; font-weight: bold; line-height: 24px; letter-spacing: -1.8px; } textarea#myThinkWrite { position: absolute; top: 166px; left: 58px; padding: 3px 20px 0; width: 870px; height: 315px; z-index: 10; background: none; font-weight: bold; font-size: 17px; line-height: 39px; color: #6b6b6b; } .thinkBtnWrap { position: relative; top: 492px; text-align: center; } .thinkBtnWrap a { display: inline-block; } .saveBtn { width:105px; height:32px; background:url(../images/res/btn_think.png) 0 0 no-repeat; text-indent:-5000px;} .saveBtn:hover, .saveBtn:focus {background:url(../images/res/btn_think.png) 0 -32px no-repeat;} /* .exampleView { width:195px; height:32px; background:url(../images/res/btn_think.png) -105px 0 no-repeat; text-indent:-5000px;} .exampleView:hover, .exampleView:focus {background:url(../images/res/btn_think.png) -105px -32px no-repeat;} .colleagueView { width:164px; height:32px; background:url(../images/res/btn_think.png) -300px 0 no-repeat; text-indent:-5000px;} .colleagueView:hover, .colleagueView:focus {background:url(../images/res/btn_think.png) -300px -32px no-repeat;} */ .colleagueView { width:195px; height:32px; background:url(../images/res/btn_think.png) -105px 0 no-repeat; text-indent:-5000px;} .colleagueView:hover, .colleagueView:focus {background:url(../images/res/btn_think.png) -105px -32px no-repeat;} .exampleView { width:164px; height:32px; background:url(../images/res/btn_think.png) -300px 0 no-repeat; text-indent:-5000px;} .exampleView:hover, .exampleView:focus {background:url(../images/res/btn_think.png) -300px -32px no-repeat;} .alert {display:none; overflow:hidden; position:absolute; z-index:100; background:url(../images/res/alert.png) no-repeat; text-indent:-2000px;} #alertThink { width:298px; height:298px; position:absolute; top:172px; left:351px; background-position:0 0;} /* 생각해보기 전문가 답변 팝업 */ #answerPopup {position:fixed;width:934px;height:527px;left:32px;top:63px;z-index:1004;background:url(../images/popup/popup_answer_bg.png) no-repeat;} #answerPopup > h1 {padding: 8px 0 12px; text-align: center;} #answerPopup a.PopClose {position:absolute; width:38px; height:38px; right:15px; top:7px; background:url(../images/popup/btn_close.png) no-repeat;} #answerPopup a.PopClose:hover, #answerPopup a.PopClose:focus {background-position:0 -38px;} .answerWrap { padding: 0 34px 0 60px; margin: 32px 20px 0 0; height: 419px; overflow-x: hidden; overflow-y: auto; } .answerWrap p { font-size: 18px; font-weight: bold; line-height: 26px; letter-spacing: -1px; } /* cont04 체크하기 */ #checkedWrap { position:relative; } #checkedWrap h2 { margin: 64px auto 0; text-align: center; } .resultWrap { position: relative; top: 30px; margin: 0 auto; width:350px; text-align: center; } .checkedSection { position: relative; top: 13px; left: 60px; } .customCheckbox { position: relative; left: 55%; margin-left: -25px; *margin-left: -80px; width: 50px; text-align: center; overflow: hidden; } .customCheckbox input.formInput { position: absolute; top: 0; left: 0; opacity: 0; width: 50px; height: 32px; cursor: pointer; z-index: 5; } .customCheckbox i {float:left; display:block; width:50px; height:32px; background:url(../images/res/checkedbox.png)no-repeat left top; z-index:3;} .customCheckbox label {display: none; } .customCheckbox input.formInput:checked+i {background-position:left bottom;} .customCheckbox input.formInput:checked+i+label {display: none;} .checkedTableWrap { position: relative; width: 884px; height: 325px; overflow-y: auto; overflow-x: hidden; } .checkedTableWrap table {width:835px; margin: 10px 0 0 25px;} .checkedTableWrap table thead { border: 1px solid #2e657f; *border: 1px solid #2e657f; } .checkedTableWrap table thead tr {background: url(../images/res/thead_check_bg.png) no-repeat 0 0;} .checkedTableWrap table thead th { padding:4px; height: 68px; text-align: center; background:url(../images/res/th_line.png) no-repeat left center; *background:#52a1c8 url(../images/res/th_line.png) no-repeat left center; } .checkedTableWrap table thead th.line-none { background-image: none; } .checkedTableWrap table tbody { border:1px solid #b2b2b2; } .checkedTableWrap table td { padding:4px; line-height:18px; font-size: 15px; font-weight: bold; letter-spacing: -0.7px; text-align:center; background: #eee; border-bottom:1px solid #b2b2b2; } .checkedTableWrap table td + td { background:#eee url(../images/res/td_line.png) no-repeat left center;} .checkedTableWrap table tbody td.text-left { padding:4px 10px; text-align:left;} .totalResult { width: 230px; height: 38px; float: left; display: inline-block; text-align: center; margin-right: 10px; background: url(../images/res/result_bg.png) no-repeat 0 0; } .totalResult strong { margin-left: 100px; padding-right: 10px; width: 130px; line-height: 38px; display: inline-block; *display: inline-block; zoom:1; font-size: 28px; color: #c54600; text-align: center; } .resultBtn { width: 105px; height: 32px; vertical-align: sub; display: inline-block; background: url(../images/res/btn_checked_result.png) 0 0 no-repeat; } .resultBtn span { text-indent: -5000px; display: inline-block; } .resultBtn:hover, .resultBtn:focus {background:url(../images/res/btn_checked_result.png) 0 -32px no-repeat;} /* 체크 결과 확인 팝업 */ #checkedQuizPop { position: fixed; left: 288px; top: 120px; width: 410px; height: 420px; z-index: 1004; } #checkedQuizPop p { text-indent: -0.08em; } #checkedQuizPop p.score { position: absolute; right: 48%; top: 156px; color: #ffff00; text-align: right; font-size: 36px; text-shadow: 2px 3px 4px #292929; } #checkedQuizPop p.cont { position: absolute; top: 210px; width: 410px; padding: 0 35px; line-height: 26px; color: #fff; font-size: 20px; text-align: center; text-shadow: 1px 1px 1px #444; } .btnCheckedClose {position:absolute; top:358px; left:165px; width:70px; height:27px; background:url(../images/res/btn.png) -378px -109px no-repeat; text-indent:-5000px;} .btnCheckedClose:hover, .btnCheckedClose:focus {background:url(../images/res/btn.png) -378px -136px no-repeat;} /*cont04 사전퀴즈*/ div#prevQuizWrap {position:relative; top:55px; left:39px;} div#prevQuizWrap div.question {width: 882px; height: 82px; position: relative; left: 20px; overflow-x: hidden; overflow-y: auto; top: 5px;} div#prevQuizWrap span {display:block; position:absolute;} #prevQuizTxt {height: 82px; padding-right: 10px; padding-left: 100px; font-size: 24px; display: table-cell; vertical-align: middle; font-weight: bold; line-height: 35px; letter-spacing: -0.025em;} #prevNumBG {position: absolute; left: 0; top: 0; z-index: 1;} #prevNumBG span {position:absolute; display:block; z-index:2; background:url(../images/res/numOX.png) no-repeat;} #prevNumBG span.o {width:86px; height:81px; background-position:0 0;} #prevNumBG span.x {width:86px; height:81px; background-position:-86px 0;} #prevNumBG p { position:absolute; left:0; top:0; width:86px; height:81px; background:url(../images/res/prveQuizNum.png) no-repeat; text-indent:-2000px;} #prevNumBG p.num { background-position:0 0; } #prevQuizWrap #quizEx0 { margin-right:105px; } #prevQuizWrap #quizEx0, #prevQuizWrap #quizEx1 {position:relative; left:260px; top:45px; width:140px; height:140px; display:inline-block; zoom:1; float:left;} #prevQuizWrap #quizEx0 a {position:relative; display:block; height:100%; background:url(../images/res/prevOX.png) 0 0 no-repeat; text-indent:-1000px;} #prevQuizWrap #quizEx1 a {position:relative; display:block; height:100%; background:url(../images/res/prevOX.png) -140px 0 no-repeat; text-indent:-1000px;} #prevQuizWrap #quizEx0 a:hover, #prevQuizWrap #quizEx0 a.on {background-position: 0 -140px;} #prevQuizWrap #quizEx1 a:hover, #prevQuizWrap #quizEx1 a.on {background-position: -140px -140px;} #prevQuizWrap #quizEx0 span, #prevQuizWrap #quizEx1 span {position:absolute; left:45px; top:-20px; display:block; width:73px; height:60px; background:url(../images/res/movQuizCheck.png) no-repeat;} #prevQuizWrap #prevExplainWrap {position:relative; top:206px;left:15px; width:882px; height: 171px; background:url(../images/res/explain_box.png) no-repeat; } #prevQuizWrap #prevExplainWrap:after {content:" "; display:table; clear:both;} #prevQuizWrap #prevCorrect {position:absolute; left:25px; top:14px;} #prevQuizWrap #prevExplain {position:absolute; left:25px; top:77px;} #prevQuizWrap #prevCorrect span, #prevExplain span {display:block; width:91px; height:44px; text-indent:-1000px;} #prevQuizWrap #prevCorrect span {background:url(../images/res/quizExplainTxt.png) 0 0 no-repeat;} #prevQuizWrap #prevExplain span {top:9px; background:url(../images/res/quizExplainTxt.png) 0 -44px no-repeat;} #prevQuizWrap #prevCorrect p {position:absolute; top:0; left:105px; width: 100px; line-height:1.3em; font-weight:bold; color:#ee5a5a; font-size:34px;} #prevQuizWrap #prevExplain p {position:absolute; top: 8px; left: 105px; width: 715px; height: 80px; overflow-x: hidden; overflow-y: auto; font-size: 20px; font-weight: bold; line-height: 26px; padding-right: 12px;} /* cont04 도서퀴즈 */ #bookQuizWrap { position: relative; top: 81px; left: 100px; width: 715px; } #bookQuizWrap h2 { text-align: center; } #bookQuizWrap .bookSection { margin: 16px 2px 0; padding: 15px 20px; height: 292px; overflow-x: hidden; overflow-y: auto; background: rgba(255, 255, 255, 0.2); border: 1px dashed #bebebe; } #bookQuizWrap p.sourceBottom { margin-top: 10px; padding: 4px 9px; text-align: right; color: #576364; font-size: 14px; font-weight: bold; letter-spacing: -0.7px; background:url(../images/res/book_btm_bg.png) 0 0 repeat-x; } .bookSection p { margin-bottom:20px; font-size: 16px; font-weight: bold; color: #565656; letter-spacing: -0.7px; line-height: 22px; } .detailView { position: absolute; top: 410px; right: -123px; width: 94px; height: 31px; background:url(../images/res/detailview_btn.png) 0 0 no-repeat; text-indent:-5000px;} .detailView:hover, .detailView:focus {background:url(../images/res/detailview_btn.png) 0 -31px no-repeat;} /* cont04 클릭퀴즈 */ #clickQuizWrap { position: relative; top:110px; left: 115px; width: 780px; } .clickSection { height:310px; padding: 20px; overflow-x: hidden; overflow-y: auto; } .clickSection li { position:relative; display:block; float:left; padding:12px 22px; margin-bottom:38px; line-height:28px; letter-spacing:-0.5px; font-size:20px; font-weight:bold; background: rgba(78, 113, 243, 0.2); border: 1px dashed #5185cc;} .clickSection li span.icon { width:51px; height:30px; display:block; position:absolute; top:-20px; left:-20px; background:url(../images/res/icon_click.png) 0 0 no-repeat; } .clickSection li span.click {display:inline-block; position:relative; min-width:60px; height:25px; font-weight:bold; color:#cf02ff; text-align:center; text-indent:0;} .clickSection li span.click a {display:block; width:100%; height:100%; position:absolute; top:0; left:0; margin:1px 0; background:#829cfc url(../images/res/btn_quiz_click.png) no-repeat 50% 50%; border-radius:7px;} /* 도서 전문 보기 팝업 */ #bookPopup {position:fixed;width:934px;height:527px;left:32px;top:63px;z-index:1004;background:url(../images/popup/popup_book_bg.png) no-repeat;} #bookPopup > h1 {padding: 8px 0 12px; text-align: center;} #bookPopup a.PopClose {position:absolute; width:38px; height:38px; right:15px; top:7px; background:url(../images/popup/btn_close.png) no-repeat;} #bookPopup a.PopClose:hover, #bookPopup a.PopClose:focus {background-position:0 -38px;} .bookWrap { padding: 0 34px 0 60px; margin: 18px 20px 0 0; } .bookWrap h2 { height: 37px; margin-bottom: 18px; font-size: 20px; letter-spacing:-0.7px; text-align: center; font-weight: bold; color: #333; } .bookWrap p { margin-bottom: 15px; font-size: 17px; font-weight: bold; line-height: 26px; letter-spacing: -1px; } .bookWrap ul {height: 385px; overflow-x: hidden; overflow-y: auto;} .bookWrap ul li {position:relative; margin-bottom:10px; padding-left:28px; font-size:17px; letter-spacing: -0.025em; font-weight: bold; line-height:20px;} .bookWrap ul li span.num {display: block; position: absolute; top: 0; left: 0; width:22px; height:22px; line-height: 22px; font-size: 11px; color: #fff; text-align:center; background: #1494d6; border-radius: 50%;} /* cont04 신문퀴즈 (출처가 제목 아래) */ #newspaperQuizWrap { position: relative; top: 85px; width: 855px; margin: 0 auto; } #newspaperQuizWrap h2 { text-align: center; } #newspaperQuizWrap .sourceTop { margin: 20px 0 30px 0; padding-bottom: 5px; text-align: right; font-size: 14px; font-weight: bold; color: #858484; border-bottom: 1px solid #bbc1d1; } #newspaperQuizWrap .newSection { margin: 0 20px; height: 264px; overflow-x: hidden; overflow-y: auto; } #newspaperQuizWrap .newSection h3 { margin-bottom:20px; font-size: 21px; font-weight: bold; color: #4e60a8; letter-spacing: -0.7px; } #newspaperQuizWrap .newSection p { margin-bottom:20px; font-size: 17px; font-weight: bold; color: #565656; letter-spacing: -0.7px; line-height: 22px; } #newspaperQuizWrap .newSection p.sourceBottom {text-align: right;} #newspaperQuizWrap .allView {position:absolute; top:400px; right:18px; width:143px; height:40px; background:url(../images/res/allview_btn.png) 0 0 no-repeat; text-indent:-5000px;} #newspaperQuizWrap .allView:hover, #newspaperQuizWrap .allView:focus {background:url(../images/res/allview_btn.png) 0 -40px no-repeat;} /* cont04 신문퀴즈 (출처가 제목 위에) */ #newspaperQuizWrap_T { position: relative; top: 70px; width: 870px; margin: 0 auto; } #newspaperQuizWrap_T h2 { margin-top: 13px; text-align: center; } #newspaperQuizWrap_T .sourceTop {padding-bottom: 5px; text-align: right; font-size: 14px; font-weight: bold; color: #848484; } #newspaperQuizWrap_T .newSection { margin: 20px 0px 0; height: 264px; overflow-x: hidden; overflow-y: auto; } #newspaperQuizWrap_T .newSection h3 { margin-bottom:20px; font-size: 21px; font-weight: bold; color: #986000; letter-spacing: -0.7px; } #newspaperQuizWrap_T .newSection p { margin-bottom:20px; font-size: 17px; font-weight: bold; color: #565656; letter-spacing: -0.7px; line-height: 22px; } #newspaperQuizWrap_T .newSection p.sourceBottom {text-align: right;} #newspaperQuizWrap_T .allView {position:absolute; top:390px; left:0px; width:198px; height:43px; background:url(../images/res/allview_btn.png) 0 0 no-repeat; text-indent:-5000px;} #newspaperQuizWrap_T .allView:hover, #newspaperQuizWrap_T .allView:focus {background:url(../images/res/allview_btn.png) 0 -43px no-repeat;} #guideDeskWrap { position: relative; top: 94px; left: 80px; } a.guideTabMenu {position:absolute;display:block;width:167px;height:32px;top:-25px;background:url(../images/popup/btnHelp.png) no-repeat;text-indent:-2000px;} a#guideTab01 {left:0;background-position:-507px 0;} a#guideTab02 {left:170px;background-position:-674px 0;} a#guideTab03 {left:340px;background-position:0 0;} a#guideTab04 {left:510px;background-position:-170px 0;} a#guideTab05 {left:680px;background-position:-340px 0;} a#guideTab01:hover, a#guideTab01.on {background-position:-507px -33px;} a#guideTab02:hover, a#guideTab02.on {background-position:-674px -33px;} a#guideTab03:hover, a#guideTab03.on {background-position:0 -33px;} a#guideTab04:hover, a#guideTab04.on {background-position:-170px -33px;} a#guideTab05:hover, a#guideTab05.on {background-position:-340px -33px;} .guideTabCont01 {position: absolute; top: 16px; left: -59px;} .guideTabCont02 {position: absolute; top: 21px; left: -46px; width: 932px; height: 448px; background:url(../images/popup/tab_cont_02.png) no-repeat;} .guideTabCont02 > .professorWrap {margin: 0 24px;} .guideTabCont02 > .professorWrap .yellowBox { min-height: 90px; height: 90px; margin: 5px 205px 11px 34px; } .guideTabCont03 {position: absolute; top: 13px; left: -46px; width: 931px; height: 458px; background:url(../images/popup/tab_cont_03.png) no-repeat;} .guideTabCont03 > .studyImages {position: absolute; top: 27px;} .guideTabCont04 {position: absolute; top: 13px; left: -46px; width: 932px; height: 458px; background:url(../images/popup/tab_cont_04.png) no-repeat;} .guideTabCont04 > .helpImages {width: 935px; position: absolute; top: 27px;} /*.guideTabCont04 > .helpImages > img {margin-left:112px;}*/ #tab_data_screenLayout img {margin-left:112px;} .guideTabCont05 {position: absolute; top: 21px; left: -46px; width: 932px; height: 448px; background:url(../images/popup/tab_cont_05.png) no-repeat;} .guideTabCont05 .explain {position: absolute; top: 8px; left: 105px;} .teacherGuideBtn, .videoGuideBtn {display:block; position:absolute; top:0; right:0; width:125px; height:105px; background:url(../images/popup/guide_btn.png) 0 1px no-repeat; text-indent:-9999px;} .teacherGuideBtn { background:url(../images/popup/guide_btn.png) 0 1px no-repeat;} .teacherGuideBtn:hover,.teacherGuideBtn:focus {background-position:0 -104px;} .videoGuideBtn { background:url(../images/popup/guide_btn.png) 0 -209px no-repeat;} .videoGuideBtn:hover,.videoGuideBtn:focus {background-position:0 -315px;} /* cont04 동영상퀴즈 */ .movSection { position: absolute; top: 127px; left: 113px; width: 774px; height: 436px; } /* cont04 웹툰퀴즈 */ #webtoonSlideWrap { width: 100%; height: 100%; position: absolute; top: 0; } #webtoonSlideWrap #slideWrap { position: absolute; top: 127px; left: 112px; width: 774px; height: 406px; margin: auto; } #webtoonSlideWrap #slideShow { position: relative; top: 0; left: 0; width: 774px; height: 406px; overflow: hidden; } #webtoonSlideWrap #slideShow .tab { float: left; display: block; position: relative; width: 774px; height: 406px; } #webtoonSlideWrap #slideShow #slideImages { position: absolute; left: 0; width: 7740px; height: 406px; } .summaryTab .btnPrev, .summaryTab .btnNext { position: absolute; top: 150px; display: block; width: 60px; height: 92px; cursor: pointer; background: url(../images/res/tabimg.png) 0 0 no-repeat; } .summaryTab .btnPrev { left: -100px; } .summaryTab .btnPrev:hover { background-position: 0 -92px; } .summaryTab .btnNext { right: -100px; background-position: -60px 0; } .summaryTab .btnNext:hover { background-position: -60px -92px; } #webtoonSlideWrap .paginationWrap {display:table; position:relative; top:7px; margin:0 auto; height:50px;} #webtoonSlideWrap .pagination { margin:0 auto; text-align:center; } #webtoonSlideWrap .paginationWrap span {display:inline-block; float:left; width:31px; height:48px; background:url(../images/res/webtoon_pagination_num.png) 0 0 no-repeat; text-indent:-2000px; line-height:88px;} #webtoonSlideWrap .paginationWrap span.sm_prev {background-position:0 0; width:41px;} #webtoonSlideWrap .paginationWrap span.sm_prev:hover, .paginationWrap span.sm_prev.on {background-position:0 -48px;} #webtoonSlideWrap .paginationWrap span.sm_next {background-position:-351px 0; width:41px;} #webtoonSlideWrap .paginationWrap span.sm_next:hover, .paginationWrap span.sm_next:hover {background-position:-351px -48px;} #webtoonSlideWrap .paginationWrap span.line {width:2px; background-position:-392px 0;} #webtoonSlideWrap .paginationWrap span.p01 {background-position:-41px 0;} #webtoonSlideWrap .paginationWrap span.p01:hover, .paginationWrap span.p01.on {background-position:-41px -48px;} #webtoonSlideWrap .paginationWrap span.p02 {background-position:-72px 0;} #webtoonSlideWrap .paginationWrap span.p02:hover, .paginationWrap span.p02.on {background-position:-72px -48px;} #webtoonSlideWrap .paginationWrap span.p03 {background-position:-103px 0;} #webtoonSlideWrap .paginationWrap span.p03:hover, .paginationWrap span.p03.on {background-position:-103px -48px;} #webtoonSlideWrap .paginationWrap span.p04 {background-position:-134px 0;} #webtoonSlideWrap .paginationWrap span.p04:hover, .paginationWrap span.p04.on {background-position:-134px -48px;} #webtoonSlideWrap .paginationWrap span.p05 {background-position:-165px 0;} #webtoonSlideWrap .paginationWrap span.p05:hover, .paginationWrap span.p05.on {background-position:-165px -48px;} #webtoonSlideWrap .paginationWrap span.p06 {background-position:-196px 0;} #webtoonSlideWrap .paginationWrap span.p06:hover, .paginationWrap span.p06.on {background-position:-196px -48px;} #webtoonSlideWrap .paginationWrap span.p07 {background-position:-227px 0;} #webtoonSlideWrap .paginationWrap span.p07:hover, .paginationWrap span.p07.on {background-position:-227px -48px;} #webtoonSlideWrap .paginationWrap span.p08 {background-position:-258px 0;} #webtoonSlideWrap .paginationWrap span.p08:hover, .paginationWrap span.p08.on {background-position:-258px -48px;} #webtoonSlideWrap .paginationWrap span.p09 {background-position:-289px 0;} #webtoonSlideWrap .paginationWrap span.p09:hover, .paginationWrap span.p09.on {background-position:-289px -48px;} #webtoonSlideWrap .paginationWrap span.p10 {background-position:-320px 0;} #webtoonSlideWrap .paginationWrap span.p10:hover, .paginationWrap span.p10.on {background-position:-320px -48px;} /* 05 학습하기 */ /* 동영상강의 팝업 */ #studyMovWrap1 {position:absolute; left:25px; top:115px; z-index:1000;} #movQuickList {position:absolute; top:105px; right:11px; width:156px; height:480px; overflow:hidden; background:url(../images/res/mov_list_bg.png) 0 0 no-repeat;} #movQuickList > ul {width:136px; margin:50px 0 0 22px;} ol.movList {margin:40px 6px 0 6px;} ol.movList li:after {content:" "; display:table; clear:both;} ol.movList li a {display:inline-block; padding: 4px 2px 4px 7px;} ol.movList li a:hover {background:#d5e9e5;} ol.movList li a span.num {float:left; display:inline-block; position:relative; top:0; left:0; width:21px; height:21px; margin:0 3px 0 0; background: url(../images/res/mov_num.png) 0 0 no-repeat;} ol.movList li a span.list {width:110px; float:left;} ol.movList li.num01 a span.num {background-position:0 0;} ol.movList li.num02 a span.num {background-position:0 -21px;} ol.movList li.num03 a span.num {background-position:0 -42px;} ol.movList li.num04 a span.num {background-position:0 -63px;} ol.movList li.num05 a span.num {background-position:0 -84px;} ol.movList li.num06 a span.num {background-position:0 -105px;} ol.movList li.num07 a span.num {background-position:0 -126px;} ol.movList li.num08 a span.num {background-position:0 -147px;} ol.movList li.num09 a span.num {background-position:0 -168px;} ol.movList li.num10 a span.num {background-position:0 -189px;} ol.movList li.num11 a span.num {background-position:0 -210px;} ol.movList li.num12 a span.num {background-position:0 -231px;} ol.movList li.num01 a span.num:hover, ol.movList li.num01.on span.num {background-position:-21px 0;} ol.movList li.num02 a span.num:hover, ol.movList li.num02.on span.num {background-position:-21px -21px;} ol.movList li.num03 a span.num:hover, ol.movList li.num03.on span.num {background-position:-21px -42px;} ol.movList li.num04 a span.num:hover, ol.movList li.num04.on span.num {background-position:-21px -63px;} ol.movList li.num05 a span.num:hover, ol.movList li.num05.on span.num {background-position:-21px -84px;} ol.movList li.num06 a span.num:hover, ol.movList li.num06.on span.num {background-position:-21px -105px;} ol.movList li.num07 a span.num:hover, ol.movList li.num07.on span.num {background-position:-21px -126px;} ol.movList li.num08 a span.num:hover, ol.movList li.num08.on span.num {background-position:-21px -147px;} ol.movList li.num09 a span.num:hover, ol.movList li.num09.on span.num {background-position:-21px -168px;} ol.movList li.num10 a span.num:hover, ol.movList li.num10.on span.num {background-position:-21px -189px;} ol.movList li.num11 a span.num:hover, ol.movList li.num11.on span.num {background-position:-21px -210px;} ol.movList li.num12 a span.num:hover, ol.movList li.num12.on span.num {background-position:-21px -231px;} .btnVideoWrap {width:144px; position:absolute; top:403px; left:6px;} .btnVideoWrap:after {content:" "; display:table; clear:both;} .btnVideoWrap a {width:49.5%; height:31px; display:inline-block; float:left; overflow:hidden; background: url(../images/res/mov_btn.png) 0 0 no-repeat; text-indent:-1000px;} .btnVideoWrap a.btn00 {background-position:-142px 0;} .btnVideoWrap a.btn01 {background-position:0 0;} .btnVideoWrap a.btn02 {background-position:-71px 0;} .btnVideoWrap a.btn03 {background-position:0 -31px;} .btnVideoWrap a.btn04 {background-position:-71px -31px;} .btnVideoWrap a.btn00:hover, .btnVideoWrap a.btn00.on {background-position:-213px 0;} .btnVideoWrap a.btn01:hover, .btnVideoWrap a.btn01.on {background-position:0 -61px;} .btnVideoWrap a.btn02:hover, .btnVideoWrap a.btn02.on {background-position:-71px -61px;} .btnVideoWrap a.btn03:hover, .btnVideoWrap a.btn03.on {background-position:0 -92px;} .btnVideoWrap a.btn04:hover, .btnVideoWrap a.btn04.on {background-position:-71px -92px;} /* 동영상 화질 말풍선 */ #potatoQuality, #highQuality {display:block; overflow:hidden; position:absolute; bottom:102px; left:235px; width:383px; height:383px; text-indent:-1000px; z-index:10000; background: url(../images/res/movPop.png) 0 0 no-repeat;} #potatoQuality {background-position:0 0;} #highQuality {background-position:0 -383px;} /* 학습학기 인트로 */ #studyContentsIntro {position:relative; z-index:100;} #studyContentsIntro h3 {position: absolute; top: 125px; left: 0;} .profileView {position:absolute; top:520px; right:200px; width:200px; height:64px; background:url(../images/res/btn_profile.png) 0 0 no-repeat; text-indent:-1000px;} .profileView:hover {background:url(../images/res/btn_profile.png) 0 -64px no-repeat;} #totalStudyTime {position:relative; top:367px;left:180px; width:165px; text-align:center;} #totalStudyTime span {color:#ccff66; font-family:Tahoma, sans-serif; font-size:22px;} #totalStudyTime span + span {margin-left:3px;} #totalStudyTime span em {font-size:18px; font-weight:bold; position:relative; top:-2px;} #studyTime {position:relative; top:226px; left:386px; text-align:left;} #studyTime p {width:180px; height:29px; margin-bottom:5px; line-height:29px; padding-left:35px; background:url(../images/res/btn.png) -200px -80px no-repeat;} #studyTime span {color:#fff; font-family:Tahoma, sans-serif; font-size:20px;} #studyTime span + span {margin-left:3px;} #studyTime span em {font-size:18px; font-weight:bold; position:relative; top:-2px;} #mpDown {position:absolute; top:427px; left:187px; width:178px; height:40px; background:url(../images/res/btn.png) -200px 0 no-repeat; text-indent:-2000px;} #mpDown:hover, #mpDown:focus {background:url(../images/res/btn.png) -200px -40px no-repeat;} #downLecData {position:absolute; top:427px; left:400px; width:178px; height:40px; background:url(../images/res/btn.png) -378px 0 no-repeat; text-indent:-2000px;} #downLecData:hover, #downLecData:focus {background:url(../images/res/btn.png) -378px -40px no-repeat;} /* 학습목표 팝업 */ #studyTargetPopup {position:fixed;width:934px;height:527px;left:32px;top:63px;z-index:1004;background:url(../images/popup/popup_study_target_bg.png) no-repeat;} #studyTargetPopup > h1 {padding: 8px 0 12px; text-align: center;} #studyTargetPopup a.PopClose {position:absolute; width:38px; height:38px; right:15px; top:7px; background:url(../images/popup/btn_close.png) no-repeat;} #studyTargetPopup a.PopClose:hover, #studyTargetPopup a.PopClose:focus {background-position:0 -38px;} .targetWrap {margin: 5px 15px;} .targetWrap .blueBox { height:165px; margin: 5px 30px 20px 34px; padding: 10px; background: #fff; border: 1px solid #ccd1d7; border-right-color: #fff; border-bottom-color: #fff; min-height: 90px; overflow-x: hidden; overflow-y: auto; } .blueBox ul li { position: relative; padding-left: 19px; font-size: 18px; letter-spacing: -0.025em; font-weight: bold; line-height: 22px; } .blueBox ul li + li { margin-top: 10px;} .blueBox ul li span.bu { display: block; position: absolute; top: 5px; left: 0; width:13px; height:12px; background:url(../images/res/bu.png) -20px 0 no-repeat; } /* 강사소개 팝업 */ #professorPopup {position:fixed;width:934px;height:527px;left:32px;top:63px;z-index:1004;background:url(../images/popup/popup_teacher_bg.png) no-repeat;} #professorPopup > h1 {padding: 8px 0 12px; text-align: center;} #professorPopup a.PopClose {position:absolute; width:38px; height:38px; right:15px; top:7px; background:url(../images/popup/btn_close.png) no-repeat;} #professorPopup a.PopClose:hover, #professorPopup a.PopClose:focus {background-position:0 -38px;} .professorWrap {margin: 5px 15px;} .professorWrap .yellowBox { height:90px; min-height: 90px; margin: 5px 205px 11px 34px; padding: 10px; background: #fff; border: 1px solid #ccd1d7; border-right-color: #fff; border-bottom-color: #fff; overflow-x: hidden; overflow-y: auto; } .yellowBox ul li { position: relative; padding-left: 19px; font-size: 18px; letter-spacing: -0.025em; font-weight: bold; line-height: 22px; } .yellowBox ul li + li { margin-top: 6px;} .yellowBox ul li span.bu { display: block; position: absolute; top: 5px; left: 0; width:13px; height:12px; background:url(../images/res/bu.png) -20px 0 no-repeat; } /* 돌발퀴즈 팝업 */ #unexpectedPopup {position:fixed; width:1000px; height:630px; left:0; top:0; z-index:1004; background:url(../images/res/unexpected_popup_bg.png) no-repeat;} #unexpectedPopup div#prevQuizWrap {position:relative; width:832px; top:170px; left:40px; padding:0; } #unexpectedPopup div#prevQuizWrap div.question { width: 810px; height: 75px; position: relative; left: 46px; overflow-x: hidden; overflow-y: auto; top: 0; background: none;} #unexpectedPopup div#prevQuizWrap span {display:block; position:absolute;} #unexpectedPopup span#alertPrevQuiz {width:238px; height:77px; left:405px; top:135px; z-index:1; text-indent:-2000px;} #unexpectedPopup #prevQuizTxt {height: 75px; padding-right: 10px; padding-left: 115px; font-size: 24px; display: table-cell; vertical-align: middle; font-weight: bold; line-height: 35px; letter-spacing: -0.025em;} #unexpectedPopup #prevNumBG {position: fixed; left: 115px; top: 178px; z-index: 1;} #unexpectedPopup #prevNumBG p {position:absolute; left:0; top:0; width:68px; height:59px; background:url(../images/res/unprveQuiz.png) no-repeat; text-indent:-2000px;} #unexpectedPopup #quizEx0 { margin-right:25px; } #unexpectedPopup #quizEx0, #unexpectedPopup #quizEx1 {position:relative; left:612px; top:54px; width:116px; height:130px; display:inline-block; zoom:1; float:left;} #unexpectedPopup #quizEx0 a {position:relative; display:block; height:100%; background:url(../images/res/unprevOX.png) 0 0 no-repeat; text-indent:-1000px;} #unexpectedPopup #quizEx1 a {position:relative; display:block; height:100%; background:url(../images/res/unprevOX.png) -116px 0 no-repeat; text-indent:-1000px;} #unexpectedPopup #quizEx0 a:hover, #unexpectedPopup #quizEx0 a.on {background-position: 0 -130px;} #unexpectedPopup #quizEx1 a:hover, #unexpectedPopup #quizEx1 a.on {background-position: -116px -130px;} #unexpectedPopup #quizEx0 span, #unexpectedPopup #quizEx1 span {position:absolute; left:45px; top:-20px; display:block; width:73px; height:60px; background:url(../images/res/movQuizCheck.png) no-repeat;} #unexpectedPopup #prevExplainWrap {position:relative;top:175px;left:75px; background: none; } #unexpectedPopup #prevCorrect {position:absolute; left:27px; top:26px;} #unexpectedPopup #prevExplain {position:absolute; left:27px; top:72px;} #unexpectedPopup #prevCorrect span, #unexpectedPopup #prevExplain span {display:block; width:91px; height:44px; text-indent:-1000px;} #unexpectedPopup #prevCorrect span {background:url(../images/res/quizExplainTxt.png) 0 0 no-repeat;} #unexpectedPopup #prevExplain span {top:9px; background:url(../images/res/quizExplainTxt.png) 0 -44px no-repeat;} #unexpectedPopup #prevCorrect p {position:absolute; top:0; left:105px; width: 100px; line-height:1.3em; font-weight:bold; color:#ee5a5a; font-size:34px;} #unexpectedPopup #prevExplain p {position:absolute; top: 8px; left: 105px; width: 732px; height: 80px; overflow-x: hidden; overflow-y: auto; font-size: 20px; font-weight: bold; line-height: 26px; padding-right: 12px;} /* 다음페이지로이동 */ .nextPage {position:absolute; top:593px; right:25px; width:185px; height:32px; background:url(../images/res/btn.png) -378px -227px no-repeat; text-indent:-5000px;} .nextPage:hover, .nextPage:focus {background:url(../images/res/btn.png) -378px -259px no-repeat;} /* cont06 평가하기 */ #studyContentsIntro {position:relative; z-index:100;} #startBtn {position:absolute; top:350px; right:392px; width:209px; height:91px; background:url(../images/res/btn_quiz_start.png) 0 0 no-repeat; text-indent:-5000px;} #startBtn:hover, #startBtn:focus {background:url(../images/res/btn_quiz_start.png) 0 -91px no-repeat;} .studyIntroPopup {position:relative; top:48px; text-align:center;} .studyIntroPopup p { position: absolute; left: 472px; top: 304px; height: 30px; line-height: 30px; color: #ffff00; font-size: 23px; font-weight: bold; letter-spacing: -0.075em;} #quizWrap {position:absolute; width:665px; height:472px; left:27px; top:103px; padding: 7px 17px 7px 7px; z-index:1000; background:url(../images/res/quiz_wrap_bg.png) no-repeat;} .quizScroll {position:relative; height:448px; width: 648px; padding-right: 7px; overflow-x:hidden; overflow-y:auto;} .question {position:relative; background: url(../images/res/question_bg.png) 0 0 repeat;} #quizTxt {margin-left: 65px; padding: 12px 0 20px 12px; width: 554px; font-size: 22px; letter-spacing: -0.075em; font-weight: bold; line-height: 28px;} #quizTxt span {color:#fe4848;} #quizWrap #prevNumBG {position:absolute; width:62px; height:52px; left:0; top:0; z-index:1;} #quizWrap #prevNumBG span {position:absolute; display:block; z-index:2; background:url(../images/res/quizNumOX.png) no-repeat;} #quizWrap #prevNumBG span.o {width:79px; height:75px; left:-10px; top:-10px; background-position:0 0;} #quizWrap #prevNumBG span.x {width:79px; height:75px; left:-13px; top:-10px; background-position:-79px 0;} #quizWrap #prevNumBG p {position:absolute; left:0; top:0; width:62px; height:51px; background:url(../images/res/checkQuizNum.png) no-repeat; text-indent:-2000px;} #quizWrap #prevNumBG p.num1 {background-position:0 0;} #quizWrap #prevNumBG p.num2 {background-position:0 -52px;} #quizWrap #prevNumBG p.num3 {background-position:0 -104px;} #quizExplainWrap { position: relative; margin: 25px 0 20px; border: 1px solid #c7c3bb; background: url(../images/res/quiz_explain_bg.png) 0 0 repeat;} #quizCorrect {position:relative; left:8px; top:8px;} #quizExplain {position:relative; left:8px;} #quizCorrect span, #quizExplain span {display:block; width:73px; height:35px; text-indent:-1000px;} #quizCorrect span {background:url(../images/res/quizCorrectTxt.png) 0 0 no-repeat;} #quizExplain span {top:9px; background:url(../images/res/quizCorrectTxt.png) 0 -35px no-repeat;} #quizCorrect p {position: relative; top: -26px; left: 85px; font-weight: bold; color: #ee5a5a; font-size: 24px;} #quizExplain p {position:relative; top:-33px; left:85px; width: 480px; padding-right:12px; overflow-x:hidden; overflow-y:auto; font-size:17px; font-weight:bold; line-height:22px; } .exampleWrap .example .num {position: absolute; top: -1px; display: inline-block; width: 28px; height: 28px; background:url(../images/res/quiz_num.png) 0 0 no-repeat;} .exampleWrap .example {margin: 10px 20px 20px 40px; z-index:10;} .exampleWrap .example li {position:relative; width: 535px; text-align: justify; margin-bottom:8px; line-height:22px;} .exampleWrap .example li a {display:block;} .example li a span+span {position: relative; left: 36px; font-size: 18px; font-weight: bold; color: #333; letter-spacing: -0.075em;} .example li.on a span+span {color: #fe4848;} #choice {display:none; position:absolute; top:19%; left:0; margin-top:-10px; width:29px; height:24px; background:url(../images/res/num_check.png) 0 0 no-repeat;} #exNum01 {background-position:0 0;} #exNum02 {background-position:0 -28px;} #exNum03 {background-position:0 -56px;} #exNum04 {background-position:0 -84px;} #exNum05 {background-position:0 -112px;} #exNum01.on {background-position:-56px 0;} #exNum02.on {background-position:-56px -28px;} #exNum03.on {background-position:-56px -56px;} #exNum04.on {background-position:-56px -84px;} #exNum05.on {background-position:-56px -112px;} #quizResult {position:absolute; width:260px; height:472px; right:27px; top:103px; z-index:1000; background:url(../images/res/quiz_result_bg.png) no-repeat;} #quizResult h2 {margin:20px 0 15px; text-align:center;} #quizResult .quizResultWrap {position:relative; width:226px; height:302px; left:17px; top:0; background:url(../images/res/quiz_result_wrap_bg.png) no-repeat;} #quizResult .btnRetryQuiz, #quizResult .btnConfirmQuiz {position:absolute; left:76px; bottom:28px; width:105px; height:32px; display:inline-block; text-indent:-2000px; background:url(../images/res/btn.png) no-repeat;} #quizResult .btnConfirmQuiz {background-position:-378px -163px;} #quizResult .btnRetryQuiz {background-position:-483px -163px;} #quizResult .btnConfirmQuiz:hover {background-position:-378px -195px;} #quizResult .btnRetryQuiz:hover {background-position:-483px -195px;} .questionResult h3 {text-indent: -2000px;} .questionResult .o, .questionResult .x {width:104px; height: 119px;} .questionResult .o { position: absolute; left: 0; bottom: 6px; } .questionResult .x { position: absolute; right: 5px; bottom: 6px; } .questionResult p { width: 40px; height: 57px; margin: 34px auto 0; text-indent: -2000px; text-align: center; background:url(../images/res/total_num.png) no-repeat;} .questionResult p.total0 {background-position:0 0;} .questionResult p.total1 {background-position:0 -57px;} .questionResult p.total2 {background-position:0 -114px;} .questionResult p.total3 {background-position:0 -171px;} .questionResult p.totalNull {background-position:0 -228px;} .quizResultWrap ol .num {display: inline-block; width: 28px; height: 28px; background:url(../images/res/quiz_num.png) 0 0 no-repeat;} .quizResultWrap ol { position: relative; width: 157px; height:43px; top: 43px; left: 58px; z-index: 10; } .quizResultWrap ol:after {content:" "; display:table; clear:both;} .quizResultWrap ol li {position:relative; display: inline-block; float:left; margin-bottom:8px; line-height:22px;} .quizResultWrap ol li + li {margin-left:4px;} .quizResultWrap ol li a {display: inline-block;} .quizResultWrap #choice {display:none; position:absolute; top:19%; left:0; margin-top:-10px; width:29px; height:24px; background:url(../images/res/num_check.png) 0 0 no-repeat;} .quizResultWrap #exNum01 {background-position:0 0;} .quizResultWrap #exNum02 {background-position:0 -28px;} .quizResultWrap #exNum03 {background-position:0 -56px;} .quizResultWrap #exNum04 {background-position:0 -84px;} .quizResultWrap #exNum05 {background-position:0 -112px;} .quizResultWrap #exNum01.on {background-position:-28px 0;} .quizResultWrap #exNum02.on {background-position:-28px -28px;} .quizResultWrap #exNum03.on {background-position:-28px -56px;} .quizResultWrap #exNum04.on {background-position:-28px -84px;} .quizResultWrap #exNum05.on {background-position:-28px -112px;} .quizResultWrap #prevNumBG {position: relative; left: -57px; top: -9px; z-index: 1;} .quizResultWrap #prevNumBG span { position: absolute; display: block; width: 46px; height: 46px; z-index: 2; background: url(../images/res/smallNumOX.png) no-repeat;} .quizResultWrap #prevNumBG span.o {width:46px; background-position:0 0;} .quizResultWrap #prevNumBG span.x {width:46px; background-position:-46px 0;} /* 총문제 정답확인 팝업 */ #resultQuizPop { position: fixed; left: 288px; top: 100px; width: 428px; height: 428px; z-index: 1004; } .btnRetryClose {position:absolute; top:362px; left:178px; width:70px; height:27px; background:url(../images/res/btn.png) -378px -109px no-repeat; text-indent:-5000px;} .btnRetryClose:hover, .btnRetryClose:focus {background:url(../images/res/btn.png) -378px -136px no-repeat;} /* 지문보기 */ .rubricView { margin: 6px 12px 15px; background: #f6f6f6; border: 1px solid #d6d6d6; border-right: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; } .rubricView h3 { text-align: center; } .rubricView ul { padding:10px 10px 0 10px; } .rubricView ul li { position: relative; margin-bottom: 10px; padding-left: 28px; color: #33435e; letter-spacing: -0.025em; font-size: 17px; font-weight: bold; line-height: 20px; } .rubricView ul li span.num { display: block; position: absolute; top: 0; left: 0; width: 20px; height: 20px; line-height: 20px; color: #fff; font-size: 12px; text-align: center; background: #8f95a4; border-radius: 50%; } .rubricView ul li span.bracket { padding-left: 50px; } /* cont9 학습정리 */ #printTabWrap h2 {position: absolute; left: 58px; top: 120px; font-size: 23px; color: #fff; letter-spacing: -0.05em;} .printTabText { position: absolute; top: 190px; left: 88px; width: 820px; height: 343px; overflow-x: hidden; overflow-y: auto; padding-right: 15px;} .printTabText ol li {font-size: 18px; font-weight: bold; margin-bottom: 10px; letter-spacing: -0.05em; line-height: 20px;} .printTabText ol li div.step00 { position: relative; padding-left: 19px; margin-top: -20px; width:99%; } .printTabText ol li .step02 {position: relative; padding-left: 15px; margin: 5px 0 10px 20px; font-size: 17px; font-weight: bold; letter-spacing: -0.05em;} .printTabText ol li .step02 span.bu {display: block; position: absolute; top: 5px; left: 0; width:9px; height:9px; background:url(../images/res/bu.png) -46px 0 no-repeat;} .printTabText ol li .step02 li .step03 {position: relative; padding-left: 10px; margin: 5px 0 10px 0; font-size: 17px; font-weight: bold; letter-spacing: -0.05em;} .printTabText ol li .step02 li .step03 span.bu {display: block; position: absolute; top: 5px; left: 0; width:7px; height:9px; background:url(../images/res/bu.png) -55px 0 no-repeat;} .paginationWrap {display:table; position:relative; top:495px; margin:0 auto; height:50px;} .pagination { margin:0 auto; text-align:center; } .paginationWrap span {display:inline-block; float:left; width:31px; height:48px; background:url(../images/res/pagination_num.png) 0 0 no-repeat; text-indent:-2000px; line-height:88px;} .paginationWrap span.sm_prev {background-position:0 0; width:41px;} .paginationWrap span.sm_prev:hover, .paginationWrap span.sm_prev.on {background-position:0 -48px;} .paginationWrap span.sm_next {background-position:-351px 0; width:41px;} .paginationWrap span.sm_next:hover, .paginationWrap span.sm_next:hover {background-position:-351px -48px;} .paginationWrap span.line {width:2px; background-position:-392px 0;} .paginationWrap span.p01 {background-position:-41px 0;} .paginationWrap span.p01:hover, .paginationWrap span.p01.on {background-position:-41px -48px;} .paginationWrap span.p02 {background-position:-72px 0;} .paginationWrap span.p02:hover, .paginationWrap span.p02.on {background-position:-72px -48px;} .paginationWrap span.p03 {background-position:-103px 0;} .paginationWrap span.p03:hover, .paginationWrap span.p03.on {background-position:-103px -48px;} .paginationWrap span.p04 {background-position:-134px 0;} .paginationWrap span.p04:hover, .paginationWrap span.p04.on {background-position:-134px -48px;} .paginationWrap span.p05 {background-position:-165px 0;} .paginationWrap span.p05:hover, .paginationWrap span.p05.on {background-position:-165px -48px;} .paginationWrap span.p06 {background-position:-196px 0;} .paginationWrap span.p06:hover, .paginationWrap span.p06.on {background-position:-196px -48px;} .paginationWrap span.p07 {background-position:-227px 0;} .paginationWrap span.p07:hover, .paginationWrap span.p07.on {background-position:-227px -48px;} .paginationWrap span.p08 {background-position:-258px 0;} .paginationWrap span.p08:hover, .paginationWrap span.p08.on {background-position:-258px -48px;} .paginationWrap span.p09 {background-position:-289px 0;} .paginationWrap span.p09:hover, .paginationWrap span.p09.on {background-position:-289px -48px;} .paginationWrap span.p10 {background-position:-320px 0;} .paginationWrap span.p10:hover, .paginationWrap span.p10.on {background-position:-320px -48px;} .qrCodeBtn {position:absolute; top:110px; right:160px; width:85px; height:46px; background:url(../images/res/btn.png) -200px -109px no-repeat; text-indent:-5000px;} .qrCodeBtn:hover, .qrCodeBtn:focus {background:url(../images/res/btn.png) -200px -155px no-repeat;} .summaryPrint {position:absolute; top:110px; right:57px; width:85px; height:46px; background:url(../images/res/btn.png) -285px -109px no-repeat; text-indent:-5000px;} .summaryPrint:hover, .summaryPrint:focus {background:url(../images/res/btn.png) -285px -155px no-repeat;} /* qr코드 */ #qrCodePopup {position:absolute; width:318px; height:132px; left:528px; top:158px; z-index:1004; background:url(../images/res/qrcode_bg.png) no-repeat;} #qrCodePopup a.qrPopClose{position:absolute; width:16px; height:16px; right:13px; top:21px; background:url(../images/res/qrcode_close.png) no-repeat;} #qrCodePopup .qrCodeImg { position: absolute; top: 26px; left: 8px; width: 96px; height: 96px; background: #fff; } /* cont10 다음차시예고 */ .thisLec {position:absolute; top:95px; left:137px;} .nextLec {position:absolute; top:198px; left:137px;} .thankYou {text-align: center; position: relative; top: 377px;} /* ---------------------- mobile layout ---------------------- */ /* 모바일 이동버튼 */ #mGlobalPaging a {display:block; position:absolute; width:55px; height:90px; top:299px; z-index:1000; background:url(../images/res/mGlobalBtn.png); text-indent:-2000px; } a#mPrev {left:0; background-position:0 0;} a#mNext {right:0; background-position:-55px 0;} #mGlobalPaging a#mPrev:hover, #mGlobalPaging a#mPrev:focus {background-position:0 -90px;} #mGlobalPaging a#mNext:hover, #mGlobalPaging a#mNext:focus {background-position:-55px -90px;} .vodFullScreen video { width:100% !important; height:100% !important; } .closeFullScreen { height:40px; width:100%; cursor:pointer; display:block; line-height:40px; background:#0596b3; color:#fff; text-align:center; font-size:15px;} /* 모바일 Start 버튼(Touch Screen) */ div.touchScreen { position: relative; width: 559px; height: 99px; top: 80px; margin: 0 auto; background:url('../images/res/touchScreen.png') 0 0 no-repeat;} /*-------------------------------------------------------------------------------------------------- 개발자 추가 코드 --------------------------------------------------------------------------------------------------*/ /* bottom 작업바 wrapper */ div#ui_task_bar {position:absolute; bottom:0; width:100%; height:40px; z-index:1010; } /* 웹툰 이미지 슬라이더 */ .bx-wrapper {margin-bottom: 120px;} .bx-wrapper img{max-width:100%; max-height:100%} ul.bxslider { margin: 0; padding: 0; } #bx-pager { bottom: -95px; border: 1px solid green; } #bx-pager a { border: solid #ccc 1px; display:inline-block; margin: 0 5px; padding: 3px; } #bx-pager a:hover {border: 1px solid #5280DD 1px;} #bx-pager a.active {border: 2px solid red;} /* 플레이버튼 */ a#playButton{display:block;overflow:hidden;position:absolute;width:131px;height:130px;left:331px;top:158px;z-index:50;background:url('../images/player/playButton_off.png') no-repeat; text-indent:-9999px;} a#playButton:hover,a#playButton:focus{background:url('../images/player/playButton_on.png') 7px 5px no-repeat;} /* 로딩 스피너 */ #page_loading_spinner{position:absolute;top:50%;left:50%;margin:-60px 0 0 -100px; z-index:1000;} /* 동영상 출처 관련 */ .interview_vod_title {display:none;position:absolute;width:100%;top: 0;margin: 0 10px 0 0;padding: 2px 5px;text-align: left;font-size: 20px;font-weight: bold;color: #858484 } .interview_vod_source {display:none;position:absolute;width:100%;bottom: 0;margin: 0 10px 0 0;padding: 2px 5px;text-align: right;font-size: 14px;font-weight: bold;color: #858484 } /*콘텐츠 모니터링 팝업*/ #contMonitorPopup {position:fixed;width:934px;height:527px;left:32px;top:63px;z-index:1004;background:url(../images/popup/cont_pop_bg.png) no-repeat;} #contMonitorPopup a.PopClose {position:absolute; width:38px; height:38px; right:15px; top:7px; background:url(../images/popup/btn_close.png) no-repeat;} #contMonitorPopup a.PopClose:hover,a.PopClose:focus {background-position:0 -38px;} .contMonitorWrap { position: relative;} .contMonitorWrap h1{position:absolute; top:5px; left:350px;font-size: 37px;font-family: THEJung150;color: #ffffff;} .contMonitorWrap h2{position:absolute; top:60px; left:30px;width: 828px;height: 44px;background: url(../images/popup/cont_moni_sub.png) 0 0 no-repeat;} input#ContMonitorTit{position:absolute; top:140px; left:100px; width:760px; background-color: transparent;border: none;font-size: 20px;font-weight: bold;letter-spacing: -1px;font-family: KoPubDotum Bold;color: #3e61a1;} textarea#ContMonitorWrite {position: absolute; top: 190px; left: 30px; padding: 3px 20px 0; width: 870px; height: 280px; z-index: 10; background: none; font-weight: bold; font-size: 17px; line-height: 39px; color: #6b6b6b;} .btn_save{position: relative;float: left;top: 490px;left: 370px;width: 110px;height: 33px;background: url(../images/popup/btn_sv_res.png) 0 0 no-repeat;} .btn_save:hover, .btn_save:focus{background-position: 0 -33px;} .btn_rslt{position: relative;float: left;top: 490px;left: 380px;width: 200px;height: 33px;background: url(../images/popup/btn_sv_res.png) -120px 0 no-repeat;} .btn_rslt:hover, .btn_rslt:focus{background-position: -120px -33px;}