@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Rambla:400,700,400italic,700italic|Crete+Round:400,400italic);

body { font-family:  "NanumGothic", "Malgun Gothic","Rambla", sans-serif; font-size:70% /*12px*/; line-height:1.6; color:#333; padding:0; margin:0;}

a:link,
a:visited,
a:hover,
a:active { color:#000; text-decoration:none;}

body { background:url(../images/background.png) center top repeat fixed;}

.gridContainer  { width:100%; }
footer .content,
section .content { width:900px; margin:0 auto; padding:0 0.9%;}
.clearfix { clear:both;}
section { padding: 100px 0 50px 0px; }
section h2 { display:none;}

.overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 25;
	background:url(../images/overlaybg.png) repeat;
}

/* ========== header ========== */
#header { width:100%; border-bottom:1px solid #ccc; 
	opacity:0.96;
	filter:alpha(opacity=96); /* For IE8 and earlier */	
 }
#header h1 { width:216px; height:33px; margin:0 auto; padding: 15px 0;}
#header h1 a { display:block; }

#header.header_fixed { 
	position: fixed; 
	z-index: 20; 
	width:100%;
	left:0;
	margin:0 auto; 
	background:url(../images/background.png) center top repeat;	
	}
	
#header.header_fixed h1 { display: none; }

#header nav {text-align:center;}
#header nav li { display:inline; }
#header nav a { display:inline-block; font-family: "Rambla", sans-serif; font-size:1.076em /*14px/13px*/; font-weight:bold; color:#000; padding:15px 28px; text-transform:uppercase; }

/* ========== contents ========== */
/* ----- intro ----- */
#intro { text-align:center; line-height:1.2;} 
#intro h2 { display:block; font-family: 'Crete Round', serif; font-size:12em /* 156px  */; font-weight:100; font-style:italic; line-height:1;}
#intro .explain { font-size:1.6em/*18px*/; font-weight:bold;  text-align:center;  padding:10px 0;line-height:1;}
#intro .think { font-family: 'Rambla', sans-serif; font-size:4.4em/*53px*/; font-weight:normal; font-style:italic;}

/* ----- about ----- */
#about {text-align:center;}
#about h3 { font-size:22px;  padding:30px;}
.diagram {}
.diagram span { display:inline-block; position:relative;  width:120px; height:120px; overflow:hidden; margin:0 10px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color:#09F;
}
.diagram span.ico_people { background:url(../images/ico_people.png) center no-repeat #09F;} 
.diagram span.ico_connect { background:url(../images/ico_connect.png) center no-repeat #09F;} 
.diagram span.ico_value { background:url(../images/ico_value.png) center no-repeat #09F;} 
.diagram span em { color:#fff; font-weight:bold; position: absolute; bottom:25px; display:block; width:100%;}
#about .explain { margin:0 auto; max-width:88.888% /* 800px/900px */;  text-align:justify; height:450px;}
#about .explain p { margin-top:15px;}

/* ----- service ------ */
#serviceShow  article { margin:0 auto; overflow:hidden;}
#serviceShow .serv_img { float:left; width:50%; height:450px; overflow:hidden; }
#serviceShow .serv_img img { width:auto; height:100%;}
#serviceShow .serv_txt { float:right; width:40%; padding:30px 5% 0;}
#serviceShow .serv_txt h3 { height:60px;}
#serviceShow .serv_txt h3 img { height:90%;}
#serviceShow .serv_txt .explain { margin:20px 0; text-align:justify;}
#serviceShow .serv_txt .go_link { text-align:center;}
#serviceShow .serv_txt .go_link a { display:inline-block; color:#666; margin-left:10px; padding-right:10px;}

/* ========== business ========== */
#recent_tweet { max-width:700px; margin:0 auto; text-align:center; }
#recent_tweet p { font-size:1.4em /*16px*/;}
#recent_tweet p a { font-style:italic; color:#39b54a; }
#recent_tweet span { font-size:0.9em /*11px*/; font-style:italic; color:#999;}
#business .explain { margin:0 auto; max-width:88.888% /* 800px/900px */;  text-align:justify;}
#businessShow .serv_img img { width:auto; height:100%;}

/* ========== history ========== */
#history { clear:both; padding-bottom:0; background:none;}
#history .history { padding-bottom:0;}
#history h3 { font-size:2em /*24px*/; font-style:italic; color:#999; text-align:center;}

#history dl { clear:both;}
#history dt { float:left; width:24%; text-align:right;}
#history dd { float:right; width:75%; margin:0; text-align:left; } 


/* ========== contact ========== */
#contact { clear:both; padding-bottom:0; background:none;}
#contact .content { padding-bottom:0;}
#contact h3 { font-size:2em /*24px*/; font-style:italic; color:#999; text-align:center;}

.guide,
.address,
.map { padding-top:12px; padding-bottom: 30px;}

.guide { max-width:500px; margin:0 auto; text-align:center; }

#contact dl { clear:both;}
#contact dt { float:left; width:29%; text-align:right;}
#contact dd { float:right; width:69%; margin:0; text-align:left; } 

/* ========== footer ========== */
#footer { text-align:center;}
.bottom { padding:0px; text-align:center;}