@charset "UTF-8";

#container { position:relative; width: 100%; }
.container:after { clear:both; float:none; content:""; display:block; height:0;}
#container .contents { background:none; min-height:827px;}
.hrline {clear:both; content:""; display:block; float:none;}

/* 메인콘텐츠 배경 */
.contents01 { position:relative; height: 655px; overflow: hidden; background: url(/happyedu/images/main/bg_top.jpg) no-repeat center top; z-index:2;}
.contents02 { position:relative; height: 430px; padding-top: 50px; overflow: hidden; background: url(/happyedu/images/main/bg_mid.jpg) no-repeat center top; }
.contents03 { position:relative; height: 340px;/* height: 467px; padding-top: 50px; */ overflow: hidden; background: #FFFDEE; }

/* 상단 비주얼 홍보이미지 */
.contents01 .c1m1  { position:relative; width: 840px; height:610px; padding-top: 45px; float: left; }
.contents01 .c1m1vis { position:relative; width: 560px; height:610px; float:left; background: #fff; }
.contents01 .c1m1vis .bx-wrapper .bx-viewport #slider_visual li img { width: 100%!important; height: 100%!important; }
.contents01 #c1m1vis .control {position:absolute;left:0;bottom:0;width:100%;height:60px;margin:0px;background:url(../../images/main/mc_vis_control2.png) repeat-x 0 0;text-align:center}
.contents01 #c1m1vis .control button {display:block;position:absolute;top:15px;float:none; padding:0 10px; width:31px;height:31px;background:url(../../images/main/img_main_tiny.png) no-repeat 0 -380px;font-size:0;vertical-align:top; z-index: 10002; }
.contents01 #c1m1vis .control .btn_prev {left:30px;background-position:0 -300px}
.contents01 #c1m1vis .control .btn_next {right:30px;background-position:0 -340px}
.contents01 #c1m1vis .bx-controls { position:absolute;bottom:0px; width:100%; height:40px; background:none; color:#fff; line-height:40px; text-align:center; z-index: 1001;}

.contents01 #c1m1vis .bx-controls .bx-pager {	position: absolute;	bottom: -5px;	width: 100%; }
.contents01 #c1m1vis .bx-controls .bx-pager {	text-align: center;	font-size: .85em;	font-family: Arial;	font-weight: bold;	color: #666; }
.contents01 #c1m1vis .bx-controls .bx-pager .bx-pager-item,
.contents01 #c1m1vis .bx-controls .bx-controls-auto .bx-controls-auto-item {	display: inline-block;	*zoom: 1;	*display: inline; }
.contents01 #c1m1vis .bx-controls .bx-pager.bx-default-pager a {	background: #666;	text-indent: -9999px;	display: block;	width: 9px;	height: 9px;	margin: 0 3px;	padding:0px;	outline: 0;	border:solid 1px #fff; 	-moz-border-radius: 50%;	-webkit-border-radius: 50%;	border-radius: 50%;	background:transparent; }
.contents01 #c1m1vis .bx-controls .bx-pager.bx-default-pager a.active { background:#fff;}

/* 상단 프로그램 신청현황 - 달력 영역 */
.contents01 .c1m2 {width:280px; height:610px; float:right;  background:#3b3b3b; }
.contents01 .c1m2 .caltop { background:url(../../images/main/caltopbg.png); height:88px;  text-align:center; color:#fff; } 
.contents01 .c1m2 .caltop h3 {font-size: 24px; padding:20px 0 5px; }
.contents01 .c1m2 .caltop p {font-size:1.231em; padding:0; }
.contents01 .c1m2 .calBox  {height:275px; border-bottom:solid 1px #454545; padding:0 10px;  }
.contents01 .c1m2 .calBox  table { }
.contents01 .c1m2 .calBox  thead th { color:#ec5644; font-size:0.923em; height:45px;}
.contents01 .c1m2 .calBox  tbody td  {color:#fff; font-size:1.154em; text-align:center; height:32px;line-height:25px; padding:5px 0 0}
.contents01 .c1m2 .calBox  tbody td a {color:#fff;}
.contents01 .c1m2 .calBox  tbody td.on{ background:url(../../images/main/img_main_tiny.png)  no-repeat 17px -847px; }
.contents01 .c1m2 .calBox  tbody td.active {background:#ea5b49;}
.contents01 .c1m2 .calBox .blue { color: #82BDFF; }
.contents01 .c1m2 .calList { height:176px; overflow: hidden; padding:10px 0 0 10px; color:#fff; font-size:0.923em; border-bottom:solid 1px #454545;}
.contents01 .c1m2 .calList li { display: inline-block; padding:3px 0 3px; height: 14px; overflow: hidden; text-overflow: ellipsis; line-height: 1.3em;  }
.contents01 .c1m2 .calList a {color:#fff; font-size:1.154em;}
.contents01 .c1m2 .calList .placeTypeA {display:inline-block; margin-right:7px; background:#4864dc; text-align:center; width:15px; line-height:15px; height:14px; padding:1px 0 0;}
.contents01 .c1m2 .calList .placeTypeB {display:inline-block; margin-right:7px; background:#62c162; text-align:center; width:15px; line-height:15px; height:14px; padding:1px 0 0;}
.contents01 .c1m2 .calList .placeTypeC {display:inline-block; margin-right:7px; background:#8c48dc; text-align:center; width:15px; line-height:15px; height:14px; padding:1px 0 0;}
.contents01 .c1m2 .calList .placeTypeD {display:inline-block; margin-right:7px; background:#16a074; text-align:center; width:15px; line-height:15px; height:14px; padding:1px 0 0;}
.contents01 .c1m2 .calList .placeTypeG {display:inline-block; margin-right:7px; background:#ff0066; text-align:center; width:15px; line-height:15px; height:14px; padding:1px 0 0;}
.contents01 .c1m2 .calList .placeTypeH {display:inline-block; margin-right:7px; background:#ff9933; text-align:center; width:15px; line-height:15px; height:14px; padding:1px 0 0;}
.contents01 .c1m2 .more { color:#fff; line-height:60px; display:block; text-align:center; background:url(../../images/main/img_main_tiny.png)  no-repeat 50% -873px; font-size:0.846em;}

/* 팝업존 */
.c1m3  { width: 440px; height:610px; position:relative; float:right; padding-top: 45px;  }
#c1m4 { width: 440px; height: 370px; position:relative; overflow: hidden; }
#c1m4 .control {position:absolute;left:0;top:25px;width:100%;height:40px;margin:0px;text-align:center}
#c1m4 .control button {display:block;position:absolute;top:8px;float:none; padding:0 -10px; width:37px;height:37px;background:url(../../images/main/img_main_tiny.png) no-repeat 0 -380px;font-size:0;vertical-align:top; }
#c1m4 .control .btn_prev {right:103px;background-position:0 -140px}
#c1m4 .control .btn_next {right:25px;background-position:0 -190px}
#c1m4 .control .btn_stop {right:64px;background-position:0 -420px}
#c1m4 .control .btn_play {display:none;right:64px;background-position:0 -470px}
#c1m4 .bx-controls {position:absolute;bottom:0px;left:25px; margin-left:-50px;width:100px;height:40px;background:none;color:#fff;line-height:40px;text-align:center;}
#c1m4 #slider_popup { height: 370px; background: #fff; }
#c1m4 #slider_popup li { height: 100%!important; }
#c1m4 #slider_popup li img { width: 100%!important; height: 100%!important; }

/* 퀵메뉴 바로가기 */
.c1m5 { position: relative; }
.c1m5 .quick_menu { overflow: hidden; }
.c1m5 .quick_menu li { float: left; width: 50%; height: 240px; text-align: center; }
.c1m5 .quick_menu li h4 { padding: 40px 0 15px 0; font-size: 24px; color: #fff; }
.c1m5 .quick_menu li:nth-child(1) { background: #00969F; }
.c1m5 .quick_menu li:nth-child(2) { background: #3375D0; }

.btnTypeA { color:#fff !important; font-size:1.077em; line-height:32px; height:32px; padding:0 18px 0 23px; border:solid 1px #fff; display:inline-block; margin: 14px 0 14px 0px; }
.btnTypeA span{ background:url(../../images/main/btnTypeDarr.png) no-repeat; display:inline-block; width:5px; height:7px; margin-left:12px;}


/*갤러리1 교육현장스토리*/
.contents02 .c2m1 { position: relative; float: left; width: 380px; height:406px; margin-right: 20px; border-top: 1px solid #555; }
.contents02 .c2m1 h2 { margin: 18px 0 15px 5px; font-size: 24px;}
.contents02 .c2m1  .more { position: absolute; right: 0; top: 20px; padding-right: 15px; color: #888; background: url(/happyedu/images/main/btn_more.gif) right 50% no-repeat; }
.contents02 .c2m1 ul.c2m1_list { width: 90%; height: 330px; overflow: hidden; padding: 5px 0 0 0; }
.contents02 .c2m1 ul.c2m1_list li { height: 100px; padding: 0px 0 15px 0; }
.contents02 .c2m1 ul.c2m1_list .img_area { float: left; width: 148px; }
.contents02 .c2m1 ul.c2m1_list .img_area img{ width: 128px; height: 88px; }
.contents02 .c2m1 ul.c2m1_list .text_area .subject { display: block; font-size: 15px; font-weight: bold; overflow:hidden; text-overflow:ellipsis; word-wrap:normal; white-space:nowrap; }
.contents02 .c2m1 ul.c2m1_list .text_area .text { display: block; line-height: 18px; color: #777; margin-bottom: 5px; }
.contents02 .c2m1 ul.c2m1_list .text_area .date { line-height: 16px; color: #888; font-size: 12px; }

/*갤러리2 체험후기*/
.contents02 .c2m2 { position: relative; float: left; width: 380px; height:406px; margin-right: 20px; border-top: 1px solid #555; }
.contents02 .c2m2 h2 { margin: 18px 0 15px 5px; font-size: 24px;}
.contents02 .c2m2 .more { position: absolute; right: 0; top: 20px; padding-right: 15px; color: #888; background: url(/happyedu/images/main/btn_more.gif) right 50% no-repeat; }
.contents02 .c2m2 ul.c2m2_list { width: 90%; height: 330px; overflow: hidden; padding: 5px 0 0 0; }
.contents02 .c2m2 ul.c2m2_list li { height: 100px; padding: 0px 0 15px 0; }
.contents02 .c2m2 ul.c2m2_list .img_area { float: left; width: 148px; }
.contents02 .c2m2 ul.c2m2_list .img_area img{ width: 128px; height: 88px; }
.contents02 .c2m2 ul.c2m2_list .text_area .subject { display: block; font-size: 15px; font-weight: bold; overflow:hidden; text-overflow:ellipsis; word-wrap:normal; white-space:nowrap; }
.contents02 .c2m2 ul.c2m2_list .text_area .text { display: block; line-height: 18px; color: #777; margin-bottom: 5px; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:36px;}
.contents02 .c2m2 ul.c2m2_list .text_area .date { line-height: 16px; color: #888; font-size: 12px; }

/* 게시판 공지사항 */ 
.contents02 #c2m3 { position: relative; float: right; width: 480px; height: 380px; background: #E5E5E5 url(/happyedu/images/main/bg_board.gif) repeat-x left top; }
.contents02 .c2m3 h3 {float:left;position:relative}
.contents02 .c2m3 h3 a {margin-right:1px; display:block; height: 52px; line-height: 52px; padding:0 28px; font-size: 18px; background:#ACACAC; color:#fff; text-decoration:none}
.contents02 .c2m3 h3 a:hover, .c3m3 h3 a:active, .c3m3 h3 a:focus { background:#666; }
.contents02 .c2m3 h3.active a { font-size:18px; background:#666; color:#fff;}
.contents02 .c2m3 .cont {display:none;position:absolute;top:85px;left:35px;right:35px}
.contents02 .c2m3 #ntab_1 {}
.contents02 .c2m3 #ntab_1 + .cont.on {display:block}
.contents02 .c2m3 #ntab_2 {}
.contents02 .c2m3 #ntab_2 + .cont.on {display:block}

.nt_list { overflow: hidden; height: 280px; }
.nt_list li {position:relative;  padding-bottom: 5px; width:100%; background:url(../../images/common/img_comn_tiny.png) no-repeat 0 -908px; height:22px; line-height: 22px; list-style:none}
.nt_list li a {display: block; float: none !important; width: 100% !important; color:#1b1b1b;font-size:1.076em;line-height:1.6em;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}
.nt_list li a:hover, .nt_list li a:active, .nt_list li a:focus {color:#3cb896;text-decoration:underline}
.nt_list li:first-child {background:none; padding:0; height:auto; margin-bottom:15px;}
.nt_list li:first-child .subject { height: 24px; font-weight: bold; font-size:18px; clear:both; float:none; margin:0 0 0px; }
.nt_list li:first-child .date {position:relative;}
.nt_list li .subject {display: block; line-height:30px; text-align: left; overflow:hidden; text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin-left:10px;margin-right: 80px;}
.nt_list li .date {position: absolute;top:0;right:0;color:#7c7c7c;font-size:12px;line-height:20px;text-align: right}
.nt_list li .date span {display:none}
.contents02 .c2m3 .more { position: absolute;top:-74px;right:0;display:block;width:45px;height:30px; background:url(/happyedu/images/main/board_more.png) no-repeat 100% 50%;color:#fff;line-height:31px;text-decoration:none}

/* 사업영역 소개 */
.contents03 .c3m1 { position: relative; margin: 0 auto; }
.contents03 .c3m1 h2 { margin-top: 40px; font-size: 28px; color: #354a93; text-align: center; }
.contents03 .c3m1 .biz_list { height: 320px; overflow: hidden; }
.contents03 .c3m1 .biz_list div { padding: 30px 0; float: left; width: 25%; text-align: center;}
.contents03 .c3m1 .biz_list div a span { margin-top: 7px; padding: 7px 10px; border-radius: 30px; background: #454545; color: #fff; }
.contents03 .inner { position: relative; }
.contents03 .inner .bx-wrapper { position: relative; margin: 0 auto; }
.contents03 .c3m1 .control { position: absolute; left:-1%; top:100px; width:102%; height:60px; margin:0px; }
.contents03 .c3m1 .control button {display:block;position:absolute;top:15px;float:none; padding:0 10px; width:50px;height:50px;font-size:0;vertical-align:top; z-index: 10002; }
.contents03 .c3m1 .control .btn_prev {/* left:30px; */ width:100px; height:90px; }
.contents03 .c3m1 .control .btn_next {/* right:30px; */right:0px; width:100px; height:90px; }
.contents03 .c3m1 .bx-controls { display: none; }

@media (max-width:1350px) {
	.inner { width: 1000px; }
	
	.contents01 { height: 895px; }
	.contents01 .c1m1 { width: 1000px; }
	.contents01 .c1m2 { width: 440px; }
	.contents01 .c1m3 { clear: both; padding-top: 0; width: 100%; height: 240px; }
	.contents01 #c1m4 { float: left; height: 240px; z-index:100;}
	#c1m4 #slider_popup { height: 240px; }
	.contents02 .c2m1 { width: 300px; }
	.contents02 .c2m2 { width: 300px; }
	.contents02 #c2m3 { width: 360px; }
	
	.contents03 { height: 470px; padding-top: 10px; }	
	.contents03 .c3m1 .viewport { width: 90%!important; margin-left: 10%!important; margin-top: 20px; }
	.contents03 .c3m1 .biz_list li { width: 33.33%!important; }
	
}


@media (max-width:1024px) {
	.inner { width: 960px; }
	
	.contents01 .c1m1 { width: 100%; }
	.contents01 .c1m2 { width: 400px; }
	
	.contents02 .c2m1 { width: 280px; }
	.contents02 .c2m2 { width: 280px; }
	.contents02 #c2m3 { width: 360px; }
}


@media (max-width:990px) {
	.inner { width: 740px; }
	
	.contents01 .c1m1vis { width: 440px; }
	.contents01 .c1m2 { width: 300px; }
	
	.c1m5 .quick_menu li h4 { font-size: 20px; }
	
	
	.contents02 { height: 840px; }
	.contents02 .c2m0 .notice li { padding-left: 3%; }
	.contents02 .c2m0 .notice li .title { width: 78%; }
	.contents02 .c2m1 { width: 48%; margin-right: 4%; }
	.contents02 .c2m2 { width: 48%; margin-right: 0; }
	.contents02 #c2m3 { float: left; width: 100%; height: 380px; }
	
}

@media (max-width:767px) {
	.inner { width: 460px; }
	.contents01 { height: 1636px; background-color: #000; }
	.contents01 .c1m1 { height: auto; }
	.contents01 .c1m1vis { clear: both; width: 100%; height: 501px; }
	.contents01 .c1m2 { clear: both; width: 100%; }
	.contents01 .c1m3 { height: 500px; }
	.contents01 #c1m4 { float: none; clear: both; width: 100%!important; }
	
	.contents02 { height: 1225px; }
	.contents02 .c2m1 { width: 100%; margin-right: 0; }
	.contents02 .c2m2 { width: 100%; }
	
	.contents02 .c2m0 h2 { width: 24%; padding: 5% 0 0 2%; line-height: 18px; }
	.contents02 .c2m0 .notice { width: 74%; }
	.contents02 .c2m0 .notice li { width: 95%; }
	.contents02 .c2m0 .notice li .title { width: 76%; }
	.contents02 .c2m2 h2 { margin-top: 30px; }
	.contents02 #c2m3 { margin-top: 30px; }
	.contents02 .c2m3 .cont { left: 15px; right: 15px; }
	
	.contents03 { height: 450px; }
	
	/* .contents03 .c3m1 .bx-viewport { width: 65%!important; padding-left: 20%; height: 320px; } */
	/* .contents03 .c3m1 .bx-viewport .biz_list div.slide a img { width: 90%; } */
}

@media (max-width:480px) {
	.inner { width: 320px; }
	.contents01 { height: 1444px; }
	.contents01 .c1m1vis { height: 349px; }
	.c1m5 .quick_menu li { height: 200px; }
	.c1m5 .quick_menu li h4 { padding: 20px 0 10px 0; }
	
	.contents03 { min-height: 1360px; }
	/* .contents03 .c3m1 .bx-viewport { width: 83%!important; padding-left: 10%; height: 260px; } */
	/* .contents03 .c3m1 .biz_list li { width: 100%; } */
	/* .contents03 .c3m1 .biz_list li img { max-width: 75%; } */
	.contents03 .c3m1 .biz_list {height:auto;}
	.contents03 .c3m1 .biz_list .slide {width:50%; float:left;}
	.contents03 .c3m1 .biz_list .slide a {width:100%;}
	.contents03 .c3m1 .biz_list .slide a img {width:100%;}
	.contents03 .c3m1 .control {display:none;}
}