@charset "utf-8";

	/* ------------------------------------------ */
	/* edudata MAIN                                       */
	/* ------------------------------------------ */
	
	.edudata_main_banner {
		background-image: url(/commons/images/main_img.png);
		text-align:center; 
		overflow:hidden; 
		height:327px; 
		margin-bottom: 60px; 
		background-color:#222; 
	}
	
	.edudata_mid_banner_btn1 {position:relative; width:100px; padding:16px; background-color:#ffffff; margin:0 0 0 150px;; top:-80px;}
	/* edudata 메인 배너 영역 */
	.edudata_main_banner_btn1 {width:100px; padding:16px; background-color:#ffffff; margin:0 auto; }
	.edudata_main_banner_btn2 {width:100px; padding:16px; background-color:#5f027e; margin:0 auto; color:#ffffff; }
	.edudata_main_banner_btn3 {width:100px; padding:16px; background-color:#004d66; margin:0 auto; color:#ffffff; }
	.edudata_main_banner_btn4 {width:100px; padding:16px; background-color:#5f027e; margin:0 auto; color:#ffffff;}
	




	/* ------------------------------------------ */
	/* MAIN                                       */
	/* ------------------------------------------ */
	
	.main_banner {
		background-image: url(/commons/images/main_img.png);
		text-align:center; 
		overflow:hidden; 
		height:627px; 
		margin-bottom: 60px; 
		background-color:#222; 
	}
	
	.mid_banner_btn1 {position:relative; width:100px; padding:16px; background-color:#ffffff; margin:0 0 0 150px;; top:-80px;}
	/* 메인 배너 영역 */
	.main_banner_btn1 {width:100px; padding:16px; background-color:#ffffff; margin:0 auto; }
	.main_banner_btn2 {width:100px; padding:16px; background-color:#5f027e; margin:0 auto; color:#ffffff; }
	.main_banner_btn3 {width:100px; padding:16px; background-color:#004d66; margin:0 auto; color:#ffffff; }
	.main_banner_btn4 {width:100px; padding:16px; background-color:#5f027e; margin:0 auto; color:#ffffff;}
	

@media (min-width: 300px) {
	.mainVisualTitle {left: 0; right: 0; margin: 0 auto; position: absolute; top: 360px; width: 360px; z-index: 4; }
	.mainVisualTitle ul {position: relative;	}
	.mainVisualTitle li {float: left; padding: 0 14px 5px; width: 130px; cursor:pointer; }
}
@media (min-width: 360px) {
	.mainVisualTitle {left: 0; right: 0; margin: 0 auto; position: absolute; top: 360px; width: 360px; z-index: 4; }
	.mainVisualTitle ul {position: relative;	}
	.mainVisualTitle li {float: left; padding: 0 24px 5px; width: 130px; cursor:pointer; }
}
@media (min-width: 400px) {
	.mainVisualTitle {left: 0; right: 0; margin: 0 auto; position: absolute; top: 320px; width: 360px; z-index: 4; }
	.mainVisualTitle ul {position: relative;	}
	.mainVisualTitle li {float: left; padding: 0 24px 10px; width: 130px; cursor:pointer; }
}	
@media (min-width: 600px) {
	.mainVisualTitle {left: 0; right: 0; margin: 0 auto; position: absolute; top: 390px; width: 450px; z-index: 4; }
	.mainVisualTitle ul {position: relative;	}
	.mainVisualTitle li {float: left; padding: 0 8px; width: 130px; cursor:pointer; }
}	
	.mainVisualTitle li a {color: #666666; font-weight: bold; text-align: center; }
	
@media (min-width: 300px) {
	.mainVisualTitle1 {left: 0; right: 0; margin: 0 auto; position: absolute; top: 0px; width: 300px; z-index: 4; font-size: 30px; color:#ffffff;height: 50px;line-height: 50px;}
}
@media (min-width: 400px) {
	.mainVisualTitle1 {left: 0; right: 0; margin: 0 auto; position: absolute; top: 0px; width: 360px; z-index: 4; font-size: 30px; color:#ffffff;height: 50px;line-height: 50px;}
}	
@media (min-width: 600px) {
	.mainVisualTitle1 {left: 0; right: 0; margin: 0 auto; position: absolute; top: 10px; width: 600px; z-index: 4; font-size: 30px; color:#ffffff;height: 50px;line-height: 50px;}
}	
	.banner_mov {position: relative;left: 0; right: 0; width:100%; height: 480px; margin: 0; padding: 0; top:-5px;}

	/* 소개 아이템 영역 */
	.intro_item_area {text-align:center; overflow:hidden; }
	.intro_item_subject {height:60px; text-align:center; line-height: 60px; }
	.intro_item_subject p {position:relative; width:100%; margin:0 auto; font-size: 30px; color:#444444;}
	.intro_item_list {margin: 0 auto;position: relative;width: 80%;}
	.intro_item_list ul {position: relative;}

@media (min-width: 300px) {	
	.intro_item_list li {float: left;width: 100%;}
}

@media (min-width: 400px) {	
	.intro_item_list li {float: left;width: 50%;}
}

@media (min-width: 600px) {	
	.intro_item_list li {float: left;width: 50%;}
}

@media (min-width: 800px) {	
	.intro_item_list li {float: left;width: 25%;}
}

	/* ------------------------------------------ */
	/* SUB MAIN                                   */
	/* ------------------------------------------ */
	
	.header_subpage { height: 130px; }
	
@media (min-width: 300px) {
	#submenu .menu_wrap {height:82px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#6f1c8b none repeat scroll 0 0; }	
}

@media (min-width: 400px) {
	#submenu .menu_wrap {height:82px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#6f1c8b none repeat scroll 0 0; }	
}

@media (min-width: 700px) {
	#submenu .menu_wrap {height:82px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#6f1c8b none repeat scroll 0 0; }	
}

@media (min-width: 900px) {
	#submenu .menu_wrap {height:42px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#6f1c8b none repeat scroll 0 0; }	
}

/*
@media (min-width: 300px) 은 gpro핸드폰
*/
@media (min-width: 300px) {
	.menu_depth2 { margin: 0 auto; position: relative; width: 300px; z-index: 4;	}
	.menu_depth2 li { line-height:38px; float: left; padding: 0px; }
}

@media (min-width: 400px) {
	.menu_depth2 { margin: 0 auto; position: relative; width: 400px; z-index: 4;	}
	.menu_depth2 li { float: left; padding: 0px; width: 100px; }
}

@media (min-width: 700px) {
	.menu_depth2 { margin: 0 auto; position: relative; width: 480px; z-index: 4;	}
	.menu_depth2 li { float: left; padding: 0px; width: 100px; }
}

@media (min-width: 900px) {
	.menu_depth2 { margin: 0 auto; position: relative; width: 700px; z-index: 4;	}
	.menu_depth2 li { float: left; padding: 0px; width: 100px; }
}
/*
	기본 submenu는 가로 4개
	submenu를 가로 8개로 늘리려면 width를 960px로 변경하고
	모바일에서는 높이를 
@media (min-width: 700px) {
	.menu_depth2 { margin: 0 auto; position: relative; width: 960px; z-index: 4;	}
}
*/

	.menu_depth2 ul { position: relative; }
	.menu_depth2 li a { color: #ffffff; font-weight: bold; padding-left: 10px; padding-right: 10px; padding-top: 0; text-align: center;}
@media (min-width: 300px) {
	.menu_depth2 li a { color: #ffffff; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-top: 0; text-align: center;}
}
	
@media (min-width: 400px) {
	.menu_depth2 li a { color: #ffffff; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-top: 0; text-align: center;}
}


	/* ------------------------------------------ */
	/* SUB MAIN 2                                */
	/* ------------------------------------------ */
	
	.header_subpage2 { height: 130px; }
	
@media (min-width: 300px) {
	#submenu2 .menu_wrap2 {height:82px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#ffffff none repeat scroll 0 0; }	
}

@media (min-width: 400px) {
	#submenu2 .menu_wrap2 {height:82px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#ffffff none repeat scroll 0 0; }	
}

@media (min-width: 700px) {
	#submenu2 .menu_wrap2 {height:82px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#ffffff none repeat scroll 0 0; }	
}

@media (min-width: 900px) {
	#submenu2 .menu_wrap2 {height:42px; line-height:46px; margin:0 auto; position:relative; width:100%; background:#ffffff none repeat scroll 0 0; }	
}



/*
@media (min-width: 300px) 은 gpro핸드폰
*/
@media (min-width: 300px) {
	.menu_depth22 { margin: 0 auto; position: relative; width: 300px; z-index: 4;	}
	.menu_depth22 li { line-height:38px; float: left; padding: 0px; }
}

@media (min-width: 400px) {
	.menu_depth22 { margin: 0 auto; position: relative; width: 400px; z-index: 4;	}
	.menu_depth22 li { float: left; padding: 0px; width: 120px; }
}

@media (min-width: 700px) {
	.menu_depth22 { margin: 0 auto; position: relative; width: 480px; z-index: 4;	}
	.menu_depth22 li { float: left; padding: 0px; width: 120px; }
}

@media (min-width: 900px) {
	.menu_depth22 { margin: 0 auto; position: relative; width: 700px; z-index: 4;	}
	.menu_depth22 li { float: left; padding: 0px; width: 120px; }
}
/*
	기본 submenu는 가로 4개
	submenu를 가로 8개로 늘리려면 width를 960px로 변경하고
	모바일에서는 높이를 
@media (min-width: 700px) {
	.menu_depth22 { margin: 0 auto; position: relative; width: 960px; z-index: 4;	}
}
*/

	.menu_depth22 ul { position: relative; }
	.menu_depth22 li a { color: #666666; font-weight: bold; padding-left: 10px; padding-right: 10px; padding-top: 0; text-align: center;}
@media (min-width: 300px) {
	.menu_depth22 li a { color: #666666; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-top: 0; text-align: center;}
}
	
@media (min-width: 400px) {
	.menu_depth22 li a { color: #666666; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-top: 0; text-align: center;}
}









	/* SUB 아이템 영역 시작 */
	.sub_item_area {text-align:center; overflow:hidden; }
	.sub_item_subject {text-align:center;  padding-top: 22px;  }
	
	@media (min-width: 300px) {
		.sub_item_subject p {line-height: 30px;height:60px; position:relative; width:100%; margin:0 auto; font-size: 30px; color:#444444;}
	}
		
	@media (min-width: 400px) {
		.sub_item_subject p {height:60px; position:relative; width:100%; margin:0 auto; font-size: 30px; color:#444444;}
	}
	
	.sub_item_subject span {font-size: 20px; color:#444444;}
	
	/* scratch intro에서 사용함 */
	.sub_item_list {margin: 0 auto;position: relative;width: 80%;}
	.sub_item_list ul {position: relative;}
	.sub_item_list li {float: left;}
	
	.sub_item_box1 li {width: 100%;}
	.sub_item_box2 li {width: 50%;}
	.sub_item_box3 li {width: 33%;}
	.sub_item_box4 li {width: 25%;}
	
	/* arduino intro에서 사용함 */
	@media (min-width: 300px) {
		.sub_item_list1 {margin: 0 auto;position: relative;width: 100%;height:0px;}
	}
		
	@media (min-width: 400px) {
		.sub_item_list1 {margin: 0 auto;position: relative;width: 100%;height:0px;}
	}
	
	@media (min-width: 700px) {
		.sub_item_list1 {margin: 0 auto;position: relative;width: 80%;height:0px;}
	}
	
	.sub_item_list1 ul {position: relative;}
	/*
	.sub_item_list1 li {float: left;padding-bottom: 20px;}
	.sub_item_list1 li:before {
		content: "\f18e";
		font-family: "FontAwesome";
		margin-right: 5px;
		margin-left: -16px;
	}
	*/	
	.sub_item_list1_div1 { width: 100%;float: left;text-align: left }
	.sub_item_list1_div1 .box1_info { width: 100%;float: left;text-align: left; font-size: 16px; line-height: 1.5; }
	
	.sub_item_list1_div2 { float: right;text-align: left }
	.sub_item_list1_div2 img { padding-bottom: 20px; padding-left: 20px; }
					
	@media (min-width: 800px) {
		.sub_item_list1_div1 { width: 70%; }
		.sub_item_list1_div1 .box1_info { width: 70%; }
		.sub_item_list1_div2 { width: 30%; }
	}
			
	.sub_item_list1_div { width: 100%;float: left;text-align: left }		
	.sub_item_list1_div  .box1_info { width: 100%;float: left;text-align: left; font-size: 16px; line-height: 1.5; }
			
			
			
			
						
	.url_link {clear:both; float: right;}
	
	/* SUB 아이템 영역 끝 */
	
	.card_area {
		/* background-color: white;
		border: 1px solid #eeeeee; */
		margin: auto auto;
		padding: 10px;
		/* max-width: 400px; */
		position: relative;
	}
	
	.card {
		background-color: white;
		border: 1px solid #eeeeee;
		margin: auto auto;
		position: relative;
	}
    
	a {
		color: #5f027e;
		cursor: pointer;
		text-decoration: none;
	}
	
	.card .square-media {
	    background-position: center center;
	    background-size: cover;
	    display: block;
	}
	.card .card-content {
		padding: 10px;
		/* height: 70px; */
		min-height: 60px;
	}
			
@media (min-width: 300px) {
	.card .category {color: #888888;font-size: 0.75em;font-weight: 300;margin-bottom: 0.5em;text-transform: uppercase;height: 34px;}
}

@media (min-width: 400px) {
	.card .category {color: #888888;font-size: 0.75em;font-weight: 300;margin-bottom: 0.5em;text-transform: uppercase;height: 34px;}
}

@media (min-width: 600px) {
	.card .category {color: #888888;font-size: 0.75em;font-weight: 300;margin-bottom: 0.5em;text-transform: uppercase;}
}
		
	.card .card-title {
	    color: #444444;
	    display: block;
	    font-size: 1.1em;
	    font-weight: 300;
	    margin-bottom: 0.2em;
	    height: 40px;
	}

	.card .shot-story {
	    color: #000000;
	    font-size: 16px;
	    font-weight: 300;
	    margin-bottom: 5px;
	    text-transform: uppercase;
	    min-height: 120px;
	    
		line-height: 1.5;
	}
	
	.card img {
		width: 100%;
		height: 251px;
	}
	 
	.card-img {}
	
	/* box 목록 */
	.box1_area {
		clear: both;
		position: relative;
		width: 100%;		
	    color: #000000;
	    font-size: 16px;
	    line-height: 1.5;
	    text-align: left;
	    margin: 20px;
	}
	
	.box1_area p { 
		margin-bottom: 16px; 
		margin-right: 20px;
    	padding-right: 20px;
	}
	
	.box1_area img { 
		width: 94%;
	}
	
	.box1_area h1 { 
    	padding-right: 10px;
   		margin-right: 10px;
	}
	
	.no_padding {
		padding: 0px;
	}   
    
	.box1_area .box1_title { color: #000000; font-size: 20px; padding: 0 0 7px;  padding-right: 10px; margin-right: 10px;}
	.box1_area .box1_title span { height:30px; line-height: 30px; }
	.box1_area .box1_title em { /* color: #999; */ display: block; font-size: 12px; font-weight: normal; margin: 3px 0 0; }
	
	/* list page image */
	.box1_area .box1_main_img { width:40%; float:left; border: 1px solid #424859; }	
	.box1_area .box1_main_img .square-media { background-position: center center; background-size: cover; display: block; }
	
	/* news box image */
	.box1_area .box1_news_img { width:40%; float:left; }
	.box1_area .box1_news_img .square-media { background-position: center center; background-size: cover; display: block; } 

	/* edu box image */
	.box1_area .box1_edu_img { width:20%; float:left; }
	.box1_area .box1_edu_img .square-media { background-position: center center; background-size: cover; display: block; } 

	/* .img_box { border: 2px solid #cccccc; width: 100%; } */
	.img_box { border: 0px solid #cccccc; width: 100%; }

	
	
	
	
	
	.box1_area .box1_info { width:56%; float:right; }
	.box1_area .box1_info p{ padding-bottom: 10px; }
	
	/* search area */
	.sidebar {
		margin-left: 30px;
	}
	
	.search_box1 {
		width: 195px;
		height: 30px;
		border: 1px solid #abadb3;
	}
	
	.search_area .search_icon1 {
		height: 30px;
	}
	

	/* ------------------------------------------ */
	/* SUB VIEW                                   */
	/* ------------------------------------------ */
	.sub_view_area {text-align:center; overflow:hidden; }
	.sub_view_subject {text-align:center; padding-top: 22px; }
	.sub_view_subject p {height:60px; position:relative; width:100%; margin:0 auto; font-size: 30px; color:#444444;}
	.sub_view_subject span {font-size: 20px; color:#444444;}
	
	.sub_view_container {
		text-align: left;
		margin: 0 auto;
		position: relative;
		width: 80%;	
	}
	
	.sub_view_img1 {
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 16px;
		width: 80%;
	}
	
	.sub_view_img1 img {
		width:100%;
	}
	
	.sub_view_img1 .sub_view_img1_subject {
		padding-top: 10px;
		text-align: center;
	}
	
	.sub_view_img1 .sub_view_img1_subject1 {
		padding-top: 10px;
		text-align: left;
	}
	
	.sub_view_img1 .sub_view_img1_subject1 ul li {
		padding-top: 10px;
	}
	
	
	.sub_view_img2 {
		margin: 0 auto;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 16px;
		width: 80%;
	}
	
	.sub_view_img2 img {width:80%;}	
@media (min-width: 300px) {
	.sub_view_img2 img {width:100%;}	
}

@media (min-width: 400px) {
	.sub_view_img2 img {width:80%;}	
}

@media (min-width: 600px) {
	.sub_view_img2 img {width:50%;}	
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.sub_view_mov1 {
		margin: 0 auto;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 20px;
		margin-bottom: 16px;
		width: 80%;
	}

	.sub_view_mov1 .sub_view_mov1_subject {
		padding-top: 10px;
		text-align: center;
	}
	
	.sub_view_mov1 .sub_view_mov1_subject1 {
		padding-top: 10px;
		text-align: left;
	}
	
	.sub_view_mov1 .sub_view_mov1_subject1 ul li {
		padding-top: 10px;
	}
	
	/* news 기사 폰트 설정  */
	.sub_view_container_div1 {
		float: left;
		text-align: left;
		width: 70%;
		font-size: 16px;
		line-height: 1.5;
		color: #000000;
	}
	
	.sub_view_container_div1 p {
		margin-bottom: 16px;
	}
	
	.sub_view_container_div1 ul {
		padding-top: 10px;
		padding-left: 30px; 
		padding-right: 30px;
	}
	
	.sub_view_container_div2 {
		float: right;
		text-align: left;
		width: 26%;
	}
	
	.sub_view_container_div2 ul li{
		padding-bottom: 10px;
		cursor: pointer;
	}
	
	
	/* edu list */
	.edu_list {margin: 0 auto;position: relative;width: 80%;}
	.edu_list ul {position: relative;}
	.edu_list li {float: left;width: 25%;}		
	.edu_list img {
		width:60%;
	}
	
	
	/* page number */
	.num a {
		background-color: #cccccc;
		border: 1px solid #e1e1e1;
		width: 100px; height: 100px; padding: 20px; margin-left: 0px; border-width: 1px;
	}
	
	.num strong {
		border: 1px solid #e1e1e1;
		width: 100px; height: 100px; padding: 20px; margin-left: 0px; border-width: 1px;
	}
	
	.num li {
		height: 40px;
	}
	
@media (min-width: 600px) {
	.num a {
		background-color: #cccccc;
		border: 1px solid #e1e1e1;
		width: 100px; height: 100px; padding: 20px; margin-left: 10px; border-width: 1px;
	}
	
	.num strong {
		border: 1px solid #e1e1e1;
		width: 100px; height: 100px; padding: 20px; margin-left: 10px; border-width: 1px;
	}
}

	.h_50 {
		height: 50px;
		padding: 20px;
	}

	.cont_title {
		font-size: 30px;
		margin-right: 10px;
    	padding-right: 10px;
	}
	
	
	.subject_title input {
		height: 30px; margin-bottom: 10px; width: 872px;
	}

	.prev_next {
	    margin: 0 auto;
	    text-align: center;
	}
	.prev_next li {
	    float: left;
	    width: 40%;
	}
	.prev_next img {
	    height: 70px;
	}
	
	.cur_page_no {
		width: 20%;
	}
	.cur_page_no span {
		font-size: 40px;
	}