@charset "utf-8";
/* CSS Document */
@import url(html5reset-1.6.1.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@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:75% /*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: 120px 0 150px; background:url(../images/ico_section.png) bottom center no-repeat;}

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:150px; height:15px; margin:0 auto; padding: 30px 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:7em /* 156px  */; font-weight:400; font-style:italic;   line-height:1;}
#intro .explain { font-size:1.6em/*18px*/; font-weight:bold;  text-align:center;  padding:20px 0;line-height:1.6;}
#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:#39b54a;
}
.diagram span.ico_user { background:url(../images/ico_user.png) center no-repeat #39b54a;} 
.diagram span.ico_share { background:url(../images/ico_share.png) center no-repeat #39b54a;} 
.diagram span.ico_story { background:url(../images/ico_story.png) center no-repeat #2d903b;} 
.diagram span.ico_story2 { background:url(../images/ico_story.png) center no-repeat #74cb80;} 
.diagram span em { color:#fff; font-weight:bold; position: absolute; bottom:25px; display:block; width:100%;}


#about .explain { font-size: 16px; margin:0 auto; max-width:88.888% /* 800px/900px */;  text-align:justify;}
#about .explain p { margin-top:15px;}


/* ----- CEO ----- */

#ceo {text-align:center;}
#ceo h3 { font-size:22px;  padding:30px;}

#ceo .explain { font-size: 16px; margin:0 auto; max-width:88.888% /* 800px/900px */;  text-align:justify;}
#ceo.explain p { margin-top:15px;}


/* ----- services------ */

#services {text-align:center;}
#services h3 { font-size:22px;  padding:30px;}

#services .explain { font-size: 16px; margin:0 auto; max-width:88.888% /* 800px/900px */;  text-align:justify;}
#services.explain p { margin-top:15px;}


/*#services  article { margin:0 auto; overflow:hidden;}

#services .serv_img { float:left; width:50%; height:450px; overflow:hidden; }
#services .serv_img img { width:auto; height:100%;}


#services .serv_txt { float:right; width:40%; padding:30px 5% 0;}
#services .serv_txt h3 { height:60px;}
#services .serv_txt h3 img { height:90%;}
#services .serv_txt .explain { font-size: 16px; margin:20px 0; text-align:justify;}
#services .serv_txt .go_link { text-align:right;}
#services .serv_txt .go_link a { display:inline-block; color:#666; margin-left:20px; padding-right:10px; background:url(../images/ico_link.png) right center no-repeat;}*/



/* ----- sataff ----- */

.staff_list { text-align:center;}
.staff_list .item  { display:inline-block; width:180px; height:180px; padding:2%; overflow:hidden;}
.staff_list .item a { display:block; width:100%; text-align:center; margin:0 auto; font-weight:400; color:#fff;  position:relative;}
.staff_list .item a:hover {
	color:#000;
	/* Firefox */
	-moz-transition-property: color;
	-moz-transition-duration: 0.3s;
	-moz-transition-delay: 0.3s;
	/* WebKit */
	-webkit-transition-property: color;
	-webkit-transition-duration: 0.3s; 
	-webkit-transition-delay: 0.3s;
	/* Opera */
	-o-transition-property: color;
	-o-transition-duration: 0.3s;
	-o-transition-delay: 0.3s;
	/* Standard */
	transition-property: color;
	transition-duration:0.3s;
	transition-delay: 0.3s;
}


.staff_list .item img { width:100%; height:100%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;	
	 }
	 
.staff_list .item:hover img { 
	opacity:0.1;
	filter:alpha(opacity=10); /* For IE8 and earlier */	
		/* Firefox */
		-moz-transition-property: opacity;
		-moz-transition-duration: 0.3s;
		-moz-transition-delay: 0.3s;
		/* WebKit */
		-webkit-transition-property: opacity;
		-webkit-transition-duration: 0.3s;
		-webkit-transition-delay: 0.3s;
		/* Opera */
		-o-transition-property: opacity;
		-o-transition-duration: 0.3s;
		-o-transition-delay: 0.3s;
		/* Standard */
		transition-property: opacity;
		transition-duration:0.3s;
		transition-delay: 0.3s;

}
.staff_list .item .label { display:block; width:180px; font-size:1.3em/*16px*/; position:absolute; bottom:30px; left:0; z-index:2; }
.staff_list .item .label * { display:block;}
.staff_list .item .label strong { font-size:14px;}
.staff_list .item .label span { font-size:11px;}


#staff .content { position:relative;}
#staffShow { position:absolute; width:800px; height:400px; top:50%; left:50%; margin:-200px 0 0 -400px; display:none; z-index:30; 
	background-color:#fff;
	-moz-box-shadow: 0px 0px 8px #000000;
	-webkit-box-shadow: 0px 0px 8px #000000;
	box-shadow: 0px 0px 8px #000000;
}
#staffShow .layer_close { position:absolute; right:0; top:0; z-index:5;}
#staffShow article { width:100%; background-color:#fff; overflow:hidden;}

.profile_img { float:left; width:40% ; height:400px; overflow:hidden; }
.profile_img img { width:126%; margin-left:-16%;}

.profile_txt { text-align:center; margin-left:40%; padding:50px 50px;}
.profile_txt h3 { font-size:2.2em /*26px*/; margin:0; font-weight:normal; font-style:italic;}
.profile_txt small { font-style:italic; }
.profile_txt .explain { font-size: 14px; margin:20px 0; text-align:left;}
.profile_txt ul li { display:inline-block; padding:0 3px; }


#stf_99 .profile_txt { margin-left:0;}



/* ========== Story ========== */

#recent_tweet { max-width:700px; margin:0 auto; text-align:center; /* background: url("../images/ico_tweet_bird.png") top center no-repeat; padding-top:80px; */ }
#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;}


.sns {text-align:center; margin-bottom:50px;}
.sns a { display:inline-block; margin:0 15px;}
.sns a span { display: block; color:#999; font-size:0.9em; }


.follow {text-align:center; padding:50px 0 0;}
.follow .fb-like { margin:0 10px; vertical-align: top; }

.follow_intro {text-align:center; padding:30px 0 0;}
.follow_intro .fb-like { margin:0 10px; vertical-align: top; }


/* ========== contact ========== */

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

#press .content { font-size:14px; padding-bottom:0;}
#press .content ul { list-style: none; margin:0; padding:0; text-align: center;}
#press .content li { padding: 10px 0; border-bottom: 1px dashed #eee;}
#press .content li a.title {}
#press .content li a.from { font-style:italic; color:#999;}
#press .content li span { margin-left: 10px; font-size: 11px;}		

.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:43%; text-align:right;}
#contact dd { float:right; width:55%; margin:0; text-align:left; } 




/* ========== footer ========== */

#footer { text-align:center;}
.bottom { font-size: 14px; padding:15px; text-align:center;}