@charset "utf-8";
/*서브메인*/
.controls a{position:absolute; top:50%; margin-top:-10px; width:20px; height:20px; display:block;background:url(../images/main/slider_arr.png) no-repeat; font-size:0; z-index:10; background-size:cover}
.controls a.bx-prev{left:10px;background-position:0 0}
.controls a.bx-next{right:10px;background-position:100% 0}

.controls3 {position:relative; background:#CC3; width:68px; float:right}
.controls3 a{position:absolute; top:0; width:40px; height:40px; display:block; background:url(../images/main/slider_arr3.png) no-repeat; font-size:0; z-index:10}
.controls3 a.bx-prev{left:0;background-position:0 center}
.controls3 a.bx-next{right:0;background-position:100% center}
.controls3:after {content:""; display:block; clear:both}

.mSlider-item {position:absolute; left:50%; bottom:5px; text-align:center; height:20px; width:300px; margin:0 auto; margin-left:-150px; z-index:10}
.mSlider-item li {display:inline-block;margin:0 2px}
.mSlider-item li a {display:inline-block;width:11px;height:11px;font-size:0;background:url(../images/main/slider_indicator.png) no-repeat;vertical-align:middle}
.mSlider-item li a.active{background-position:100% 0;width:22px}

.mSlider-item {position:absolute; left:50%; bottom:5px; text-align:center; height:20px; width:300px; margin:0 auto; margin-left:-150px; z-index:10}
.mSlider-item div {display:inline-block;margin:0 2px}
.mSlider-item div a {display:inline-block;width:11px;height:11px;font-size:0;background:url(../images/main/slider_indicator.png) no-repeat;vertical-align:middle}
.mSlider-item div a.active{background-position:100% 0;width:22px}

/*상단배너*/
.sec1 {position:relative; clear:both}
.sec1 .mSlider1 {overflow:hidden}
.sec1 .mSlider1 li {display:inline; float:left}
.sec1 .mSlider1 li img {width:100%}
.sec1 .mSlider1:after {content:""; display:block; clear:both}
.sec1 .mSlider1T {display:none}


/*신규강의*/
.sec2 {clear:both; margin-top:10px; width:100%}
.sec2 .sec2L,
.sec2 .sec2All {width:100%}
.sec2 h2 {font-size:120%; /*font-weight:bold;*/ color:#2b7da7; height:40px; line-height:40px; border:1px solid #ccc; padding-left:2%}
.sec2 .sec2Lpanel,
.sec2 .sec2Allpanel {padding:20px 2% 0; border:1px solid #ccc; border-top:none; min-height:124px; overflow:hidden}
	.listLec {position:relative}
	.listLec img {border:1px solid #eaeaea; float:left; margin-right:10px}
	.listLec li {padding:2px 2%; color:#363c48}
	.listLec li a {font-weight:bold; color:#363c48; letter-spacing:-1px}
	.listLec li a:hover {color:#000}
	.listLec:after {content:""; display:block; clear:both}
.sec2 .sec2R {width:100%; margin-top:10px}
.sec2 .sec2Rpanel {padding:20px 2% 0; border:1px solid #ccc; border-top:none; min-height:124px}
.sec2:after {content:""; display:block; clear:both}

.controls3 {position:relative; background:#CC3; width:68px; float:right}
.controls3 a{position:absolute; top:0; width:40px; height:40px; display:block; background:url(../images/main/slider_arr3.png) no-repeat; font-size:0; z-index:10}
.controls3 a.bx-prev{left:0;background-position:0 center}
.controls3 a.bx-next{right:0;background-position:100% center}
.controls3:after {content:""; display:block; clear:both}

/*로드맵*/
.roadmap {margin-top:10px}
.roadmap img {width:100%}
.roadmap .roadmap-tit {border-left:1px solid #dcdcdc}
.roadmap .roadmap-tit li {display:inline; float:left; width:33.33333%}
.roadmap .roadmap-tit li a {display:block; text-align:center; color:#666; padding:10px 0; border-right:1px solid #dcdcdc; border-top:1px solid #dcdcdc}
.roadmap .roadmap-tit li a.active { background:#388bf5; color:#fff; font-weight:bold}
.roadmap .roadmap-tit:after {content:""; display:block; clear:both}

/*배너*/
.sMbn {margin-top:10px}
.sMbn li a {display:block}
.sMbn li {display:inline; float:left; width:33.33333%}
.sMbn li img {width:100%; max-width:290px}
.sMbn li.tcenter {text-align:center}
.sMbn li.tright {text-align:right}
.sMbn:after {content:""; display:block; clear:both}

/*게시판/교재*/
.sec3 {clear:both; margin-top:10px}
.sec3L{width:100%}
.tabs{ border:1px solid #ccc; padding-bottom:3em;height:150px}
.tabs ul{position:relative; border-bottom:1px solid #ccc;*zoom:1}
.tabs ul:after{content:"";display:block;clear:both}
.tabs li{float:left}
.tabs li a{display:block}
.tabs li a span{display:inline-block;letter-spacing:-1px;cursor:pointer; border-right:1px solid #ccc; height:40px; line-height:40px; text-align:center; width:80px}
.tabs li ul{width:100%; position:absolute; top:5em; left:0; display:none; border:0; min-height:115px;}
.tabs li li{float:none;padding:0.4em 2%;color:#999;*zoom:1;background:url(../img/video/line_dash.gif) repeat-x left bottom;line-height:1.2;margin:0}
.tabs li li:after{content:"";display:block;clear:both}
.tabs li li:first-child{padding-top:0}
.tabs li li a{float:left; border:0; color:#363c48; width:72%; overflow:hidden;white-space:nowrap; text-overflow:ellipsis}
.tabs li.active a{}
.tabs li.active a span{background:#efefef;color:#2b7da7;font-weight:bold}
.tabs li.active li a{}
.tabs li .date{float:right;color:#363c48}
.tabs li li.more{position:absolute;top:-60px;right:0;padding:0;background:none; text-align:center}
.tabs li li.more .btn-more{display:inline-block; width:30px; height:40px; line-height:40px; font-size:120%}

.sec3R{width:100%; margin-top:10px; /*border-bottom:1px solid #ccc*/}
.sec3R h2 {border:1px solid #ccc; border-bottom:none; height:40px; line-height:40px; font-size:120%; /*font-weight:bold;*/ color:#2b7da7; padding-left:20px}
.sec3R h2 .btn-more{display:inline-block; float:right; width:30px; height:40px; line-height:40px; font-size:120% ; text-align:center}
.sec3Rpanel{clear:both; border:1px solid #ccc; padding:20px 10px; overflow:hidden; height:105px}
	.book {position:relative}
	.book img {border:1px solid #eaeaea; float:left; margin-right:10px; width:74px}
	.book li {padding-top:5px; color:#363c48}
	.book li span {text-decoration:line-through}
	.book li strong {color:#ff4800}
	.book li a {font-weight:bold; color:#363c48}
	.book li a:hover {color:#000}
	.book:after {content:""; display:block; clear:both}
.sec3Rpanel:after {content:""; display:block; clear:both}
.sec3:after {content:""; display:block; clear:both}

/*FAQ/고객센터*/
.sec9 {clear:both; margin-top:10px; border:1px solid #d0d0d0; padding-bottom:10px}
.sec9 h2 {border-bottom:1px solid #d0d0d0; height:40px; line-height:40px; font-size:120%; color:#2b7da7; padding-left:1.25em}
.sec9 ul {padding:10px 0; margin:0 auto}
.sec9 .sec9L {display:none}
.sec9 .sec9R {padding-bottom:20px; border-left:none}
.sec9 .sec9R ul {margin:auto; margin-top:10px; width:96%; overflow:hidden;}
.sec9 .sec9R ul li {display:inline-block; width:96%;}
.sec9 .sec9R ul li.boxR {margin-top:10px}
.sec9 .sec9R ul li div {margin:auto; text-align:center}
.sec9 .sec9R ul li div p {display:block; padding:0 5px; width:100%}
.sec9 .sec9R ul li div.box {width:100%; height:auto; padding:22px 0 15px; background:#f2f2f3}
.sec9 .sec9R ul li div.time {width:100%; background:#8eb7cd; color:#fff; padding:3px 0; text-align:center}
.sec9 .sec9R ul li div p span.Number {margin-left:5px; font:600 15px 'NamumBarunGothic'; color:#1e1f21}
.sec9 .sec9R ul li.boxL div p span.L_txt1 {text-align:right; font:600 13px "NamumBarunGothic"; letter-spacing:-1px; color:#1e1f21; margin:5px 0}
.sec9 .sec9R ul li.boxR div p {margin:auto; width:180px;}
.sec9 .sec9R ul li.boxR div p span.R_txt1 {font:600 14px "NamumBarunGothic"; letter-spacing:-1px; color:#1e1f21; margin:0 0 5px}
.sec9 .sec9R ul li.boxR div p span.R_txt2 {width:75px; font:400 12px "NamumBarunGothic"; letter-spacing:-1px; color:#1e1f21}
.sec9 .sec9R p.timeTxt {text-align:center; word-breka:keep-all}
.sec9:after {content:""; display:block; clear:both}

/*FAQ/고객센터 - numufta.com*/
.sec9fta {clear:both; margin-top:10px; border:1px solid #d0d0d0; padding-bottom:10px}
.sec9fta h2 {border-bottom:1px solid #d0d0d0; height:40px; line-height:40px; font-size:120%; color:#2b7da7; padding-left:1.25em}
.sec9fta ul {padding:10px 0; margin:0 auto}
.sec9fta .sec9L {display:none}
.sec9fta .sec9R {padding-bottom:20px; border-left:none}
.sec9fta .sec9R ul {margin:auto; margin-top:10px; width:96%; overflow:hidden;}
.sec9fta .sec9R ul li {display:inline-block; width:96%;}
.sec9fta .sec9R ul li.boxR {margin-top:10px}
.sec9fta .sec9R ul li div {margin:auto; text-align:center}
.sec9fta .sec9R ul li div p {display:block; padding:0 5px;}
.sec9fta .sec9R ul li div.box {width:100%; height:auto; padding:22px 0 15px; background:#f2f2f3}
.sec9fta .sec9R ul li div.time {width:100%; background:#8eb7cd; color:#fff; padding:3px 0; text-align:center}
.sec9fta .sec9R ul li div p span.Number {margin-left:5px; font:600 15px 'NamumBarunGothic'; color:#1e1f21}
.sec9fta .sec9R ul li.boxL div p span.L_txt1 {text-align:right; font:600 13px "NamumBarunGothic"; letter-spacing:-1px; color:#1e1f21; margin:0}
.sec9fta .sec9R ul li.boxR div p {margin:auto; width:180px;}
.sec9fta .sec9R ul li.boxR div p span.R_txt1 {font:600 14px "NamumBarunGothic"; letter-spacing:-1px; color:#1e1f21; margin:0 0 5px}
.sec9fta .sec9R ul li.boxR div p span.R_txt2 {width:75px; font:400 12px "NamumBarunGothic"; letter-spacing:-1px; color:#1e1f21}
.sec9fta .sec9R p.timeTxt {text-align:center; word-breka:keep-all}
.sec9fta:after {content:""; display:block; clear:both}

/* Mobile Device */
/*768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨.
미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다.*/

@media all and (min-width:480px) {
.sec2 .sec2L {float:left; width:49%}
.sec2 .sec2L .listLec {width:100%}
.sec2 .sec2R {float:right; margin-top:0; width:49%}
.sec2 .sec2Rpanel {padding:20px 4% 0}
.sec2 .sec2R .listLec {width:100%}

/*.book {width:40%; float:left; background:url(../images/main/sec2_bar.gif) no-repeat right center; border:none}
.book:after {content:""; display:block; clear:both}*/
}


@media all and (min-width:640px) {
.sMbn {margin-top:30px}
.sec2 .sec2All .listLec {width:48%; float:left; margin:0 1%}
.sec9 .sec9R span {display:inline-block; margin-bottom:0}
.sec9fta .sec9R span {display:inline-block; margin-bottom:0}
}


/* Tablet & Desktop Device */
@media all and (min-width:768px) {
.controls a{width:45px; height:45px; margin-top:-20px}
.controls-s a{width:45px; height:45px; margin-top:-20px}

.sec9 {margin-top:30px; padding-bottom:0}
.sec9 ul {margin:auto; padding:20px 0; width:87%;}
.sec9 .sec9R {border-top:none;}
.sec9 .sec9R ul li {margin-top:none; width:49.4%; margin:0 1px;}
.sec9 .sec9R ul li div.box {width:100%; height:auto; padding:22px 0 5px; background:#f2f2f3}
.sec9 .sec9R ul li div p {display:block; padding:0 5px;}
.sec9 .sec9R ul li.boxR {float:right; margin-top:0px}
.sec9 .sec9R ul li.boxR div p {margin:auto; width:auto;}

.sec9fta {margin-top:30px; padding-bottom:0}
.sec9fta ul {margin:auto; padding:20px 0; width:87%;}
.sec9fta .sec9R {border-top:none;}
.sec9fta .sec9R ul li {margin-top:none; width:49.4%; margin:0 1px;}
.sec9fta .sec9R ul li div.box {width:100%; height:auto; padding:22px 0 5px; background:#f2f2f3}
.sec9fta .sec9R ul li div p {display:block; padding:0;}
.sec9fta .sec9R ul li.boxR {float:right; margin-top:0px}
.sec9fta .sec9R ul li.boxR div p {margin:auto; width:auto;}
}
/* Desktop Device */
@media all and (min-width:980px) {
.sec1 {margin:0}
.sec1 .mSlider1T {display:block}
.sec1 .mSlider1T li {display:inline; float:left; width:25%}
.sec1 .mSlider1T li a {display:block; color:#757575; text-align:center; padding:15px 0; font-size:120%; font-weight:bold; background:#eee url(../images/main/sec1_bar1.gif) no-repeat right center}
.sec1 .mSlider1T li a:hover {color:#000}
.sec1 .mSlider1T li a.last {background:#eee}
.sec1 .mSlider1T:after {content:""; display:block; clear:both}

.sec2 {margin-top:30px}
.sec2 .sec2L {width:68.27586%}
.sec2 .sec2L .listLec {width:48%; float:left; margin:0 1%}
.sec2 .sec2All .listLec {width:31.33333%; float:left; margin:0 1%}
.sec2 .sec2R {width:30.40275%}
.sec2 .sec2Lpanel:after {content:""; display:block; clear:both}

.roadmap {margin-top:30px}

.sec3 {margin-top:20px}
.sec3L{float:left; width:65%}
.sec3R{float:right; width:33%; margin:0; overflow:hidden; height:192px}
}