@charset "utf-8";

/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {max-width: 100%; height: auto; }

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {width:100%; height: auto; }

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

@font-face{font-family: "NanumGothic" ; src:url("/fonts/NanumGothic.ttf")}

	body {font-family: "NanumGothic", "나눔고딕" ; } 
	
	.fluid {clear: both; margin-left: 0; width: 100%; float: left; display: block; }
	.fluidList {list-style:none; list-style-image:none; margin:0; padding:0; }
	
		.top_line {background-color: #FC6F03; width: 100%; height: 5px;}
		
	.top_logo {margin: 1.6% 0 0 0; width: 100%; text-align: center; }
	.top_title {margin: 1% 0 1% 0; width: 100%; }
	.top_nav {width: 100%; text-align: center; clear: both; }
	.mid_nav {width: 100%; text-align: center; }
	.mid_nav_line {background-color: #BEBEBE; height: 1px; }
	
	.mid_img_1 img, .mid_img_2 img, .mid_img_3 img,.mid_img_4 img,.mid_img_5 img, .mid_img_6 img, .mid_img_7 img, 
	.mid_img_8 img, .mid_img_9 img, .mid_img_10 img, .mid_img_11 img, .mid_img_12 img, .mid_img_13 img {
		border: solid 1px #BEBEBE; border-radius: 8px;
	} 
	
	.sub_title_1 {text-align: center; margin: 3% 0 1% 0; }
	.sub_title_1 article {color: #1F1F1F; }
	
	article {color: #464646; font-size: 15px; line-height: 170%; text-align: center; margin: 4% 0 8% 0; }
	
		.footer_line_1 {background-color: #BEBEBE; height: 1px; }
		
	.footer_4 {width: 100%; font-size: 13px; color: #4A4A4A; text-align: center; }
	
	span {color: #2B2B2B; font-size: 15px; font-weight: bold; } 



/* Mobile Layout: 480px and below. */
  
	.gridContainer {
		width: 92%;	/* 기본 86.45% */ 
		margin-left: auto; margin-right: auto;
		padding-left: 2.275%; padding-right: 2.275%;
		clear: none; float: none;
	}
	
	.top_title {text-align: center;}
	.top_nav {margin: 1% 0 3% 0; }
	.top_nav_1 {width: 32%; }
	.top_nav_2 {width: 25%; clear: none; }
	.top_nav_3 {width: 25%; clear: none; }
	.top_nav_4 {width: 17%; clear: none; }
	.mid_nav {margin: 3% 0 3% 0; }
	.mid_nav_1 {width: 28%; margin-left: 8.2%;}
	.mid_nav_2 {width: 24%; clear: none; }
	.mid_nav_3 {width: 33%; clear: none; }
	.mid_nav_line {margin-top: 1%; }
		
	.sub_title_1 {max-width: 78%; margin: 9% 0 6% 11%; }
	.sub_title_1 article {width: 88%; font-size: 15px; margin: 3% 0 6% 6%; }
	
	.mid_img_1, .mid_img_2, .mid_img_3, .mid_img_4,.mid_img_5, .mid_img_6, .mid_img_7, 
	.mid_img_8, .mid_img_9, .mid_img_10, .mid_img_11, .mid_img_12, .mid_img_13 {
		width: 90%; margin: 0 0 4% 4.6%; 
	} 
	
		.footer_line_1 {margin: 12% 0 4% 0; }

	.footer_4 {width: 85%; line-height: 170%; margin: 3% 0 6% 6%;  }

	.zeroMargin_mobile {
	margin-left: 0;
	}
	.hide_mobile {
	display: none;
	}




/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

	.gridContainer {
		width: 98%;	/* 기본 90.675% */ 
		padding-left: 1.1625%; padding-right: 1.1625%;
		clear: none; float: none;
		margin-left: auto;
	}
	
	.top_title {text-align: center;}
	.top_nav {margin: 1% 0 1.6% 0; }
	.top_nav_1 {width: 32%; }
	.top_nav_2 {width: 26%; clear: none; }
	.top_nav_3 {width: 26%; clear: none; }
	.top_nav_4 {width: 16%; clear: none; }
	.mid_nav {margin: 2% 0 1.6% 0; }
	.mid_nav_1 {width: 20%; margin-left: 20.5%;}
	.mid_nav_2 {width: 17%; clear: none; }
	.mid_nav_3 {width: 24%; clear: none; }
		
	.sub_title_1 {max-width: 70%; margin: 5% 0 1% 15%; }
	.sub_title_1 article {width: 84%; margin: 2% 0 6% 8%; font-size: 15px; }
	
	.mid_img_1, .mid_img_2, .mid_img_3, .mid_img_4,.mid_img_5, .mid_img_6, .mid_img_7, 
	.mid_img_8, .mid_img_9, .mid_img_10, .mid_img_11, .mid_img_12, .mid_img_13 {width: 45%; } 
	
	.mid_img_1, .mid_img_3, .mid_img_5, .mid_img_7, .mid_img_9, .mid_img_11 {margin: 4% 0 0 2.2%; }
	.mid_img_2, .mid_img_4, .mid_img_6, .mid_img_8, .mid_img_10 {margin: 4% 0 0 5%; clear: none; }
	
		.footer_line_1 {margin: 9% 0 0 0; }

	.footer_4 {width: 100%; margin: 4% 0 4% 0;}

	.hide_tablet {
	display: none;
	}
	.zeroMargin_tablet {
	margin-left: 0;
	}
}




/* Desktop Layout: 769px to a max of 1280px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

	.gridContainer {
		width: 100%; 	/* 기본 88.5% */ 
		max-width: 1280px; 	/* 기본 1232px */ 
		padding-left: 0.75%; padding-right: 0.75%;
		margin: auto;
		clear: none; float: none;
		margin-left: auto;
	}

	.top_title {width: 20%; text-align: right; }
	.top_nav {width: 80%; clear: none; margin: 1% 0 1% 0; }
	.top_nav_1 {width: 25%; margin-left: 18%;}
	.top_nav_2 {width: 20%; clear: none; }
	.top_nav_3 {width: 20%; clear: none; }
	.top_nav_4 {width: 14%; clear: none; }
	.mid_nav {margin: 1.6% 0 1% 0; }
	.mid_nav_1 {width: 12%; margin-left: 33%; }
	.mid_nav_2 {width: 10%; clear: none; }
	.mid_nav_3 {width: 14%; clear: none; }
	.mid_nav_line {width: 78.8%; margin: 0.8% 0 1% 10.6%; }
		
	.sub_title_1 article {width: 41%; margin: 1% 0 3% 30%; font-size: 15px; }
	
	/* 2단배열 - 37% / 3단배열 - 24.5% */ 
	.mid_img_1, .mid_img_2, .mid_img_3, .mid_img_4,.mid_img_5, .mid_img_6, .mid_img_7, 
	.mid_img_8, .mid_img_9, .mid_img_10, .mid_img_11, .mid_img_12, .mid_img_13 {
		width: 28%; margin-top: 2%; 
	} 
	
	.mid_img_1, .mid_img_4, .mid_img_7, .mid_img_10 {margin-left: 4.6%; } 
	.mid_img_2, .mid_img_3, .mid_img_5, .mid_img_6, .mid_img_8, .mid_img_9, .mid_img_11, .mid_img_12 {margin-left: 3.3%; clear: none;} 

		.footer_line_1 {width: 78.8%; margin: 6% 0 0 10.6%; }

	.footer_4 {width: 100%; margin: 2% 0 2.5% 0; }

	.zeroMargin_desktop {
	margin-left: 0;
	}
	.hide_desktop {
	display: none;
	}
}