/* 
Project : ????? ???α??
Author  : kang2oon
Date    : 2015-10-15
*/

/* Common */
html, body {
	font-family: 'Malgun Gothic';font-size:16px;-webkit-font-smoothing: antialiased;line-height:1.4 !important; 	min-height: 100%;background: #fff;
}
a{text-decoration:none; color:#000;}
.fleft{float:left;}
.fright{float:right;}
.prelative{position:relative !important;}
.pabsolute{position:absolute !important;}
.alternative{z-index: -1;width: 0;height: 0;overflow: hidden;visibility: hidden;}
.txtleft{text-align:left !important;}
.txtcenter{text-align:center !important;}
.txtright{text-align:right !important;}
.txtbold{font-weight:bold !important;}
img[onclick]{cursor:pointer;}
caption{display:none;}
.martop20{margin-top:20px;}
.maincolor{color:#f55405;}
*{/*box-sizing:border-box;*/ padding:0px; margin:0px;}
#middle_right_area{font-family: 'Malgun Gothic', sans-serif;}
#middle_right_area * { box-sizing:border-box;  letter-spacing:-1px;}
.section{font-size:16px;}
#gnb .mgnb_list{display:none;}
.section_y_plan{margin-top:30px;}
	
	/* Layout */
	.top{width:100%; background:url(../images/bg.png); height:352px;position:relative;}
		.top li{float:left;  position: absolute;}
		.top li.kid_01{bottom:40px; left:30px;}
		.top li.kid_02{bottom:40px; left:160px;}
		.top li.kid_03{bottom:40px; left:280px;}
		.top li.kid_04{bottom:40px; left:400px;}
		.top li.kid_05{bottom:40px; right:130px;}
		.top li.kid_06{bottom:40px; right:30px;}
		.top_click{position:absolute; top:20px; right:20px;}
		
		
	
	/* Wobble Vertical */
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}
.wobble-vertical {
  display: inline-block;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
	
	
	h2::before{content:"";
        background-image: url(../images/heart_icon.png);
        background-size:26px 22px;
        width:26px;
        height:22px;
        display:inline-block; margin-right:5px; position:relative; top:2px;}
	
	.mind_con{width:399px; }
		.mind_con li{border:1px solid #e5e5e5; height:230px;overflow:hidden;width:399px !important;}
		.mind_con .bx-wrapper{margin:0;}
		.mind_con .bx-wrapper .bx-controls-direction a {  margin-top: -30px;  outline: 0;   width: 38px;  height: 66px;      z-index: 99;}
		.mind_con .bx-wrapper .bx-prev {  left: 0px;    background: url(../images/bx_controls.png) no-repeat 0px 0px;}
		.mind_con .bx-wrapper .bx-next {    right: 0px;    background: url(../images/bx_controls.png) no-repeat -58px 0px;}
		.mind_con .bx-wrapper .bx-prev:hover {	background-position: 0 -86px;}
		.mind_con .bx-wrapper .bx-next:hover {	background-position: -58px -86px;}
		.mind_con .bx-wrapper .bx-pager, 
		.mind_con .bx-wrapper .bx-controls-auto{top:-40px; bottom:auto;    right: 0;    width: auto;}
		.mind_con .bx-wrapper .bx-pager{font-weight:normal;}
		
	 .topbtn {margin-left:6px; margin-bottom:10px;}
 .topbtn .prointro{width:128px; height:31px;  background-position:0 0; display:inline-block;} 
 .topbtn .yearplan {width:128px; height:31px; background-position:279px 0px;}
 .topbtn a{text-indent:-9999px; font-size:0; background-repeat:no-repeat; background:url(//www.kidkids.net/eduinfo_new/img/classic/btn.png); display:block;  margin-left:6px;}

	
	.kid_popup_cs{background:url(../images/kid_popup_bg.png); width:833px; height:486px;position:relative;overflow:hidden; border-radius:20px;padding:55px 0 0 210px; margin-top:120px;}
	.popupbtn{ height:81px;width:175px;display:inline-block; background:#4d463f; position:relative; color:#d0cdc9;font-size:15px; line-height:81px; }
	.popupbtn p{margin-left:70px;}
	.popupbtn span{ display:inline-block; width:50px; height:56px; position:absolute; bottom:0;left:10px;}
	.popupbtn:nth-child(even){ background:#5d554c;}
	.bx-wrapper .bx-viewport{background:none;}
	
	.bxpager_nav{width:175px; position:absolute; top:0; left:0;}
	.popupbtn span.kid_popup_01_nav{ background: url(../images/kid_popup_01_nav.png);}
	.popupbtn span.kid_popup_02_nav{ background: url(../images/kid_popup_02_nav.png);}
	.popupbtn span.kid_popup_03_nav{ background: url(../images/kid_popup_03_nav.png);}
	.popupbtn span.kid_popup_04_nav{ background: url(../images/kid_popup_04_nav.png);}
	.popupbtn span.kid_popup_05_nav{ background: url(../images/kid_popup_05_nav.png);}
	.popupbtn span.kid_popup_06_nav{ background: url(../images/kid_popup_06_nav.png);}
	.popupbtn:nth-child(2) span{background-position-x:-60px;}
	.popupbtn:nth-child(3) span{background-position-x:-120px;}
	.popupbtn:nth-child(4) span{background-position-x:-180px;}
	.popupbtn:nth-child(5) span{background-position-x:-240px;}
	.popupbtn:nth-child(6) span{background-position-x:-300px;}
	.popupbtn:hover, .popupbtn.active{color:#fff; background:#ff6d25;}
	.popupbtn:hover span, .popupbtn.active span{background-position-y:-75px;}
	
	.kid_popup_cs li{width:584px!important;}
	.kid_popup_cs  .bx-wrapper .bx-viewport{height:378px!important;}
	.kid_popup_cs .bx-wrapper .bx-next {    right: 39px;    }
	.modal_close{position:absolute;top:20px; right:20px; cursor:pointer;}


	#bx-pager_02 .popupbtn:hover, #bx-pager_02 .popupbtn.active{ background:#ffba00;}
	#bx-pager_03 .popupbtn:hover, #bx-pager_03 .popupbtn.active{ background:#a238b5;}
	#bx-pager_04 .popupbtn:hover, #bx-pager_04 .popupbtn.active{ background:#03b5e9;}
	#bx-pager_05 .popupbtn:hover, #bx-pager_05 .popupbtn.active{ background:#01a114;}
	#bx-pager_06 .popupbtn:hover, #bx-pager_06 .popupbtn.active{ background:#fc0d4b;}
	
	
#prointro{width:882px ; height:733px; ;margin:0 auto; text-align:center;}
	#prointro .bx-wrapper{width:876px!important;padding:0px 0;  height:693px;  margin:0;}
	#prointro .bx-wrapper .bx-viewport{box-shadow:0 0 0; border:0; left:0; background:none;height:693px!important;}
	#prointro .bx-wrapper .bx-viewport li{width:876px!important;}
	#prointro .bx-wrapper .bx-controls-direction a{width:27px;height:44px;margin-top:-50px;}
	#prointro .bx-wrapper .bx-prev{background: url(//kidkids.net/eduinfo_new/classic_edu/images/popup_prev.png);left:-60px;}
	#prointro .bx-wrapper .bx-next{background: url(//kidkids.net/eduinfo_new/classic_edu/images/popup_next.png);right:-60px;}
	#prointro .bx-wrapper .bx-pager.bx-default-pager a{width:14px;height:14px;border-radius:10px;background:#fff; margin:0 3px;}
	#prointro .bx-wrapper .bx-pager.bx-default-pager a:hover, 
	#prointro .bx-wrapper .bx-pager.bx-default-pager a.active {background: #fdc62f;}
	#prointro .bx-wrapper .bx-pager{bottom:-40px;}	
	
#lean_overlay {
    position: fixed;
    z-index:500;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

.modal{display:none;}
	
.none_p{display:none;}





	/*?????????? ?????????????*/
.yearplan_2020 th.ttttttt{width:7%;}	

.yearplan_2020	{border-spacing:0; border-collapse:collapse; font-size:15px}

.loading{text-align:center;}
	.loading p{font-size:25px;font-family: 'NotoSans'; color:#999999;}
	
	#yearplan{width:980px; margin:30px auto; border-radius:10px;  overflow:hidden; }
	#yearplan .header{position: relative;    height: 83px;     box-sizing: border-box; background:#e9e9e9;}
	#yearplan .header h1 {    position: absolute;    top: 24px; left: 30px; font-size:28px;letter-spacing:-2px; font-weight:normal;}	
	#yearplan .header a.modal_close {    position: absolute;    top: 20px;    right: 20px;}
	#yearplan .article {    background: #fff;    padding: 30px}
	#yearplan .tab_wrap_modal {    position: relative;}	
	#yearplan table.sfcomm{ width: 100%;}
	#yearplan table.sfcomm th, #yearplan table.sfcomm td{    border: 1px solid #ccc;    padding: 15px; text-align:center; line-height:18px;}
	#yearplan table.sfcomm thead th {    background: #e6e6e6;}
	#yearplan table.sfcomm.plan_doc th {  padding: 12px 5px;}
	#yearplan table.sfcomm.plan_doc tbody th {    font-weight: bold;}
	#yearplan table.sfcomm tbody th {    background: #f7f7f7;}
	#yearplan table.sfcomm.plan_doc td {    padding: 12px 15px;}
	#yearplan table.sfcomm.plan_doc td.songtit{ font-weight:bold;}
	#yearplan  table.sfcomm.plan_doc a {    text-decoration: none;    color: #212121;}
	#yearplan  .tab_wrap_modal a.download {    position: absolute;    top: -35px;    right: 0;}
	


@media screen and (min-width:0\0){

	.tab li a{padding:16px 0 11px;}
	.edu_cha li p{padding-top:10px;}
	.nature_book_ch li{margin-top:20px;}	
	
	.content_list_intext{bottom:10px; padding:15px 10px 5px 10px}
	.content_list_intext img{margin-top:-2px;}
	
	.yearplan_btn{position:relative; top:-5px;}
		#yearplan .header h2 {    position: absolute;    top: 35px;}
}

@media screen and (max-width: 768px){	

/*??? ???????*/
.nature_book_ch {border:0;margin:5px 15px 10px;position:relative;}
	.nature_book_ch a.selectop{display:inline-block; width:30%; border:1px solid #d9d9d9; float:left; padding:13px; height:50px; text-align:left;
	background:#fff url('//m.kidkids.net/images/bg_select_arrow.png') no-repeat 90% 50%; background-size:15px 10px; }
	.nature_book_ch ul{width:30%;position:absolute; top:0;left:0;  padding-left:0;z-index:999;  display:none;}
	.nature_book_ch li{float:none;background:none; margin-top:0;width:100%;padding:0;border:1px solid #d9d9d9; padding:13px; border-top:0; background:#fff; height:50px;}
	.nature_book_ch li:first-child{border-top:1px solid #d9d9d9; }
	.nature_book_sel{width:68%; border:0;}
	.nature_book_ch .nature_book_sel select{width:100%; margin:0; height:50px;}
	
	/*??????*/
	.prointro_main{width:90%; margin: 30px auto;    padding: 0 30px; height:250px; background-size:cover;}
	.prointro_main div h1 {  font-size: 30px;}
	.prointro_main div p {    font-size: 15px;}
	/*??? ?????? ?¡*/
	.edu_cha{margin-left:0; display:inline-block!important; width:330px;margin-left:-10px;}
	.edu_cha li{width:100px; height:100px; background-size:cover; margin:0 0 10px 10px; font-size:15px;}
	.edu_cha li.green{background-size:cover;}
	.edu_cha li::before, .teaedu_pro li::before{display:none;}
	/*?????н?????*/
	.teaedu_pro {margin-left:0;padding:0 15px;}
	.teaedu_pro li{width:100%; margin-left:0; height:auto;padding:20px 0; margin:5px 0 5px;}
	
	.yearplan_2020 th.ttttttt{width:10%;}
	.bx-wrapper{display:none;}
	
	/*????*/
	.safe_food_text{width:auto; border:0; height:auto; padding:10px 0}
		.safe_food_text .foodlist{display:none;}
		.foodtit_box{top:0; left:0;}
		
		
	.mind_con{width:100%; }
	.mind_con h2{margin-bottom:3px}
	.mind_con .bx-wrapper{display:block;width:90%;}
	.mind_con li{width:100% !important; height:195px;}
	
	.top ul{display:inline-block;text-align:center;}
	.none_m{display:none;}
	.none_p{display:block;}
		.mind_con li{ position:relative; padding-bottom:30%; }
		.mind_con li a{position:absolute;  top:0; left:0; height:100%; text-align:center; }
		.mind_con li a img{width:100%; height:100%;}
		
	.kid_popup_cs{background:url(../images/kid_popup_bg.png) cover; width:90%; position:relative;overflow:visible ; border-radius:0px;padding:0; padding-top:100px; margin-top:0px; height:auto;}
	.kid_popup_cs .bx-wrapper {display:block; padding-bottom:65%; margin-bottom:0;}
	.kid_popup_cs .bx-wrapper .bx-viewport{width:90%!important; margin:0 auto ; position:absolute!important;   top:0; left:50%; transform:translateX(-50%); height:100% !important; }
	.kid_popup_cs li {    width: 100%!important;}
	.bxpager_nav{width:100%; font-size:0;}
	.popupbtn{width:33.33%; height:auto; line-height:normal ;padding:10px 0; text-align:center;}
	.popupbtn span{display:none;}
	.popupbtn p{margin-left:0;}
	.modal_close{top:-30px;}
	
		.top{text-align:center;  background:url(../images/bg_m.png); height:auto; padding-bottom:25px;}
		.top li{float:none;  position: static; width:25%; margin: 1%;}
		.top_click{ position: static; margin:20px auto 10px; text-align:center;}
		
#yearplan, #prointro{width:90% }
#yearplan .header{height:70px}
#yearplan .header h1{font-size:24px;}
#yearplan table.sfcomm th, #yearplan table.sfcomm td{padding:12px}
}


@media screen and (max-width: 325px){
	
.nature_book_ch li, .nature_book_ch .nature_book_sel select{height:45px; }
	.edu_cha{width:280px;}
	.edu_cha li{width:80px; height:80px; font-size:14px; }

}