@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/ 
*/

html { font-family:dotum;  font-size:12px; color:#777777; overflow-y: scroll; background:url(/images/main/bg.jpg) repeat; }
body { width:100%; margin:0 0 0 0; text-align:left;}
h1,h3,h4,h5,h6 {display:none;}
img { border:none; margin:0; padding:0; vertical-align:middle; }
input{ vertical-align:top; }
ul {margin:0; padding:0; list-style:none; }
li {margin:0; padding:0; list-style:none; vertical-align:top;}
p { margin:0; padding:0; list-style:none; }
p.p1 { clear:both; margin:0; padding:0; list-style:none; }
table { list-style:none; }
input {color: #777; margin:0; padding:0;}
check { vertical-align:top; margin:0; *margin:-7px 0 0 0;  }
select { font-family:dotum;  font-size:12px; color:#777777; height:20px; }

/* ũ  */
a {cursor:pointer; }
a:link {color:#525252; text-decoration: none;}
a:hover {color:#525252; text-decoration: underline;}
a:visited {color:#525252; text-decoration: none;}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	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/
*/

/* Mobile Layout: 480px and below. */



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



@media only screen and (max-width:700px) and (min-width: 0px) {
#wrap1{display:none;}
#wrap2{display:none;}
#wrap4{display:none;}
#wrap3{ width:100%; height:100%;}

html{background:url(/images/m/bg.jpg) repeat;}  

#nav{ width:100%; height:108px; text-align:center; }
	#logo{ width:100%; height:57px; padding-top:7px; margin:0 auto; background:url(/images/m/logoBg.jpg) repeat-x;}
	#menu{ width:97%; height:44px; margin:auto; background:url(/images/m/menuBg.jpg) repeat-x; margin:auto; padding-left:3%;}
		.menutitle{ padding-right:1%; display:inline-block;}
		.menuline{  width:3px; height:auto; padding:0% 4%; display:inline-block; } 
	#con_wrap{ width:100%; height:0 auto; background-color:#FFF; display:inline-block; margin:auto;}
		#con1{ width:33%; height:auto; float:left; }
		#con2{ width:33%; height:auto; float:left; }
		#con3{ width:33%; height:auto; margin-right:1%; background:url(/images/m/banner06.jpg) repeat-x; float:left;}
		#con4{ width:100%; height:30%;  padding:11px 0px; background:#fff; margin:0 auto; display:inline-block; text-align:center;  }
			#con4 img{width:40%;height:auto; padding:0% 2%;}
#footer{ width:100%; background:url(/images/m/copyBg.jpg) repeat-x; height:97%; padding:1% 0; float:left; }
	#copylogo{ width:20%;  float:left; padding:0 3%;}
	#copy{ width:70%; padding-left:10px; float:left;}

}


@media only screen and (max-width:1000px) and (min-width: 701px) {
#wrap1{display:none;}
#wrap3{display:none;}
#wrap4{display:none;}
#wrap2 {width:768px; height:auto; }

html{background:url(/images/main/bg2.jpg) repeat;}  


/*Main*/

/* nav & footer */
#nav{ width:768px; height:95px;}
	#logo{width:112px; height:62px; background:url(/images/700/logo_bg.jpg); padding:13px 35px 20px 42px; float:left;}
	#menu{width:579px; height:95px; padding-left:189px; background:url(/images/700/menubg.jpg) repeat-x; }
		.menu_title{ padding:20px 15px; float:left;}
		.menu_title2{ padding:20px 12px 20px 12px; float:left;}
		.menu_title3{ padding:20px 10px; float:left;}
		.menu_line{width:3px; height:95px; float:left;}

/*Content*/
#con_top{ width:768px; height:565px;}
	#con1{ width:256px; height:565px;float:left; background-color:#FFF;} 
		#con1_1{width: 200px; height: 227px; padding: 25px 22px 23px 34px;}
		#con1_title{width:200px; height:30px; padding-bottom:10px;}
		#con1_content{ width:auto; height:183px; padding-bottom:23px;}
		#con1_bn{width:200px; height:248px; background:url(/images/700/conBg1.jpg); padding:15px 22px 25px 34px; }
		
		
	#con2{ width:256px; height:565px; background:url(/images/700/conBg.jpg) repeat-y;  float:left;} 
		#con2_bn1{width:200px; height:202px; padding:25px;}
		#con2_bn2{width:200px; height:259px; padding:29px 28px 25px 28px; background:url(/images/700/conBg2.jpg);}
		
	#con3{ width:256px; height:565px; float:left; } 
		#con3_1{width:200px; height:227px; background:url(/images/700/conBg.jpg) repeat-y; padding:25px 34px 38px 25px;}
		#con3_bn{width:200px; height:220px; padding:29px 34px 25px 22px; background:url(/images/700/conBg3.jpg) no-repeat; }
		
		
#con_button{width:768px; float:left;}
	#con4{width:768px; height: auto; overflow:hidden; background:#FFF;}
		#con4_title{width:209px; height:22px; padding:40px 0px 22px 33px;}
		#con4_content{ width: 700px; height:200px;  padding: 20px 31px 51px 25px;}
				#con4_content img{border:#CCC solid 1px;}
				#con4_content li{ padding-bottom:15px; float:left;}
				.con4_img{ padding-right:50px;}
				

/* footer */
#footer{ width:700px; height:auto; padding:29px 34px; background:#FFF; float:left;}
	#copy{ float:left; padding: 0px 15px 15px 0px; }
	#copy2{ font-size:11px; font:"돋움"; color:#999; font-weight:bold;}
	#footer img{ padding-top:10px;}

}

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

@media only screen and (max-width:1260px) and (min-width: 1001px) {
/*전체*/
#wrap4{display:none;}
#wrap2{display:none;}
#wrap3{display:none;}
#wrap1 {width:1000px; height:auto; background:url(/images/main/warp_bg1.jpg) repeat-y; display:inline-block; }

html{background:url(/images/main/bg.jpg) repeat;}  

/*Main*/

/* nav & footer */
#nav{ width:245px; height:auto; background:url(/images/main/navBg.jpg) repeat-y; float:left; z-index:2;}
	#logo{width:193px; height:100px; background:url(/images/main/logoBg.jpg); padding:25px 0px 0px 52px;}
	#menu{width:245px; height:233px; background:url(/images/main/menuBg.jpg);}
	#bn_tel{width:245px; height:215px;}
		#bn_card{ width:185px; padding:23px 30px; border-bottom:#dadada 1px solid;}
		#bn_card a { padding-right:6px;}
	#Qmenu{width:245px; height:80px;}
#footer{ width:245px; height:auto; padding:33px 30px;}
	#footer li{ padding-bottom:20px;}

/*Content*/
#con_top{ width:755px; height:565px; margin-left:245px; z-index:1; }
	#con1{ width:250px; height:565px; background:url(/images/main/contentBg1.jpg) repeat-y; float:left;} 
		#con1_1{ width:200px; height:227px; padding:25px 30px 23px 20px; }
		#con1_title{width:200px; height:30px; padding-bottom:10px;}
		#con1_content{ width:auto; height:183px; padding-bottom:23px;}
		#con1_bn{width:200px; height:248px; background:url(/images/main/con1Bg.jpg); padding:16px 25px 25px 25px; }
		
		
	#con2{ width:250px; height:563px; background:url(/images/main/contentBg1.jpg) repeat-y; float:left;} 
		#con2_bn1{width:200px; height:202px; padding:25px;}
		#con2_bn2{width:200px; height:259px; padding:29px 25px 25px 25px; background:url(/images/main/con2Bg.jpg);}
		
	#con3{ width:255px; height:515px; float:left; } 
		#con3_1{width:200px; height:227px;  background:url(/images/main/contentBg2.png) repeat-y;  padding:25px 31px 38px 25px;}
		#con3_bn{width:200px; height:220px; padding:29px 30px 26px 25px; background:url(/images/main/con2Bg.png); }
		
		
#con_button{width:755px; float:left;}
	#con4{width:755px; height: 950px; background:url(/images/main/contentBg4.png) repeat-y;}
		#con4_title{width:209px; height:22px; padding:40px 0px 22px 25px;}
		#con4_content{ width: 700px; height:200px;  padding: 20px 31px 51px 25px;}
				#con4_content img{border:#CCC solid 1px;}
				#con4_content li{ padding-bottom:15px; float:left;}
				.con4_img{ padding-right:50px;}

}

@media only screen and (min-width: 1261px) {
#wrap1{display:none;}
#wrap2{display:none;}
#wrap3{display:none;}
#wrap4 {width:1303px; height:100%; background:url(/images/main/warp_bg1.jpg) repeat-y; display:inline-block; }

#nav{ width:245px; height:auto; background:url(/images/main/navBg.jpg) repeat-y; float:left; }
	#logo{width:193px; height:100px; background:url(/images/main/logoBg.jpg); padding:25px 0px 0px 52px;}
	#menu{width:245px; height:233px; background:url(/images/main/menuBg.jpg);}
	#bn_tel{width:245px; height:215px;}
	#bn_card{ width:185px; padding:23px 30px; border-bottom:#dadada 1px solid;}
		#bn_card a { padding-right:6px;}
	#Qmenu{width:245px; height:80px;}
#footer{ width:245px; height:auto; padding:33px 30px;}
	#footer li{ padding-bottom:20px;}

/*Content*/
#con{width:750px; height:auto;  float:left; }
#con_top{ width:750px; height:565px; background:#999; clear:both; }
	#con1{ width:250px; height:565px; background:url(/images/main/contentBg2.jpg) repeat-y; float:left;} 
		#con1_1{ width:200px; height:227px; padding:25px 30px 23px 20px; }
		#con1_title{width:200px; height:30px; padding-bottom:10px;}
		#con1_content{ width:auto; height:183px; padding-bottom:23px;}
		#con1_bn{width:200px; height:248px; background:url(/images/main/con1Bg.jpg); padding:16px 25px 25px 25px; }
		
		
	#con2{ width:250px; height:563px; background:url(/images/main/contentBg1.jpg) repeat-y; float:left;} 
		#con2_bn1{width:200px; height:202px; padding:25px;}
		#con2_bn2{width:200px; height:259px; padding:29px 25px 25px 25px; background:url(/images/main/con2Bg.jpg);}
		
	#con3{ width:250px; height:515px; float:left; } 
		#con3_1{width:200px; height:227px;  background:url(/images/main/contentBg2.jpg) repeat-y; padding:25px 25px 38px 25px;}
		#con3_bn{width:200px; height:220px; padding:29px 25px 26px 25px; background:url(/images/main/con2Bg.png); }
		
		
#con_button{width:750px; height:auto; float:left; }
	#con4{width:750px; height: 950px; background:url(/images/main/contentBg4.png) repeat-y;}
		#con4_title{width:209px; height:22px; padding:40px 0px 22px 25px;}
		#con4_content{ width: 700px; height:200px;  padding: 20px 25px 51px 25px;}
				#con4_content img{border:#CCC solid 1px;}
				#con4_content li{ padding-bottom:15px; float:left;}
				.con4_img{ padding-right:50px;}
				
#con5{ width:308px; height:auto; background:#000; float:right; background:url(/images/main/contentBg5.png) repeat-y;}
	#con5_title{ padding:25px 28px 0px 22px; width:258px; height:32px;}
	#con5_img{ padding:20px 20px 215px 20px;}
		#con5_img li{ padding-bottom:20px;}


}