@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 


/* wrap_main영역 */

/* welcome_quick */
/* #welcome_quick {z-index:100;float: right;margin-left:1101px; position: fixed; top:270px;width:143px;height:375px;background:url(../img/intro/20150113_quick_side.png) no-repeat} */
#welcome_quick {z-index:1000;float: right;position: fixed; left:50%; top:270px;/*position:absolute;left:50%;top:-1px;*/width:100px;height:548px;margin-left:42%;}
#welcome_quick p img {display:block;width:100px;margin:0 auto;}
#welcome_quick ul {position:relative;width:100px;/*padding-top:184px;height:581px;*/padding-top:234px;height:411px;background:url(../img/sh_menu_13.png) no-repeat;background-size:cover;}
#welcome_quick ul li {width:100px;height:21px;margin-bottom:3px;text-indent:-9999px;}
#welcome_quick ul li a {display:block;width:100px;height:21px;text-indent:-9999px;}
#welcome_quick .naver_t a {position:absolute;left:0;bottom:0;display:block;width:100px;height:90px;}

/* visual */
div.visual						{width:1099px; overflow:hidden; margin:0 auto; position:relative; height:450px}
div.visual a.prev				{position:absolute; top:190px; left:0; display:block; width:58px; height:58px; background:url(../img/m_visual_prev.png) no-repeat 0 0; z-index:100}
div.visual a.prev:hover			{background:url(../img/m_visual_prev_over.png) no-repeat 0 0}
div.visual a.next				{position:absolute; top:190px; right:0; display:block; width:58px; height:58px; background:url(../img/m_visual_next.png) no-repeat 0 0; z-index:100}
div.visual a.next:hover			{background:url(../img/m_visual_next_over.png) no-repeat 0 0}
ul.m_visual li						{position:relative;}
.m_visual .btn {position:absolute;bottom:62px;right:247px;}
.m_visual .btn a {display:inline-block;width:185px;height:50px;text-indent:-9999px;}

/* m_cont01 - 공지사항, 우수학생 동영상  */
div.m_cont01								{width:1100px; margin:34px auto 0; overflow:hidden;}
div.m_cont01 h2								{padding-left:6px;padding-bottom:18px;border-bottom:1px solid #ddd; /*background:url(../img/h2_bar.png) no-repeat 0 90%;*/ font:bold 18px/22px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#333;}

/* div.m_cont01 .news_day						{width:700px; float:left;} */

div.m_cont01 .news_day						{width:685px; float:left;}
div.m_cont01 .news_day .tabArea			{display:inline-block; position:relative; width:100%; height:auto;}
div.m_cont01 .news_day .news				{position:relative; width:27.8%; height:147px; top:0; float:left; margin-right:0px; border:1px solid #ddd; padding:18px;}
div.m_cont01 .news_day .list3 {border-left:0 none;border-right:0 none;}
div.m_cont01 .news_day .news	h2	span	{float:right; text-align:right; color:#ddd; font-weight:normal; font-size:1.5em;}
div.m_cont01 .news_day .news	h2	span	a {color:#ddd;}
/*div.m_cont01 .news_day .news .more			{position:absolute; right:10px;}*/
div.m_cont01 .news_day .news ul				{ width:95%; height:77px;margin-top:15px; padding:0 10px;}
div.m_cont01 .news_day .news ul li			{ padding:1px 0 0 12px; overflow:hidden; /*text-overflow:ellipsis; white-space:nowrap;*/ background:url(../img/news_dot.png) no-repeat 0 center; }
div.m_cont01 .news_day .news ul li a		{ width:92%; float:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:normal 13px/22px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#333; letter-spacing:-0.5pt;}
div.m_cont01 .news_day .news ul li a:hover	{color:#8d1825; text-decoration:underline}
div.m_cont01 .news_day .news ul li span		{float:right; font-family: 'NanumGothic', dotum ,  '맑은고딕' , 'MalgunGothic'; color:#666 }

.success {float:right;border:1px solid #ddd;}

div.video							{width:400px; float:right}
.video span img {width:100%;}
.video h2 {z-index:90;position:absolute; bottom:0; left:1px; width:449px; padding:7px 8px 9px; margin-bottom:0; font:bold 14px/17px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#ccc;background:rgba(0, 0, 0, 0.4);background-image:none;}
/*
div.video .video_pic				{position:relative;}
div.video .video_pic a				{position:absolute;top:90px;left:172px;}
*/

/* mid_banner1 */
.mid_banner1 {width:1100px;margin:12px auto 15px;}
.mid_banner1 ul {overflow:hidden;}
.mid_banner1 ul li {float:left;margin-right:1.3em;margin-right:0.87em \0/IE8+9;}
.mid_banner1 ul li:last-child {margin-right:0;}

/* mid_banner2 */
.mid_banner2 {width:1100px;margin:12px auto 15px;}
.mid_banner2 ul {overflow:hidden;}
.mid_banner2 ul li {float:left;width:350px;height:210px;overflow-y:hidden;margin-right:1.6em;margin-right:1.129em \0/IE8+9;border:1px solid #ddd;}
.mid_banner2 ul li:last-child {margin-right:0;}
.mid_banner2 ul li img {width:100%;}

/* m_cont02 -  Quick메뉴, 교육과정 바로가기, 무료학습컨텐츠, 수업샘플동영상 */

/* div.m_cont02						{width:1100px; margin:50px auto 0; overflow:hidden;} */
div.m_cont02						{width:1100px; margin:0; overflow:hidden;}

/* div.mid_banner 								{margin-bottom:80px;background:url(../img/quick_bg.png) no-repeat 0 86px } */
/* div.mid_banner 								{margin-bottom:80px;background:#ffffff;} */
div.mid_banner 									{background:#f7f8fa;}
div.mid_banner ul 		 		 			{/*width:32.9%;*/}
div.mid_banner ul li		 				{display:inline-block;width:100px;margin-right:20px;/*width:100%; height:68px; border:1px solid #eee;*/}
div.mid_banner ul li.noMg					{margin-right:0;}
div.mid_banner ul li span					{display:block; color:#6e6e6e; margin-top:20px; }

div.m_cont02 .m_banner				{width:100%; float:left; position:relative; z-index:10;margin-bottom:60px;}
div.m_cont02 .m_banner ul				{position:relative; overflow:hidden; z-index:10; }
div.m_cont02 .m_banner ul li				{float:left;width:180px;border:1px solid #eee;}
div.m_cont02 .m_banner ul li a			{display:block; width:180px; height:180px; /*padding:30px 0 0 33px; */font:bold 15px/14px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#333; }
div.m_cont02 .m_banner ul li a:hover		{width:180px; height:180px;background:rgba(159,7,16,0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#309f0710,endColorstr=#309f0710);}

div.m_cont02 .quickArea					{overflow:hidden; width:1100px; margin:0 auto; position:relative; margin-top:12px;}

div.m_cont02 .m_list { position:relative; float:left; display:inline-block; width:685px; height:245px; }
div.m_cont02 .m_list ul { width:210px; z-index:10; }
div.m_cont02 .m_list ul li	{float:left; text-align:center; width:210px; height:40px; border-bottom:1px solid #eee; background:#616161; color:#ffffff;}
div.m_cont02 .m_list ul li:first-child { }
div.m_cont02 .m_list ul li:last-child {}
div.m_cont02 .m_list ul li	a {display:block; color:#ffffff; font-size:1.1em; line-height:40px; cursor:pointer;}
div.m_cont02 .m_list ul li._on	{/*background:#993333;*/background:#D81E1F;}

div.m_cont02 .m_list span { position:absolute; right:0; top:0; width:475px; display:none; }
div.m_cont02 .m_list .on { display:block; width:475px; height:100%; }
div.m_cont02 .m_list .on a { width:100%; height:100%; }
div.m_cont02 .m_list .on a img { width:475px; height:245px; }

/*
div.m_cont02 .m_list #m_list_result span { display:none; }
div.m_cont02 .m_list #m_list_result ._on { display:block; width:100%; height:100%; }
div.m_cont02 .m_list #m_list_result ._on a { width:100%; height:100%; }
div.m_cont02 .m_list #m_list_result ._on a img { width:475px; height:245px; }
*/
/* div.m_cont02 .m_quick					{display:inline-block; width:646px; border:1px solid green;} */
.m_quick					{display:inline-block; width:100%; margin-bottom:30px;}
.m_quick ul				{position:relative; z-index:10; }
/* .m_quick ul li				{float:left; text-align:center; width:210px; height:100px; border:1px solid #eee;} */
.m_quick ul li				{float:left; text-align:center; width:16.4%; height:150px; border:1px solid #eee; background:#ffffff;}
.m_quick ul li:first-child		{}
.m_quick ul li:nth-child(4)		{}
.m_quick ul li:nth-child(5)		{}
.m_quick ul li:nth-child(6)		{}
.m_quick ul li:last-child		{}
.m_quick ul li:hover			{border-color:#990000; }

.m_quick .m_quick_cycle					{display:inline-block; width:100%; margin-left:5px;}
.m_quick .m_quick_cycle ul			{position:relative; width:1095px;  z-index:10;margin:0 auto;}
/* .m_quick .m_quick_cycle ul li		{float:left; text-align:center; width:16.4%; height:150px; border:1px solid #eee; background:#ffffff;} */
.m_quick .m_quick_cycle ul li		{float:left; text-align:center; width:16.4%;  height:auto; border:1px solid #eee; background:#eee; padding:5px 0;}
.m_quick .m_quick_cycle ul li.t_1 {border:1px solid #FBEAEB;background:#FBEAEB;}
.m_quick .m_quick_cycle ul li.t_2 {border:1px solid #D8EDF1;background:#D8EDF1;}
.m_quick .m_quick_cycle ul li.t_1:hover	{border:1px solid red;}
.m_quick .m_quick_cycle ul li.t_2:hover	{border:1px solid #4099AC;}
.m_quick .m_quick_cycle ul li	a	{width:100%;height:100%; text-align:center; }
.m_quick .m_quick_cycle ul li	p	{text-align:left; font-size:1em; padding:10px; font-weight:bold; color:#444444;}
.m_quick .m_quick_cycle ul li	span	{display:block; text-align:left;  font-size:0.9em; font-weight:normal; color: #5a5a5a;}

.m_quick ul li a			{display:block; width:100%; height:102px;/* padding-top:18px;*/ color:#333}
/*
div.m_cont02 .m_quick ul li a:hover		{background:rgba(159,7,16,0.3);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#309f0710,endColorstr=#309f0710);}
*/
.m_quick ul li img			{margin-bottom:10px}

div.sketch							{position:relative;}
div.sketch h2						{z-index:90;position:absolute; bottom:0; left:1px; width:449px; padding:7px 8px 9px; margin-bottom:0; font:bold 14px/17px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#ccc;background:rgba(0, 0, 0, 0.4);background-image:none;}
div.sketch .more					{z-index:100;position:absolute; bottom:7px; right:0;}
div.sketch .more a 				{margin-right:5px;}
div.sketch .sketch_pic				{position:relative;}
div.sketch .sketch_pic a img 		{position:absolute;top:61px;left:208px;}


	
/* enjoyArea - 강사소개 */
div.enjoyArea									{overflow:hidden;width:1100px;margin:20px auto;/*background:url(../img/tickets_bg.gif) repeat 0 0*/}
div.enjoyArea h2								{text-align:center; margin-bottom:23px;font-weight:500;font-size:1.2em;}

div.teacher										{float:left;width:70.8%;/* margin-left:40px; */margin-bottom:30px; padding:15px 0;border:1px solid #ccc;}
div.teacher .tit								{text-align:center; font:normal 15px/14px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#777}
div.teacher div								{position:relative; overflow:hidden; width:100%; height:133px;/*width:1000px;height:200px;*/ margin:0 auto;}

div.teacher ul.teacher_list						{width:3200px; margin:0 auto;}
div.teacher ul.teacher_list li					{position:relative;width:122px;/*width:140px;*/ float:left; margin-left:9px;/*margin:0 30px;*/}
div.teacher ul.teacher_list li p img		{width:102px; height:131px; /*width:140px;height:190px;*/border:1px solid #ddd;}

div.teacher div .teacher_btn .prev		{position:absolute; /*left:12px;*/left:0; top:43px; z-index:100}
div.teacher div .teacher_btn .next		{position:absolute; right:0; top:43px; z-index:100}
div.enjoyArea .f_img {float:right;width:300px;/* margin-right:40px;*/}

/* 기업 reference */

#rollArea{position:relative; z-index:99; padding-bottom:10px;border-top:2px solid #9f0710; background:#f7f7f7;}
#rollArea .rollBanner{width:960px; overflow:hidden; margin:auto;}
#rollArea .rollBanner .controller{width:60px; float:left; overflow:hidden; margin-top:27px;}
#rollArea .rollBanner .controller a.stopBt{display:block; width:24px; height:24px; float:left; overflow:hidden; background:url('../img/footer_roll_bt.gif') no-repeat 0 0; text-indent:-5000px;}
#rollArea .rollBanner .controller a.playBt{display:block; width:25px; height:24px; float:left; margin-right:3px; overflow:hidden; background:url('../img/footer_roll_bt.gif') no-repeat -24px 0; text-indent:-5000px;}
#rollArea .rollBanner .controller span{display:block; float:left; padding:0 5px; line-height:17px; color:#eee}
#rollArea .rollBanner .rollDiv{position:relative; width:890px; height:25px; float:right; overflow:hidden; padding:22px 0 21px;}
#rollArea .rollBanner .rolling{position:absolute; top:22px; left:0; overflow:hidden;}
#rollArea .rollBanner .rolling a{display:block; float:left; margin:0 16px;}

/*banner*/
#rollArea .rollBanner .jwxe_div {display:block;position:absolute;left:0;top:18px; background:#ffffzff;}
#rollArea .rollBanner .jwxe_div .jwxe_a {display:block;position:absolute;text-decoration:none;left:0;top:0;width:120px;}
#rollArea .rollBanner .jwxe_div .jwxe_banner2 {display:block;position:absolute;list-style-type:none;overflow:hidden;left:0;top:0;height:40px;width:890px;}
#rollArea .rollBanner .jwxe_div .jwxe_banner2 li {display:inline;}
#rollArea .rollBanner .jwxe_div .jwxe_banner2 li img {display:inline-block;width:150px;height:44px;}

/* reference_list - 기업 레퍼런스
div.reference_list									{width:100%; text-align:center; margin:60px 0;}
div.reference_list h2							{margin-bottom:30px;}
div.reference_list ul				 			{display:inline-block; width:1000px;}
div.reference_list ul li			 			{position:relative; float:left; border:1px solid #eee;}
div.reference_list ul li img 			{width:164px;}
*/
.banner {width:100%; text-align: center;/* background:#f5d290 url("../img/top_event_pat.jpg") repeat-x;*/}

.m_col {
	color: #990000;
}

.m_banner {display:none;}
#m_footer {display:none;}

@media screen and (max-width:1300px) {
	#welcome_quick {display:none;}
}

@media screen and (max-width:700px) {
	.banner img {width:100%;}
	.pc_banner {display:none;}
	.m_banner {display:block;}
	.onr_gnb {position:relative;}
	.onr_gnb_list {display:none;position:absolute;right:0;bottom:37px;z-index:1000;}
	div#wrap_main .visual_wrap {width:100%;}
	div.visual {width:100%; height:200px}
	div.visual .img_cycle {width:100%;}
	div.visual a.prev, div.visual a.next {top:58px;width:30px;height:30px;background-size:cover;}
	div.visual a.prev:hover, div.visual a.next:hover {background-size:cover;}
	.m_visual .btn {bottom:20px;right:24%;}
	.m_visual .btn a {width:50px;height:20px;}

	div.m_cont01 {width:100%;margin-top:10px !important;}
	div.m_cont01 h2 {font-size:16px;}
	div.m_cont01 .news_day {overflow:hidden;float:none;width:88%;margin:0 auto;}
	div.m_cont01 .news_day .tabArea {width:100%;height:auto;}
	div.m_cont01 .news_day .news {width:86%;float:none;height:auto;margin:0 auto 10px;font-size:16px;}
	div.m_cont01 .news_day .list3 {border:1px solid #ddd;}
	div.m_cont01 .news_day .news ul {padding:0.5em;}
	div.m_cont01 .news_day .news ul li a {width:92%;}
	div.video {width:100%;float:none;margin:0 auto 10px;}
	div.video img {width:100%;}
	div.video .video_pic a {left:40%;top:28%;width:100% !important;height:auto !important;}
	div.m_cont02 .quickArea {width:87%;margin:0 auto;}
	div.m_cont02 .m_list {float:none;width:100%;height:auto;margin-bottom:10px;}
	div.m_cont02 .m_list ul {width:100%;}
	div.m_cont02 .m_list ul li {display:none;}
	div.m_cont02 .m_list span {position:static;width:100%;height:auto;}
	div.m_cont02 .m_list .on {width:100%;height:auto;}
	div.m_cont02 .m_list .on a img {width:100% !important;height:auto;}
	div.m_cont02 div.sketch {float:none;width:100%;}
	.sketch_cycle {height:142px;}
	div.m_cont02 div.sketch .sketch_pic a img {left:32%;top:20%;}
	.mid_banner1 {width:89%;margin:0 auto;}
	.mid_banner1 ul li {float:none;width:100%;margin-bottom:10px;}
	.mid_banner1 ul li.event {margin-top:10px;}
	.mid_banner1 span img {width:100%;}
	div.sketch .sketch_pic a img {left:40%;top:12%;}
	div.mid_banner ul li {margin-left:3px;margin-right:3px;margin-bottom:10px;}
	.customer {display:block;width:100%;}
	.mid_banner2 {width:89%;margin:0 auto;}
	.mid_banner2 ul li {float:none;width:99%;height:auto;margin-bottom:10px;}
	.mid_banner2 ul li a img {display:block;width:100%;}
	div.enjoyArea {width:100%;}
	div.teacher {width:99%;margin-left:0;}
	div.teacher div {width:100%;padding-right:18px;}
	div.teacher ul.teacher_list li {margin:0 1px;}
	div.teacher div .teacher_btn .prev {}
	div.teacher div .teacher_btn .next {right:10px;}
	div.enjoyArea .f_img {float:none;width:89%;margin:0 auto;}
	div.enjoyArea .f_img img {width:100%;}
	.m_quick .m_quick_cycle {margin-left:0;}
	.m_quick .m_quick_cycle ul {width:100%;}
	.m_quick .m_quick_cycle ul li {width:100%;}
	.m_quick .m_quick_cycle ul li p {text-align:center;}
	.m_quick .m_quick_cycle ul li span {text-align:center;}
	#rollArea {overflow:hidden;}
	#rollArea .rollBanner .controller {width:5.5%;}
	#rollArea .rollBanner .rollDiv {width:94%;}
	
	.success {position:relative;float:none;width:87%;margin:0 auto 10px;overflow:hidden;}
	.success img {display:block;width:100%;} 
	.success h3 {z-index:90;position:absolute; bottom:0; left:1px; width:449px; padding:7px 8px 9px; margin-bottom:0; font:bold 15px/17px "Malgun Gothic" , "Dotum" , "Arial" , "verdana" , "Helvetica"; color:#ccc;background:rgba(0, 0, 0, 0.4);background-image:none;}
	#thesms_sms_call {display:none;}
	#m_footer {display:block;}
}