@charset "utf-8";
@max_width: 1900px;

/* Google Font API */
@import url('http://fonts.googleapis.com/earlyaccess/nanumgothic.css');

body { margin:0; font-size:16px; font-family:Naum Gothic, Malgun Gothic, Gulim; }
/* È­¸é¿¡ µû¸¥ ÆùƮũ±â ¼³Á¤ */
@media screen and (min-width:401px) and (max-width:640){
}
	h3 { font-size:2em; letter-spacing:-1px; }
	h4 { font-size:1.9em; }
	p { font-size:1.7em; }
@media (max-width:640px) {
	h3 { font-size:1em; letter-spacing:-1px; }
	h4 { font-size:0.95em; }
	p { font-size:0.85em; }
}

h3,h4 { font-family:Malgun Gothic, dotum; }
p,td,li,dt,dd { font-family:Naum Gothic, Malgun Gothic, Gulim; }

img { border:none; display:block; }
ul, li, img { margin:0; padding:0; }
.btn { cursor:pointer; }
.flexible { width:200%; height:auto; }

#wrap { width:100%;  background:#fff; background-color: #FFF;  }

#header {
	margin:0 auto; padding:0; background:#fff; background-color: #FFF; border:none;
	width:100%; max-width:@max_width; height:100px;
	position:relative;
	/* »ó´Ü ·Î°íºÎºÐ Å©±â Á¶Àý */
	@media screen and (min-width:401px) and (max-width:800){
		height:80px;
	}
	@media (max-width:400px) {
		height:65px;
	}
	.logo { 
		position:absolute; left:28%; top:30%;
		width:33%; max-width:207px; min-width:150px;
	}
	.Menu { 
		position:absolute; left:2%; top:17%; padding:5px 10px; 
		width:4.5%; max-width:55px; min-width:35px;
	}
	#Menu { display:none;
		position:absolute; left:-305px; background:#fff;
		width:300px; height:615px; z-index:2;
		box-shadow:0px 4px 4px 2px rgba(0,0,0,0.1);
		span.Menu { display:block; padding:40px 32px 18px 25px; position:absolute; top:0px; right:0px; color:#777; font-size:24pt; }
		ul {
			width:100%;
			list-style:none;
			li { width:85%; padding-left:15%; height:64px; font-size:1.28em; line-height:64px; font-weight:700; color:#444; cursor:pointer; }
			li.blue { color:#f5f5f5; background:rgba(0, 179, 237, 1);  }
			li:first-child { width:100%; padding:0; height:100px; }

		}
	}
	.Call {
		position:absolute; right:2%; top:10%; padding:10px 5px;
		width:10%; max-width:120px; min-width:85px;
	}

	.Call2 {
		position:absolute; right:2%; top:16%; padding:10px 5px;
		width:10%; max-width:120px; min-width:85px;
	}

}

#content {
	margin:0 auto; padding:0; 
	width:100%; max-width:@max_width;
	/* ¸ÞÀÎÆäÀÌÁö */
	&.main {
		.floor { margin-bottom:0%; }
		.slogan { margin-bottom:0%; }
		.link {
			position:relative;
			margin-bottom:0%;
			.left {
				width:50%; margin-bottom:0%;
				.top { margin-bottom:0%; }
				.bottom { }
				.bottom_left { width:5%; float:left; margin-right:2%; }
				.bottom_right { width:50%; }
			}
			.left_bottom {
				position:absolute;
				left:0; top:52%; width:49.5%;
				img { float:left; width:50%; }
			}
			.counter {
				position:absolute;
				right:0; top:0; width:50%;
			}
			.right1 {
				position:absolute;
				right:0; top:0; width:50%;
				background:#444b5d;
			}
		}

		.banner {
		 	position:relative; margin-bottom:1%;
			.left { width:49.5%; }
			.right { position:absolute; right:0; top:0; width:49.5%; }
		}
		.contact {
		 	position:relative; margin-bottom:1%;
			.left { width:49.5%; }
			.right { position:absolute; right:0; top:0; width:49.5%; }
		}
		.insurance {
			margin:1% 0;
		}
	}
	/* ¼­ºêÆäÀÌÁö */
	&.sub {
		position:relative;
		background:#dfe5e6;
		h1 { 
			margin:0; padding:0;
			img { width:100%; }
		}
		/* »ó´Ü¸Þ´º */
		ul.three {
			width:99.9%; list-style:none;
			background:#3a3a3a;
			li { width:33.3%; float:left; img { width:100%; } }
			li:first-child { width:33.4%; }
		}
		ul.two {
			width:100%; list-style:none;
			li { width:50%; float:left; img { width:100%; } }
		}
		ul.four {
			width:100%; list-style:none;
			background:#3a3a3a;
			li { width:25%; float:left; img { width:100%; } }
			li:first-child { width:25%; }
		}
	
	
	
	}
	.detail {
		background:#dfe5e6; padding-bottom:3%;
		ul.desc {
			width:100%; list-style:none;
			margin-top:3%;
			li {
				width:94%;
				background:#fff;
				margin:0 3%;
				h3, h4 { 
					margin:3% 5% 0 5%;
					strong { color:#00bbee; margin-right:1%; }
				}
				p { color:#444; }
			}
		}
		/* º´¿ø¼Ò°³ */
		ul.intro {
			li {
				width:94%;
				background:#fff;
				margin:0 3%;
				h3, h4 { 
					margin:3% 5% 0 5%;
					strong { color:#00bbee; margin-right:1%; }
				}
				h3 { padding:3% 0; }
				h4 { padding:1% 0; }
				p { margin:0 5%; padding:1% 0; color:#555; line-height:150%; }
				img { width:100%; margin-top:1%; }
			}
		}
		/* ÷´ÜÀåºñ */
		ul.technology {
			li {
				dl {
					width:94%; margin:2.5% 3%; position:relative;
					dt { 
						width:25%; max-width:125px; padding:3% 0;
						img { width:100%; } 
					}
					dd { 
						position:absolute; top:0; left:17%;
						&.h3 {
							top:10%;
							font-weight:bold;
							font-size:0.95em;
						}
						&.p {
							top:40%;
							font-size:0.75em; color:#333; font-family:nanum gothic;
						}
					}
				}
			}
		}
		/* ÀÓÇöõÆ® ½Ã¼ú¹ý */
		ul.process {
			li {
				h3 {
					width:94%; padding:0 3%; margin:2% 0 0 0;
					background:#00b4ee;
					line-height:200%;
					color:#fff;
				}
				h4 {
					width:94%; padding:0 3%; margin:2% 0 0 0;
					line-height:19px;
					img { display:inline-block; margin-right:5px; width:20px; }
				}
				p {
					width:94%; padding:0 3%;
					position:relative;
					line-height:160%;
					strong { color:#00b4ee; }
					&:last-child { padding-bottom:2%; }
				}
			}
		}
		/* FAQ */
		ul.faq {
			li {
				h3 {
					width:94%; padding:0 3%; margin:2% 0 0 0;
					background:#00b4ee;
					line-height:200%;
					color:#fff;
				}
				p {
					width:88%; padding:0 6%;
					position:relative;
					line-height:170%;
					span { position:absolute; top:0px; left:2.5%; width:3%; font-weight:bold; color:#00b4ee; }
					&:last-child { padding-bottom:2%; }
				}

			}
		}
		/* ÀÇ·áÁø */
		ul.director {
			width:94%; margin:0% 3%;
			background:#fff; padding:3% 0 3% 0;
			li {
				width:94%; margin:0 3%;
				border-bottom:2px solid #85cee6;
				padding:1% 0 1% 0;
				dl {
					 position:relative;
					dt { 
						position:absolute;
						width:15%; img { width:100%; border:2px solid #eee; } 
					}
					dd { 
						margin-left:18%; top:0;
						h4 {
							margin:0;
							font-weight:bold;
							strong { font-size:1.2em; }
						}
						p {
							line-height:150%; 
							font-size:75%;
							word-spacing:1px;
							letter-spacing:-2px;
						}
					}
				}
			}
		}
		/* ½Å¹®º¸µµ */
		p.reports {
			width:92%; padding:2% 4%;
			line-height:170%;
			background:#fff;
			color:#333;
		}
		
	}
	/* »ó´ã½Åû Æû */
	.counsel {
		border:0px solid red;
		background:#fff;
		margin:3.2% auto; width:87.6%; padding:3%;
		input[type=radio], label { cursor:pointer; }
		.tooth { font-weight:bold; font-family:malgun gothic; }
		.userinfo {
			font-family:malgun gothic;
			font-weight:bold;
			input[type=number] { width:40px; }
		}
		.desc_agree {
			font-size:9pt; font-family:dotumche; color:#666; width:230px;
		}
		#Submit { background:#00b5ee; font-size:13pt; border:none; padding:15px 20px; color:#f5f5f5; border-radius:3px; font-weight:bold; font-family:malgun gothic; margin-left:10%; }
		
	}

	
}

#footer {

	margin:0 auto; padding:0; 
	width:100%; max-width:@max_width; border:none;
	ul { 
		list-style:none; width:100%;
		li { float:left; } 
	}
	ul.foot_header {
		li { width:25%; }
	}
	ul.foot_menu {
		li { width:25%; }
	}
	
	ul.foot_menu2 {
		li { width:16%; text-align:center;}

	}

	p {
		clear:both;
		margin:0;
		color:#444;
		font-size:0.75em;
		font-weight:600;
		padding:2% 4% 0 4%; 
		line-height:160%;
	}
	tt { 
		margin:0;
		font-size:0.75em;
		color:#444;
		font-family:Nanum Gothic,Malgun Gothic;
		font-weight:600;
		padding:1% 4% 0 4%; 
		line-height:200%;
	}
}