@charset "utf-8";

@import url(default.css); /* 페이지 초기화 */
@import url(common.css); /* 공통부분 */
@import url(layout.css); /* 레이아웃 */
@import url(board.css); /* 게시판스타일 */

html, body { background:url(/champ/img/main/bg_main_visual.gif) repeat-x 0 114px !important;}
#contents { float:left; width:100%;}
h4 { font-size:0;}

.visualArea { width:998px; height:461px;}

.area1 { float:left; width:100%; height:35px; padding:19px 0 0 0; border-bottom:1px solid #ebebeb;}
.area1 .leftArea { float:left; width:429px;}
.area1 .leftArea p.txt_tip { display:inline; float:left; width:149px; margin:0 110px 0 5px;}
.area1 .leftArea ul { float:left; width:120px;}
.area1 .leftArea ul li { display:block; height:20px; padding:4px 0 0 0; background:url(/champ/img/main/icon_no1.gif) no-repeat 100% 0; color:#363636;}
.area1 .leftArea ul li.list1 { background-image:url(/champ/img/main/icon_no1.gif) }
.area1 .leftArea ul li.list2 { background-image:url(/champ/img/main/icon_no2.gif) }
.area1 .leftArea ul li.list3 { background-image:url(/champ/img/main/icon_no3.gif) }
.area1 .rightArea { float:left; width:560px;}
.area1 .rightArea ul { float:right; margin:3px 0 0 0; }
.area1 .rightArea ul li { float:left; background:url(/champ/img/main/bg_line_gray.gif) no-repeat 100% 50%; padding:0 17px 0 15px;}
.area1 .rightArea ul li.last {background:none; padding: 0 0 0 15px;}

.area2 { float:left; width:100%; height:161px;}
.infobtnarea{width:600px; float:left; margin-top:15px}
.infobtnarea h4{ text-align:center; margin-bottom:10px}
.infobtnarea h4 span{ background:#f3f3f3; border-radius:30px; padding:12px 70px; display:inline-block; font-weight:bold; color:#252525; font-size:14px; }
.infobtnarea .studyinfo{ border-right:1px #e9e9e9 solid; width:48%; float:left}
.infobtnarea .csinfo{width:48%; float:left; margin-left:12px}
.infobtnarea li{display:inline-block;position:relative;float:left; margin:0 2px}
.infobtnarea li>a{display:inline-block;}

.area2 .tvArea { position:relative; float:left; width:370px; height:112px; background:url(/champ/img/main/bg_magin.gif) no-repeat 132px 0;}
.area2 .tvArea p.tv { float:left; width:132px; margin:0 38px 0 0;}
.area2 .tvArea h4 { margin:39px 0 3px 0;}
.area2 .tvArea p.btn_click { position:absolute; right:37px; top:21px;}
/*
.area2 ul.movieList { float:left; width:370px; height:38px; padding:11px 0 0 0; background:url(/champ/img/main/bg_box_grad.gif) 0 repeat-x;}
.area2 ul.movieList li { float:left; text-align:center; padding:0 25px; background:url(/champ/img/main/bg_line_gray2.gif) no-repeat 100% 50%;}
.area2 ul.movieList li.last { background:none;}
*/
.area2 ul.movieList { float:left; width:370px; height:49px;background:url(/champ/img/main/bg_box_grad.gif) 0 repeat-x;}
.area2 ul.movieList li { float:left; width:73px; text-align:center; padding:16px 6px 0 2px; background:url(/champ/img/main/bg_line_gray2.gif) no-repeat 100% 50%; height:33px;}
.area2 ul.movieList li.last { background:none;}
.area2 ul.movieList li.title { float:left; width:38px; background:none;}

p.txtEdu { float:left; width:998px; height:62px; padding:11px 0 0 0; text-align:right;}



/* layerpop_10월조기등록이벤트 */
.pop_early{ overflow:hidden; z-index:10; position:absolute; width:430px; height:550px; left:100px; top:114px}
.pop_early .popclose {position:absolute; right:10px;top:10px; z-index:810; cursor:pointer}
.pop_early p {position:absolute; right:18px; bottom:8px; color:#39567e; font-size:11px}
.pop_early input { vertical-align:middle}
.pop_early label {cursor: pointer;display: inline-block; top:1px; position: relative }

/* layerpop_10월조기등록이벤트:대상자 */
.pop_early02 { overflow:hidden; z-index:10; width:430px; max-height:550px; position:absolute; top:114px; left:100px; background:#fff; border:1px #ccc solid; text-align:center}
.pop_early02 .title{margin-top:22px; float:left}
.pop_early02 .early_con{ display:inline-block}
.pop_early02 .early_con li{ margin:0 24px 10px 0}
.pop_early02 .gobtn{ margin:20px 0 20px 20px; text-align:center; display:inline-block}
.pop_early02 .popclose {position: absolute; top:10px; right:10px; z-index:999; }
.pop_early02 p {position:absolute; right:10px; bottom:5px; color:#39567e; font-size:11px; z-index:999;}
.pop_early02 label {cursor: pointer;display: inline-block; top:1px; position: relative }


/* layerpop_고객센터 휴무안내 pop */
.layerBodyWrap {width:1000px; display:inline-block; position:absolute; left:50%; margin-left:-500px;  z-index:10;}
.pop_closed { overflow:hidden; z-index:1000; width:315px; height:300px; position:absolute; top:140px; right:50px; text-align:center}
.pop_closed .popclose {position: absolute; top:15px; right:15px; z-index:999; }
.pop_closed p {position:absolute; right:20px; bottom:10px; color:#39567e; font-size:11px; z-index:999;}
.pop_closed label {cursor: pointer;display: inline-block; top:1px; position: relative }


/*20180821 이러닝 서비스 종강일 안내 팝업*/
#cl_end{text-align:center; background:#fff; width:450px; height:265px; position:absolute; top:135px; right:0px; border-top:5px #ffd764 solid; border-left:5px #ffd764 solid; border-right:5px #ffa304 solid; border-bottom:5px #ffa304 solid; z-index:3000}
#cl_end .close { position:absolute; top:3px; right:3px;}
#cl_end h3{margin:30px 0 23px 0; font-family:NanumGothic;}
#cl_end h4{ font-size:13px; color:black; font-family:NanumGothic;}
#cl_end .cl_text{color:black; background:#f3f2f1; width:95%; border-radius:15px; padding:15px 0; text-align:center; font-size:12px;font-family:'NanumGothic'; line-height:1.5; display:inline-block; margin-top:1px;}
#cl_end .close{ position:absolute; top:5%; right:3% }
#cl_end .today{ position:absolute; bottom:5px; right:2%; font-size:12px; font-family:NanumGothic; bottom:2%; right:4%;}
#cl_end .date{font-size:14px; font-weight:bold; font-family:NanumGothic;}
#cl_end .call{color:#555; margin-top:10px; font-family:NanumGothic;}
#cl_end .cl_text p{font-size:13px;}
#cl_end .ch_date{font-weight:bold;}

/* layerpop_고객센터 휴무안내 pop */
.layerBodyWrap {position:absolute; top:0; width:1000px; left:50%; margin-left:-500px;}
.pop_CSclosed {  z-index:1001; position:absolute; top:504px; left:200px; text-align:center}
.pop_CSclosed .popclose {position: absolute; top:15px; right:15px; z-index:999; }
.pop_CSclosed p {position:absolute; right:20px; bottom:10px; color:#39567e; font-size:11px; z-index:999;}
.pop_CSclosed label {cursor: pointer;display: inline-block; top:1px; position: relative }


/* layerpop_190724 고객센터 휴무안내 pop */
.layerBodyWrap {position:absolute; top:0; width:1000px; left:50%; margin-left:-500px;}
.pop_CSclosed {  z-index:300; position:absolute; top:115px; left:84%; text-align:center; margin-left:-162px;}
.pop_CSclosed .popclose {position: absolute; top:15px; right:15px; z-index:999; }
.pop_CSclosed p {cursor: pointer;position:absolute; right:20px; bottom:121px; color:#39567e; font-size:11px; z-index:999;}
.pop_CSclosed label {cursor: pointer;display: inline-block; top:1px; position: relative }
.pop_CSclosed .cs {position:relative;  bottom:169px; width:275px; font-size:13px; color:#333; left:25px; line-height:1.4;}
.pop_CSclosed .notice {text-decoration:underline; font-weight:600; position:relative; top:6px;}
.pop_CSclosed .date {color:#2762ac; font-weight:600; }


/*학습자 매뉴얼 200423*/
.stu_menual{display:none;position:absolute;top:0;left:128px;width:146px;background:#ebebeb;border-radius:6px;margin-bottom:0;padding:11px;z-index:1;box-shadow:1px 1px 5px;}
.stu_menual .bg_arrow{display:inline-block;position:absolute;top:30px;left:-6px;background:#ebebeb;width:14px;height:14px;transform:rotate(45deg);z-index:1;}
.lst_menual{display:inline-block;width:auto;}
.lst_menual>li{float:left;margin:0;margin-top:4px;width:100%;}

.lst_menual>li>a{display:block;}