﻿@charset "utf-8";
/* base */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;background:transparent}
body{line-height:1}
dl,ul,ol,li{list-style:none}
blockquote,q{quotes: none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
address,caption,cite,code,dfn,em,strong,th,va{font-style:normal}
legend,caption{visibility:hidden; height:0; width:0; font-size:0}
hr {display: none}

/* remember to define focus styles! */
:focus{outline:0}

/* remember to highlight inserts somehow! */
ins {text-decoration: none}
del {text-decoration: line-through}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0}

/* common */
*{margin:0;padding:0}
html, body{width:100%;_height:100%}
body, th, td{font-size:12px;line-height:1;color:#444;line-height:125%}
input, select{vertical-align:middle}
input, select, textarea {font-size : 100%}
textarea{overflow:auto}
a{color:#828282;text-decoration:none;cursor:pointer;}
a:link, a:hover, a:active, a:focus{color:#828282;text-decoration:none}
a.selected{cursor:default;}
.clear{clear:both}
.blind{display:block;overflow:hidden;*position:absolute;top:0;left:0;width:0;height:0;border:0;background:none;font-size:0;line-height:0}

/* common */
*, *:before, *:after{box-sizing:border-box;}
* { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', arial, sans-serif; line-height:125%;}
*:lang(ko)        { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', 'Noto Sans CJK KR', "Noto Sans KR", Arial, Helvetica, sans-serif;}
*:lang(zh-Hans)   { font-family: 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', SimHei, '黑体', Arial, Helvetica, sans-serif; }
*:lang(en) { font-family:arial;}
*[lang="ko"]      { font-family: 'NanumGothic', '나눔고딕', 'Malgun Gothic', '맑은 고딕', 'Noto Sans CJK KR', "Noto Sans KR", Arial, Helvetica, sans-serif;}
*[lang="zh-Hans"] { font-family: 'Microsoft Yahei', '微软雅黑', STXihei, '华文细黑', SimHei, '黑体', Arial, Helvetica, sans-serif; }
*[lang="en"] { font-family:arial;}

/* IE7/8 용 audio flash layer 위치 이동 */
#mp3p {position: absolute; top:-10px; left:-10px; }
#mp3q {position: absolute; top:-10px; left:-10px; }
#mp3e {position: absolute; top:-10px; left:-10px; }
#mp3b {position: absolute; top:-10px; left:-10px; }
#mp3n {position: absolute; top:-10px; left:-10px; }

/* 탭키로 이동시 점선 (키보드 접근성을 위함) */
div :focus { /*outline:1px #ccc dashed; border: 1px dashed #ccc;*/}
div .selected { outline:0; border: 0; cursor:default;}

input[type=text]::-ms-clear {
  display:none;
}
input[type=text]:-ms-clear {
  display:none;
}

/****************************
layout
*****************************/

body{ background-color:#d8dbdb}


/* pronumDic */
#pronunDic{position:relative;width:1100px;height:650px;background:url("../image/bg.jpg") repeat-x 0 0}

.topArea{ position:relative;height:342px;}
.topArea h1{position:absolute;width:183px;height:123px;background:url("../image/top_logo.png") no-repeat 0 0;top:0px;left:0px; z-index:200}
.topArea .btnClose a{ position:absolute; top:3px; left:1075px;display:block;width:26px;height:26px;background:url("../image/btn_close.png") no-repeat 0 0; z-index:200}
.topArea .btnClose a.hover {background-position:0 -23px;}
.copyright{position:absolute;bottom:7px;left:5px;width:300px;height:16px;background:url("../image/img_footer.png") no-repeat 0 0; z-index:200}
.btn_gnb{position: absolute; top:147px; left:0;width:30px;height:94px;z-index:99}
.btn_gnb a{ display:block;width:30px;height:90px;background:url(../image/btn_gnb.png) no-repeat -3px 0}
.gnb{position: absolute; top:0px; left:-192px;width:162px;height:650px; background-color:#e9edee; border-right:1px solid #c3cdce; z-index:100; padding-top:169px}
.gnb .gnb_close{position: absolute; top:147px; left:162px;width:30px;height:94px; }
.gnb .gnb_close a{ display:block;width:30px;height:94px;background:url(../image/btn_gnb.png) no-repeat -43px 0px}
.gnb a{ padding:2px 0}
.gnb .menu1 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 0; padding:2px 0}
.gnb .menu1 a.hover, .gnb .menu1 a.selected{ background-color:#FFF}
.gnb .menu2 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -25px}
.gnb .menu2 a.hover, .gnb .menu2 a.selected{ background-color:#FFF}
.gnb .menu3 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -50px}
.gnb .menu3 a.hover, .gnb .menu3 a.selected{ background-color:#FFF}
.gnb .menu4 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -75px}
.gnb .menu4 a.hover, .gnb .menu4 a.selected{ background-color:#FFF}
.gnb .menu5 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -100px}
.gnb .menu5 a.hover, .gnb .menu5 a.selected{ background-color:#FFF}
.gnb .menu6 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -125px}
.gnb .menu6 a.hover, .gnb .menu6 a.selected{ background-color:#FFF}
.gnb .menu7 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -150px}
.gnb .menu7 a.hover, .gnb .menu7 a.selected{ background-color:#FFF}
.gnb .menu8 a{ display:block;width:161px;height:25px;background:url(../image/menu.png) no-repeat 0 -175px}
.gnb .menu8 a.hover, .gnb .menu8 a.selected{ background-color:#FFF}
.gnb .menu9 a{ display:block;width:161px;height:58px;background:url(../image/menu.png) no-repeat 0 -200px}
.gnb .menu9 a.hover, .gnb .menu9 a.selected{ background-color:#FFF}
.gnb .menu21 a{ display:block;width:161px;height:25px;background:url(../image/menu2.png) no-repeat 0 0; padding:2px 0}
.gnb .menu21 a.hover, .gnb .menu21 a.selected{ background-color:#FFF}
.gnb .menu22 a{ display:block;width:161px;height:25px;background:url(../image/menu2.png) no-repeat 0 -25px}
.gnb .menu22 a.hover, .gnb .menu22 a.selected{ background-color:#FFF}
.gnb .menu23 a{ display:block;width:161px;height:25px;background:url(../image/menu2.png) no-repeat 0 -50px}
.gnb .menu23 a.hover, .gnb .menu23 a.selected{ background-color:#FFF}
.gnb .menu24 a{ display:block;width:161px;height:25px;background:url(../image/menu2.png) no-repeat 0 -75px}
.gnb .menu24 a.hover, .gnb .menu24 a.selected{ background-color:#FFF}
.gnb .menu25 a{ display:block;width:161px;height:25px;background:url(../image/menu2.png) no-repeat 0 -100px}
.gnb .menu25 a.hover, .gnb .menu25 a.selected{ background-color:#FFF}
.gnb .menu26 a{ display:block;width:161px;height:25px;background:url(../image/menu2.png) no-repeat 0 -125px}
.gnb .menu26 a.hover, .gnb .menu26 a.selected{ background-color:#FFF}

.indexArea { position:absolute; top:0; left: 0}
.indexArea .mov_tab1 a{ position:absolute; top:9px; left:300px;display:block;width:73px;height:30px;background:url("../image/mov_tab.png") no-repeat 0 0; border:0px solid red}
.indexArea .mov_tab1 a.hover, .indexArea .mov_tab1 a.selected {background-position:0 -50px;}
.indexArea .mov_tab2 a{ position:absolute; top:9px; left:374px;display:block;width:73px;height:30px;background:url("../image/mov_tab.png") no-repeat -74px 0;}
.indexArea .mov_tab2 a.hover, .indexArea .mov_tab2 a.selected {background-position:-74px -50px;}
.indexArea .mov{position:absolute;top:39px; left:300px;width:484px;height:276px; border:2px solid #50a9b4}
.indexArea .mov .btn_mp4 a{position:absolute;top:93px;left:197px;width:83px;height:83px;background:url("../image/mp4_play.png") no-repeat 0px 0px; display:block}
.indexArea .mov .btn_mp4 a.hover{background-position: 0 -1px }

.indexArea .btn_wmv a{position:absolute;top:41px;left:302px;width:480px;height:272px;background:url("../image/wmv_play.jpg") no-repeat 0px 0px; display:block}
.indexArea .btn_wmv a.hover{background-position: 0 -1px }
.indexArea .btn_wmv2 a{position:absolute;top:41px;left:302px;width:480px;height:272px;background:url("../image/wmv_play2.jpg") no-repeat 0px 0px; display:block}
.indexArea .btn_wmv2 a.hover{background-position: 0 -1px }


.indexArea .movNavi{position:absolute; top:320px; left:480px;width:138px;height:28px; z-index:100}
.indexArea .movNavi a{width:31px;height:32px;background:url("../image/btn_navi.png") no-repeat 0 0;}
.indexArea .movNavi .pre a{float:left;background-position:0 1px;}
.indexArea .movNavi .pre a.hover{background-position:0 0px;}
.indexArea .movNavi .pre.disabled a{background-position:0 -54px;cursor:unset;}
.indexArea .movNavi .next a{float:right;background-position:-39px 1px;}
.indexArea .movNavi .next a.hover{background-position:-39px 0px;}
.indexArea .movNavi .next.disabled a{background-position:-39px -54px;cursor:unset;}
.indexArea .movNavi .thisNum{text-align:center;/*width:100%;height:100%;*/ padding-top:3px}
.indexArea .movNavi .thisNum .cNum{font-size:17px;font-weight:bold;color:#0f8492;font-family:Arial, Helvetica, sans-serif;line-height:27px;}
.indexArea .movNavi .thisNum .tNum{font-size:14px;font-weight:bold;color:#666;margin-left:5px; font-family:Arial, Helvetica, sans-serif;line-height:27px;}
.indexArea #wsearch{position:absolute;top:162px;left:40px;width:300px;height:163px;background:url("../image/word_bg.png") no-repeat 0px 0;}
.indexArea #wsearch .word_txt{position:absolute;top:73px;left:79px;width:115px;height:22px; padding:2px 0 0 7px}
.indexArea #wsearch .word_txt input{width:107px;height:20px; border:0px solid #fff; background-color:#FFF; font-size:14px;}
.indexArea #wsearch .word_txt input.default{width:107px;height:20px; border:0px solid #fff; background-color:#FFF; font-size:12px; color:#888}
.indexArea #wsearch .bt_search a{position:absolute;top:70px;left:205px;width:31px;height:26px;background:url("../image/word_btn.png") no-repeat 0px 0px; display:block}
.indexArea #wsearch .bt_search a.hover{background-position: 0 -1px }
.indexArea .tip{position:absolute;top:52px;left:799px;width:300px;height:163px;}
.indexArea .tip .sub_cont1{ padding-left:10px}
.indexArea .tip .sub_cont2{ padding-left:10px}

.allArea{ position:relative;height:281px; padding:30px 0 0 0}
.allArea .bt_tab1 a{ position:absolute; top:0px; left:863px;display:block;width:88px;height:29px;background:url("../image/all_tab.png") no-repeat -93px 0;}
.allArea .bt_tab1 a.hover, .allArea .bt_tab1 a.selected {background-position:0 0;}
.allArea .bt_tab2 a{ position:absolute; top:0px; left:955px;display:block;width:88px;height:29px;background:url("../image/all_tab.png") no-repeat -93px -38px;}
.allArea .bt_tab2 a.hover, .allArea .bt_tab2 a.selected {background-position:0 -38px;}
.allArea .coltit{ position:absolute; top:64px; left:65px; width:50px; height:25px; background-color:#333; color:#fff; padding:4px 0; text-align:center}
.allArea .barWrap1{/*height:30px;*/ padding-left:188px}
.allArea .barWrap2{/*height:30px;*/ padding-left:188px}

.allArea table.bartable1{width:856px;}
.allArea table.bartable1 td{font-size:14px;color:#2570d9;font-weight: bold;letter-spacing:0px;line-height:130%;text-align: center;background-color:#fff; /*cellpadding:1px;*/border:1px solid #dddddd; /*width:45px*/}
.allArea table.bartable1 td a{ display:block;padding:5px 0 ;font-size:14px;color:#2570d9;}
.allArea table.bartable1 td a.hover, table.bartable1 td a.selected{ display:block; background-color:#83ffe6;color:#000;}
.allArea table.bartable2{width:856px;}
.allArea table.bartable2 td{font-size:14px;color:#2570d9;font-weight: bold;letter-spacing:0px;line-height:130%;text-align: center;background-color:#fff; /*cellpadding:1px;*/border:1px solid #dddddd; /*width:45px*/}
.allArea table.bartable2 td a{ display:block;padding:5px 0 ;font-size:14px;color:#2570d9;}
.allArea table.bartable2 td a.hover, table.bartable2 td a.selected{ display:block; background-color:#83ffe6;color:#000;}
.allArea .contWrap{ position:relative;height:227px; overflow:auto; border:0px solid red; padding-left:114px}
.allArea table.alltable1{width:930px;}
.allArea table.alltable1 th{font-size:14px;color:#fff;font-weight:normal;letter-spacing:-1px;text-align:center;height:0px;padding:0;}
.allArea table.alltable1 td{font-weight:normal;letter-spacing:0px;line-height:130%;text-align: center; height:28px;border:1px solid #fff; background-color:#dddddd;}
.allArea table.alltable1 td a{ display:block;padding:5px 0 ;font-size:14px;color:#000;}
.allArea table.alltable1 td a.hover, table.alltable1 td a.selected{ display:block; background-color:#83ffe6}
.allArea table.alltable1 td.col{background-color:#747474; width:73px; color:#fff;font-size:14px}
.allArea table.alltable2{width:930px;}
.allArea table.alltable2 th{font-size:14px;color:#fff;font-weight:normal;letter-spacing:-1px;text-align:center;height:0px;padding:0;}
.allArea table.alltable2 td{font-weight:normal;letter-spacing:0px;line-height:130%;text-align: center; height:28px;border:1px solid #fff; background-color:#dddddd;}
.allArea table.alltable2 td a{ display:block;padding:5px 0 ;font-size:14px;color:#000;}
.allArea table.alltable2 td a.hover, table.alltable2 td a.selected{ display:block; background-color:#83ffe6}
.allArea table.alltable2 td.col{background-color:#747474; width:73px; color:#fff;font-size:14px}


/* lecture */
.lectureWrap{position: absolute; top:0px; left:180px;width:920px;height:630px; border:0px solid red}
.lectureWrap .lec_txt{position: absolute; top:57px; left:30px; width:840px; height:30px; text-align: right; color:#474747; font-size:14px;}
.lectureWrap .mp4Player{height:600px;padding:83px 0 0 20px;background:url(../image/lec854_bg.png) no-repeat -102px 49px;}
.lectureWrap .wmvPlayer{height:600px;padding:83px 0 0 20px;background:url(../image/lec854_bg.png) no-repeat -102px 49px;}
.lectureWrap .boxPlayer{height:600px;padding:83px 0 0 20px;background:url(../image/lec854_bg.png) no-repeat -102px 49px;}
.lectureWrap .mp4Player .player{width:854px;height:483px; position:relative; padding-bottom:3px}
.lectureWrap .wmvPlayer .player{width:854px;height:483px; position:relative; padding-bottom:3px}
.lectureWrap .boxPlayer .player{width:854px;height:483px; position:relative; padding-bottom:3px}
.lectureWrap .boxPlayer .closer{width:854px;height:480px; position:absolute; top:0; left:0;}

/* 854*480 */
.control{position: relative; background:url(../image/cont_bg.png) no-repeat 76px 21px; width:854px; height:53px; z-index:5; padding-top:3px}
.control .btn_play{position:absolute;top:0px;left:0px;width:46px;height:46px}
.control .btn_play a{ display:block;width:46px;height:46px;background:url(../image/btn_control.png) no-repeat 0px 0px}
.control .btn_play a.hover{ background-position:-50px 0}
.control .btn_pause{position:absolute;top:0px;left:0px;width:46px;height:46px}
.control .btn_pause a{ display:block;width:46px;height:46px;background:url(../image/btn_control.png) no-repeat -171px 0px}
.control .btn_pause a.hover{ background-position:-221px 0}
.control .btn_stop{position:absolute;top:18px;left:44px;width:28px;height:28px}
.control .btn_stop a{ display:block;width:28px;height:28px;background:url(../image/btn_control.png) no-repeat -103px -3px}
.control .btn_stop a.hover{ background-position:-132px -3px}
.control .mov_bar{position:absolute;top:2px;left:48px;width:700px;height:5px;}
.control .mov_bar .a_bar{position:absolute;top:6px;left:5px;height:5px; background-color:#b2b1b1; width:700px; cursor:pointer;}
.control .mov_bar .c_bar{position:absolute;top:6px;left:5px;height:5px; background-color:#f04e54;}
.control .mov_bar .ico{position:absolute;top:3px; width:12px; height:10px; cursor:pointer;}
.control .mov_bar .ico a{ display:block; width:12px; height:10px;background:url(../image/controll_ico.png) no-repeat 0px 0px}
.control .mov_bar .ico a.hover{background:url(../image/controll_ico.png) no-repeat -12px 0px}
.control .mov_time{position:absolute;top:2px;right:-23px;width:100px;height:18px;line-height:18px; color:#222; font-size:12px; font-family:Arial, Helvetica, sans-serif}
.control .btn_sound{position:absolute;top:25px;left:85px;width:27px;height:24px}
.control .btn_sound a{ display:block;width:27px;height:24px;background:url(../image/btn_control.png) no-repeat -272px -2px}
.control .btn_sound a.hover{ background-position:-272px -27px}
.control .btn_nosound{position:absolute;top:25px;left:85px;width:27px;height:24px}
.control .btn_nosound a{ display:block;width:27px;height:24px;background:url(../image/btn_control.png) no-repeat -272px -27px}
.control .btn_nosound a.hover{ background-position: -272px -2px}
.control .sound_bar{position:absolute;top:27px;left:113px;width:60px;height:5px;}
.control .sound_bar .a_bar{position:absolute;top:6px;left:5px;height:5px; background-color:#b2b1b1; width:60px; cursor:pointer;}
.control .sound_bar .c_bar{position:absolute;top:6px;left:5px;height:5px; background-color:#f04e54;}
.control .sound_bar .ico{position:absolute;top:3px; width:12px; height:10px; cursor:pointer;}
.control .sound_bar .ico a{ display:block; width:12px; height:10px;background:url(../image/controll_ico.png) no-repeat 0px 0px}
.control .sound_bar .ico a.hover{background:url(../image/controll_ico.png) no-repeat -12px 0px}
.control dd a{position:absolute;vertical-align:top;height:22px;background:url(../image/img_control.png) no-repeat 0 1px; display:inline-block}
.control .m_fullscreen a{top:23px;right:8px;width:81px;background:url(../image/btn_full.png) no-repeat 0 0px; }
.control .m_defscreen a{top:23px;right:8px;width:81px;background:url(../image/btn_full2.png) no-repeat 0 0px; }
.control .speed{position:absolute;top:26px;right:233px;width:34px;height:17px;background:url(../image/img_control.png) no-repeat 0 0px}
.control .s_low a{top:23px;right:197px;width:27px;background-position:0 -34px}
.control .s_normal a{top:24px;right:170px;width:27px;background-position:0 -57px}
.control .s_high1 a{top:24px;right:142px;width:27px;background-position:0 -79px}
.control .s_high2 a{top:24px;right:113px;width:27px;background-position:0 -101px}
.control .m_fullscreen a.hover, .control .m_fullscreen a.sel{background:url(../image/btn_full.png) no-repeat 0 -26px;}
.control .m_defscreen a.hover, .control .m_defscreen a.sel{background:url(../image/btn_full2.png) no-repeat 0 -26px;}
.control .s_low a.hover, .control .s_low a.selected{background-position:-87px -34px}
.control .s_normal a.hover, .control .s_normal a.selected{background-position:-87px -57px}
.control .s_high1 a.hover, .control .s_high1 a.selected{background-position:-87px -79px}
.control .s_high2 a.hover, .control .s_high2 a.selected{background-position:-87px -101px}
.control .seek_time{position:relative;top:-20px;width:50px;height:18px; background:#fff; color:#000; font-size:12px; padding:3px 0px; text-align:center;opacity:0.8; z-index:10}

progress{border: 0;}
progress[value] {color:#f04e54;}
progress::-ms-fill {border-color: currentColor;}
progress::-webkit-progress-bar-value {background-color:#f04e54;}
progress::-webkit-progress-value {background-color:#f04e54;}
progress::-moz-progress-bar {background-color:#f04e54;}

.videofakefullscreen {height:100%;width:100%;position:fixed;left:0;top:0;z-index:100 !important;background-color:black;}
