/* 백그라운드 */
#container {background: none;}
.mtop {position:relative; padding-top: 67px;}
.mtop::before {z-index:-1;background:#000 url(/happyedu/img/main/mbg.jpg) no-repeat 0 0; width:2000px; height:100%; top:0; position:absolute;left:50%; display:block; content:"";margin-left: -1000px; display:block; content:""}
#mtop_box {height: 600px; width: 1400px;}

@media only screen and (max-width: 1024px){
.con_wrap {padding: 0;}
#mtop_box {width: 100%;}
}

@media only screen and (max-width: 1024px){
.mtop {padding: 3% 0;}
#mtop_box {width: 94%; margin: 0 auto;}
.mtop::before {background: #d2e7f6;}
}


/* 팝업 */
#popupzone {position: relative; float: left; width: 811px; min-height: 600px; background-color: #fff; box-sizing: border-box;}
#popupzone ul {position: relative;}
#popupzone ul li img {width: 811px; min-height: 600px;}
#popupzone .control {position:absolute; left:0; bottom:0; width:100%; height:50px; padding: 0 35px; box-sizing: border-box; text-align:center; background-color:rgba(0, 0, 0, 0.75);}
#popupzone .control>div {position: relative; float: left; width: 60%; margin: 0 auto;}
#popupzone .control button {display:block; position:absolute; top: 10px; float:none; width:30px; height:30px; font-size:0;vertical-align:top; text-decoration: none;}
#popupzone .control .prev-slide {position: absolute; left: 35px; width: 30px; height: 30px; background: url(/happyedu/img/main/btn_prev.png) no-repeat left center;}
#popupzone .control .next-slide {position: absolute; right: 35px; width: 30px; height: 30px; background: url(/happyedu/img/main/btn_next.png) no-repeat right center;}
#popupzone .bx-controls {position:absolute; bottom:0px;left:35px;width:100px;height:40px;background:none;color:#fff;line-height:40px;text-align:left;}

.slick-dots {margin-top:-20px; text-align:center; position: absolute !important; z-index: 10; margin-left: 48%; margin-top: -30px;}
.slick-dots li {display:inline-block; border-radius:50%; border: 1px solid #fff; text-indent:-999999px; width: 10px; height: 10px; margin-right: 11px;}
.slick-dots li:last-child {margin-right: 0;}
.slick-dots li.slick-active {background: #fff;}

@media only screen and (max-width: 1024px){
#popupzone {width: 50%;}
}

@media only screen and (max-width: 990px){
#popupzone{width:70%;}
}

@media only screen and (max-width: 975px){
#popupzone {width: 100%; min-height: 100px;}
#popupzone ul li img {width: 100%; min-height: 10px;}
}

@media only screen and (max-width: 450px){
.slick-dots {margin-left: 42%;}
}

/* 달력 */
#calendar {float: left; width: 375px; min-height: 600px; overflow: hidden;}
#calendar .cal_1 th{font-weight: 400 !important; box-sizing: border-box;}
#calendar .cal_1 td{text-align: center;}
#calendar .cal_1 {min-height: 300px; background-color:rgba(1, 63, 148, 0.9);  color: #fff; box-sizing: border-box;}
#calendar .cal_1 .caltop {padding: 33px 30px 15px 30px; box-sizing: border-box; position: relative;}
#calendar .cal_1 .caltop::after {content: ''; display: block; width: 100%; border-bottom: 1px solid #fff; padding-top: 15px;}
#calendar .cal_1 .caltop .month {font-size: 33px; margin-right: 10px;}
#calendar .cal_1 .caltop .cal_title {font-size: 16px;}
#calendar .cal_1 .caltop .control {display: inline-block; margin-left: 8px; position: relative;}
#calendar .cal_1 .caltop .control a {display: inline-block; position: absolute; top: -17px; vertical-align: top; width: 20px; height: 20px; margin: 0; padding:0; box-sizing: border-box; border: 1px solid #fff;}
#calendar .cal_1 .caltop .control a.prev-slide {background: url(/happyedu/img/main/prev_arrow.png) no-repeat;}
#calendar .cal_1 .caltop .control a.next-slide {background: url(/happyedu/img/main/next_arrow.png) no-repeat; left: 19px;}
#calendar .cal_1 .caltop a.more {float: right; color: #fff; padding-top: 13px; font-size: 12px;}
#calendar .cal_1 .calBox {padding: 0 30px; box-sizing: border-box;}

.pink {color: #ffc7c7;}
.cyan {color: #bafed4;}

#calendar .cal_2 {position: relative; height: 300px; background-color:rgba(0, 57, 134, 0.9); box-sizing: border-box; padding: 30px 30px 0 30px; text-align: center; overflow: auto;}
#calendar .cal_2 a {color: #fff; font-size: 12px; font-weight: lighter; border: 1px solid #fff; padding: 5px 70px;}
#calendar .cal_2 ul {margin-bottom: 8px;}
#calendar .cal_2 ul li {width:100%; box-sizing:border-box; clear:both; padding-bottom:10px; position:relative; padding-left:8px; color: #fff; text-align: left;}
#calendar .cal_2 ul li:before {content:''; width: 3px; height: 3px; background-color: #f7ab00; position: absolute; top:10px; left:0; display: block;}
#calendar .cal_2 ul li span.cal_button {position: absolute; top:0; right:0; display: block; padding: 1px 12px; font-size: 13px; background: #092f62; color: #fff; margin: 0; cursor: pointer;}
#calendar .cal_2 ul li .cal_list {width: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block;}
#calendar .cal_2 ul li span span {margin-right: 5px; color: #fff33f; font-size: 15px;}

/* 달력 팝업 */
.popup_wrap {height: 503px !important; width: 100% !important; background: url('/happyedu/img/common/happypop_bg.jpg') no-repeat; background-size: cover;} 
.cal_popup {padding: 30px; box-sizing: border-box;}
.cal_popup img {margin-bottom: 30px;}
.cal_popup div {background: #fff; padding: 20px; box-sizing: border-box; width: 437px;}
.cal_popup div p {position: relative; padding-left: 10px;}
.cal_popup div p span {color: #234ee1;}
.cal_popup div p::before {position: absolute; content:''; top: 10px; left: 0; background: #234ee1; width: 3px; height: 3px;}
.btnboxR {position: absolute; bottom: 10px; right: 0;}


@media only screen and (max-width: 1024px){
#calendar {width: 30%;}
}





@media only screen and (max-width: 975px){
#calendar {width: 100%; min-height: 10px;}
#calendar .cal_1 {height: auto; padding-bottom: 10px;}
#calendar .cal_2 {height: 145px; min-height: 10px; overflow: auto; padding: 25px; margin-bottom: 3%;}
}

/* 신청 */
#apply {float: left; width: 214px; min-height: 600px;}
#apply div {border-bottom: 1px solid #7565a9; position: relative; /*min-height: 95px;*/height: 120px; background-color:rgba(166, 134, 191, 0.87); box-sizing: border-box; padding-top: 15px;  -webkit-box-sizing:border-box;
	 text-align:center;}
#apply div img {display: block; margin: 0 auto; margin-bottom: 5px; z-index:1;width: 30%;
	 position:relative;
	 box-sizing:border-box;
	 -webkit-box-sizing:border-box;
	 -moz-box-sizing:border-box;
	 -webkit-box-sizing:border-box;
	 -webkit-box-sizing:border-box;
	 -moz-box-sizing:border-box;
	 animation-fill-mode:both;
	 -webkit-animation-fill-mode:both;}
#apply a:hover img { animation:otherEx1 1s ease-out;
	 -webkit-animation:otherEx1 1s ease-out;
	 transform-origin:bottom;
	 -webkit-transform-origin:bottom;}
#apply div a {color: #fff; font-size: 15px;}
/* #apply div:first-child {border-bottom: 1px solid #7565a9;} */
#apply div:last-child {border-bottom: none;}



@keyframes otherEx1 {
0%,100% {
	 transform:rotateZ(0deg);
	 -webkit-transform:rotateZ(0deg);
}
10%, 30%, 50%, 70%, 90% {
	 transform:rotateZ(-5deg);
	 -webkit-transform:rotateZ(-5deg);
}
20%, 40%, 60%, 80% {
	 transform:rotateZ(5deg);
	 -webkit-transform:rotateZ(5deg);
}}
@-webkit-keyframes otherEx1 {
0%,100% {
	 transform:rotateZ(0deg);
	 -webkit-transform:rotateZ(0deg);
}
10%, 30%, 50%, 70%, 90% {
	 transform:rotateZ(-5deg);
	 -webkit-transform:rotateZ(-5deg);
}
20%, 40%, 60%, 80% {
	 transform:rotateZ(5deg);
	 -webkit-transform:rotateZ(5deg);
}}

@media only screen and (max-width: 1024px){
#apply {width: 20%;}
}

@media only screen and (max-width: 990px){
	
	#apply {width: 100%; min-height: 10px;}
	#apply div {width: 20%; float: left; min-height: 10px; padding: 35px 0;height: 170px;border: none; border-right: 1px solid #7565a9;}
	#apply div:last-child {border: none; border-right:none;border-top: 1px solid #7565a9;}
	/* #apply div:first-child {border: none; border-right: 1px solid #7565a9;} */
	#apply div a {font-size: 15px; letter-spacing: -1px; word-break: keep-all;}
    #apply div img{width: 40%;}
}
@media only screen and (max-width: 600px){
	#apply div {width: 50%; border-bottom: 1px solid #7565a9; padding: 20px 0;   height: 150px;}
	#apply div a{font-size:15px;}
	#apply div img{width:80px;}
	#apply div:nth-child(2){border-right: none;}
	#apply div:nth-child(3){border-bottom: none;}
    #apply div:last-child {width: 100%;border-top: 1px solid #7565a9;}
	#apply div:nth-child(4){border-bottom: none;}

    
}

/* 프로그램 검색 */
#search {position: relative;}
#search .p_sear_form {margin-top: 42px;}
#search_bar {width: 100%; min-height: 132px; box-sizing: border-box; background: url(/happyedu/img/main/search_bg.png) left bottom no-repeat;}
#search_bar::before {z-index:-1; background: #3387de; width:2000px; height:132px; top:0; position:absolute;left:50%; content:"";margin-left: -1000px; display:block; content:""}
#search_bar .ico_search {float: left; width: 30%; margin-right: 5%; margin-top: 24px; color: #fff;}
#search_bar .ico_search span.sc_title{font-size: 30px; background: url(/happyedu/img/main/ico_search.png) left 6px no-repeat; padding: 21px 63px; line-height: 81px;}
#search_bar .ico_search span.sc_title span {color: #e5ffb9;}
#search_bar .p_sear_form {float: right; width: 64%;}

#search_bar .select_box01 {position: relative; width: 21%; height: 50px;background:#fff url(/edu/img/main/se_arrow.png) 90% center no-repeat; float: left;}
#search_bar .select_box01 label {position: absolute;font-size: 17px;color: #333;top: 13px;left: 12px;letter-spacing: 1px;}
#search_bar .select_box01 select {width: 100%;height: 40px;min-height: 40px;line-height: 40px;padding: 0 10px;opacity: 0;color:#333;}

#search_bar input {width: 65%; height: 50px; background:#fff; float:left; border: none; font-size: 16px; padding-left: 10px; box-sizing: border-box; margin: 0 0.5%;}
#search_bar a {position: relative; width: 13%; height: 50px; background: #25a48e url(/happyedu/img/main/search_click.png) 88% center no-repeat; display: inline-block; color: #fff;}
#search_bar a span {position: absolute; font-size: 17px; color: #fff; top: 13px; left: 12px;}

@media only screen and (max-width: 1024px){
#search_bar .ico_search span.sc_title {font-size: 26px; }
#search_bar .p_sear_form {width: 68%;}
#search_bar .ico_search {width: 20%;}
#search_bar .ico_search>div {display: inline-block;}
#search_bar {height: auto; padding: 10px 2%; background-image: url(/happyedu/img/main/search_bg.png), linear-gradient(to right, #2aa3d3, #295ddd);}
#search_bar::before {display: none;}
#search_bar .ico_search {width: 100%; float: none; text-align:center; margin: 0 0 15px 0;}
#search_bar .ico_search > div {width:100%;}
#search_bar .p_sear_form {width: 100%; float: none; margin: 0 auto;}
#search_bar .select_box01 {width: 24%;}
#search_bar input {width: 68%;}
#search_bar a {float: none; width: 7%; background: #25a48e url(/happyedu/img/main/search_click.png) 58% center no-repeat;}
#search_bar a span {text-indent: -10000000px;}
}

@media only screen and (max-width: 650px){
#search_bar .select_box01 label {font-size: 15px; letter-spacing: -1px;}
#search_bar .select_box01 {width: 38%; height: 47px;}
#search_bar input {width: 51%; font-size: 15px; letter-spacing: -1px; height: 47px;}
#search_bar a {width: 10%; background: #25a48e url(/happyedu/img/main/search_click.png) 56% center no-repeat; height: 47px;}
}


@media only screen and (max-width: 500px){
	#search_bar .ico_search span.sc_title{font-size: 20px; background: url(/happyedu/img/main/ico_search.png) 20px 50% no-repeat;  
	background-size: 40px;     padding: 21px 0 21px 63px;}
}

/* 공지사항 */
#board_bar {padding-top: 40px;}

#newsbox {position: relative; box-sizing: border-box;}
#newsbox_in {width: 100%; min-height: 593px;}
#newsbox_in::before {z-index:-1; background: url(/happyedu/img/main/newsbox_bg.png) bottom center no-repeat; width:2000px; height:593px; bottom:0; position:absolute;left:50%; content:"";margin-left: -1000px; display:block; content:""}
#board {margin-bottom:10px; position:absolute; min-height:306px; background:#f8f8f8;  box-sizing:border-box; width:42%; float:left; box-sizing:border-box; border:1px solid #dedede;}
#board ul {position:relative;}

#board ul > li > div > a.title {z-index:1; width:45%; line-height:60px; height:60px; text-align:center; font-size:20px; color:#333;  display:block; position:absolute;  box-sizing:border-box;  background:#656565; color:#fff; font-weight:400; }
#board ul > li:nth-child(1) > div > a.title {top:0; left:0;}
#board ul > li:nth-child(2) > div > a.title {top:0; left:45%;}
#board ul > li:nth-child(3) > div > a.title {top:0; left:60%;}
#board ul > li.on > div > a.title {color:#333; background:#f8f8f8; }
#board ul > li:not(.on) div.mnews, #board ul > li:not(.on) a.more{display:none;}
#board ul > li.on div.nolist { padding:100px 0px 10px 0px; text-align:center; width:100%;}

.mnews {position:relative;}
.mnews ul {padding:70px 40px 0px 40px;}
.mnews ul li {width:100%; box-sizing:border-box; clear:both; margin-bottom:10px; position:relative; padding-left:8px;}
.mnews ul li:before {content:''; display:block; width:3px; height:3px; background:#333; position:absolute; top:10px; left:0; border-radius:50%;}
.mnews ul li:after {clear:both; content:''; display:block;}
.mnews ul li a {display:block;}
.mnews ul li a p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:inline-block; }
.mnews ul li a p.title {width:70%; float:left;}
.mnews ul li a p.detail {display:none;}
.mnews ul li a p.date {float:right; width:30%; text-align:right; color:#666; font-size:13px;}
.mnews ul li a:hover {color:#047ed6;}
.mnews ul li:first-child { padding-left:0px; border-bottom:1px dashed #dedede; padding-bottom:7px; margin-bottom:15px; }
.mnews ul li:first-child:before {display:none;}
.mnews ul li:first-child a p.title {width:80%; float:right; color:#000; font-size:17px; margin-bottom:5px; margin-top:15px;}
.mnews ul li:first-child a p.detail {display:block; width:80%; float:right;  white-space:nowrap; overflow: hidden; text-overflow: ellipsis; display:block; word-break:break-all; font-size:15px; line-height:21px; color:#666;}
.mnews ul li:first-child a p.date {float:none; width:15%; text-align:center; color:#666; font-size:13px; background:#fff; position:relative; padding:10px 0 40px 0; box-sizing:border-box; border:1px solid #dedede;}
.mnews ul li:first-child a p.date span {font-size:30px; position:absolute; top:35px; left:0; display:block; text-align:center; width:100%;}
.mnews ul li:first-child a:hover p.title {color:#047ed6;}
.mnews ul li:first-child a:hover p.date {background:#333; color:#fff;}

#board a.more { position:absolute; top:0; right:0; width:10%; height:60px; text-indent:-99999px; background:#434343; }
#board a.more:after {position:absolute; top:0; left:0; content:'+';  display:block; color:rgba(255,255,255,0.5); width:100%; height:50px; padding-top:13px; text-indent:0px; font-size:34px; font-weight:100; text-align:center; box-sizing:border-box; }
#board a.more:hover {background:#3c5c80;}

@media only screen and (max-width: 1024px){
#newsbox {width: 94%; margin: 0 auto;}
#board {width: 100%; float: none; position: relative;}
}

@media only screen and (max-width: 500px){
#board ul > li > div > a.title {font-size: 17px;}	
#board a.more:after {font-size: 24px;}
}
	
/* 포토갤러리 */
.photo {position:relative; float: right; width: 55%; border-bottom:0!important; min-height: 306px;}
.photo .tit {margin-bottom: 35px;}
.photo .tit span {font-size: 30px; padding-left: 102px; background: url(/happyedu/img/main/photo.png) left 8px no-repeat;}
.photo .tit .more { float: right; font-size: 13px; color:#444; letter-spacing:-0.09em; display:block;}
.photo .tit .more span {padding-right:15px; background:url(/news/img/main/photo-more.png) no-repeat 95% center; display:inline-block;}
.photo ul {position:relative; margin:0 -0.5%; height:400px;}
.photo li {margin:0 0.36%; height: 237px; border: 1px solid #bfbfbf; overflow: hidden;}
.photo li:last-child{margin-right:0;}
.photo li:hover {border: 1px solid #ae5da1;}
.photo li:hover .txt {background: #ae5da1;}
.photo li:hover .txt a {color: #fff;}
.photo li:hover img {transform:scale(1.1, 1.1);-webkit-transform:scale(1.1, 1.1);-moz-transform:scale(1.1, 1.1);-ms-transform:scale(1.1, 1.1);}
.photo .img {position:relative; overflow:hidden; height:190px;}
.photo .img img {width:100%; height:100%; transition:all 1.0s;-webkit-transition:all 1.0s;-moz-transition:all 1.0s;}
.photo .img .over { width:100%; height:100%; background:url(/img/news/Main/photo-over02.png) repeat; position:absolute; left:0; right:0; top:0; bottom:0; display:none;}
.photo .img span{position:absolute; right:0; top:0px; padding:10px 30px; font-size:14px; color:#fff;}
.photo span.text1{background-color:rgba(77,85,95,0.9);}
.photo span.text2{background-color:rgba(226,158,13,0.9);}
.photo .img .over .more { width:62px; height:62px; position:absolute; left:50%; top:50%; margin-left:-31px; margin-top:-31px; font-size:0;  display:block;}
.photo .txt {background:#fff; height: 116px; overflow:hidden;}
.photo .txt .btxt a {font-size:18px;  color:#333; display:block; white-space:nowrap;overflow: hidden; text-overflow:ellipsis; width:100%; margin-top:10px; text-align: center;}

.photo .control a{display:inline-block; vertical-align:top;width: 32px; height: 32px; margin:0; padding:0px; box-sizing:border-box; border:1px solid #ccc;}
.photo .control a.stop-slide{background:url(/eng/img/main/slider01_stop.png) no-repeat -4px -5px; position:absolute; top:0; left: 272px;}
.photo .control a.start-slide{background:url(/eng/img/main/slider01_play.png) no-repeat -3px -6px; position:absolute; top:0; left: 272px;}
.photo .control a.prev-slide{background:#fff url(/common/img/bul.png) no-repeat -125px -5px; position:absolute; top:0; left: 210px;}
.photo .control a.next-slide{background:#fff url(/common/img/bul.png) no-repeat -124px -45px; position:absolute; top:0; left:241px;}
.photo .control a.plus {position: absolute; top: 0; right: 0; width: 100px; border:1px solid #222; text-align: center; line-height: 30px;}

@media only screen and (max-width: 1024px){
.photo {width: 100%; float: none; margin-top: 40px;}
.photo ul {height: auto;}
}

@media only screen and (max-width: 1024px){
div.subtop_gnb ul.sitelink li a {font-size: 13px;}
}
@media only screen and (max-width: 458px){
.photo .control a.plus {display: none;}
}

/* 사업소개 */
.bs_program {width: 100%; position: absolute; bottom: 58px; padding: 0 65px 0 80px; box-sizing: border-box;}
.bs_program li {display: relative;}
.bs_program .slick-slide img {float: left; width:30%;}
.bs_program .slick-slide p {float: right; padding-left: 20px; padding-top: 15px; font-family: 'yg-jalnan'; font-size: 20px; letter-spacing: -0.07em;  width:70%; box-sizing:border-box;}
.bs_program .slick-slide p span {display:block;}
.bs_program .purple {color: #9847be;}
.bs_program .orange {color: #d84d44;}
.bs_program .yellow {color: #e67b29;}
.bs_program .green {color: #1baa8c;}
.bs_program button {display: none;}
.bs_program .control a {width: 43px; height: 31px; border: 1px solid #ccc;} 
.bs_program .control a.prev-slide {background: #fff url(/happyedu/img/main/arrow_prev.png) no-repeat; position:absolute; top:35px; left: 0;}
.bs_program .control a.next-slide {background: #fff url(/happyedu/img/main/arrow_next.png) no-repeat; position:absolute; top:35px; right: 0;}

@media only screen and (max-width: 1024px){
.bs_program {position: relative; margin-top: 120px;}
.bs_program li {text-align: center;}
.bs_program .slick-slide img {float: none; width: auto; margin: 0 auto;}
.bs_program .slick-slide p {float: none; width: 100%; padding-left: 0;}
.bs_program .control a.prev-slide {top:65px;}
.bs_program .control a.next-slide {top:65px;}
}

@media only screen and (max-width: 560px){
.bs_program {padding: 0 50px;}
}

/* 푸터 */
#f-baner {display: none;}
#footer {height: 190px;}

#footer .f-link {padding-left: 27%;}
#footer .pc_sns {bottom: auto;}
#footer .f-info {padding-left: 27%;}
#f-family li {width: 20% !important;}
#f-family li:last-child a.mn_f1:after {background: url(/happyedu/img/main/foot-arrow.png) no-repeat; width: 22px;}
@media only screen and (max-width: 990px){
.photo {width: 100%; float: none;}
.photo ul {height: auto;}
#f-family li {width: 50% !important; white-space: nowrap;}
#f-family li:last-child {width: 100% !important;}
#footer {height: auto;}
#footer .f-link, #footer .f-info {padding-left: 0;}
#footer .f-link {padding-top: 40px;}
}


/***상단gnb***/
.topgnb {display: none;}

@media only screen and (max-width:1024px) {
	.sitelink1 {display: none;}
	.topgnb {display: block;}
	.subtop_gnb .slick-list {width: 86%; margin: 0 auto;}
	.subtop_gnb button {position: absolute; display: inline-block; vertical-align: top; width: 7%; height: 39px;  text-indent:-99999px;}
	.subtop_gnb button.slick-prev {left: 0; top: 0; background: #fff url(/common/img/gnb_prev.png) no-repeat center;}
	.subtop_gnb button.slick-next {right: 0; top: 0; background: #fff url(/common/img/gnb_next.png) no-repeat center; border-left: 1px solid #c1c8cc;}
}