html {
    height: 100%; 
    }
    
* { margin:0; padding:0; }


/*@import url(http://fonts.googleapis.com/css?family=Noto+Sans);*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

/*
:lang(ko) {
  font-family: 'Noto Sans', sans-serif;
}
*/
/*
@font-face{
font-family:'Noto Sans KR', sans-serif;
src:url('/webfont/NotoSans.eot');
src:local(※),
url('/webfont/NotoSans.woff') format('woff');
}
*/


BODY {	
		background: url(img/back_grid_g.png) repeat;
		background-size: 350px 150px;
		/* background: #FFFFFF url(#) repeat ; */
		margin:0px; padding:0px;
		font-family: 'Noto Sans KR', sans-serif;
		/*font-family: "Nanum Gothic", sans-serif;*/
		height: 100%;
	} 

    .button img{ border: 1px solid white ; }
    .button:hover img{ border: 1px solid #BBBBBB ; filter:alpha(opacity=80); opacity:.8;}
    .button:hover{ color: #BBBBBB ; /* Dummy definition to overcome IE bug */ }

	a:link, a:visited, a:active { color:grey ; text-decoration:none ; }
	a:hover { color:black ; text-decoration:none ; }
	
	.skrollr-desktop body {
		height:100% !important;
	}
	
	p {
		margin:1em 0;
	}
	
/*------------------------- Parallax ----------------------------------------------*/	
	
	.parallax-image-wrapper {
		position:fixed;
		left:0;
		width:100%;
		overflow:hidden;
	}

	.parallax-image-wrapper-50 {
		height:50%;
		top:-50%;
	}

	.parallax-image-wrapper-100 {
		height:100%;
		top:-100%;
	}

	.parallax-image {
		display:none;
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		background-repeat:no-repeat;
		background-position:center;
		background-size:cover;
	}

	.parallax-image-50 {
		height:200%;
		top:-50%;
	}

	.parallax-image-100 {
		height:100%;
		top:0;
	}

	.parallax-image.skrollable-between {
		display:block;
	}

	.no-skrollr .parallax-image-wrapper {
		display:none !important;
	}

	#skrollr-body {
		height:100%;
		overflow:visible;
		position:relative;
	}

	.gap {
		background:transparent center no-repeat;
		background-size:cover;
	}

	.skrollr .gap {
		background:transparent !important;
	}

	.gap-50 {
		height:50%;
	}

	.gap-100 {
		height:100%;
	}

	.header, .content {
		background:#fff;
		padding:1em;

		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
	}

	.content-full {
		height:100%;
	}

	#done {
		height:100%;
	}
	
	

	
	
/*----------Text--------------------------------------------------------*/

	.b_text_s {
	font-size: 12px;
    color: black;
    font-weight: 100;
    line-height: 150%;
    text-decoration: none;
	}

	.b_text_m {
	font-size: 15px;
    color: black;
    font-weight: 100;
    line-height: 170%;
    /*text-decoration: none;*/
	}
	
	.b_text_l {
	font-size: 18px;
    color: black;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
	}
	
	
	.g_text_s {
	font-size: 10px;
    color: grey;
    font-weight: 100;
    line-height: 150%;
    text-decoration: none;
	}

	.g_text_m {
	font-size: 15px;
    color: grey;
    font-weight: 100;
    line-height: 150%;
    text-decoration: none;
	}
	
	.g_text_l {
	font-size: 18px;
    color: grey;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
	}
	
	
	.w_text_s {
	font-size: 10px;
    color: white;
    font-weight: 100;
    line-height: 150%;
    text-decoration: none;
	}

	.w_text_m {
	font-size: 15px;
    color: white;
    font-weight: 100;
    line-height: 150%;
    text-decoration: none;
	}
	
	.w_text_l {
	font-size: 18px;
    color: white;
    font-weight: 400;
    line-height: 150%;
    text-decoration: none;
	}
	


/*----------BackGround--------------------------------------------------------*/

	#tint {
	position:fixed; /* This is very important! */
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url(index_img/grid.png) repeat;	
	/* Display on top of background */
	z-index:1;
	}
	
	#bg_grid {
	border:solid red 1px; 
	position:fixed; /* This is very important! */
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url(img/back_grid_g.png) repeat;	
	/*background-image: url("index_img/black/blk_50.png");	
	background-repeat: repeat; */
	/*background-color: rgba(0,0,0,0.5); */
	
	}
	
	#logo {
    position:absolute;
    margin:auto;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	}
	
	#login {
	position:absolute;
	right: 16px;
	top: 15px;
	width: 60%;
	text-align: right;
	border:solid red 0px;
	}
	
	.login {
	position:relative; 
	display:inline-block;
	height:25px;
	}
	
	
/*----------Menu--------------------------------------------------------*/
	
	#head {
	width:100%; height:40px;
	position: fixed; top:0px; left:0px;
	background-color: rgba(0,0,0,0.7);
	z-index:1000;
	}
	
	#menu_icon {
	border: solid red 0px;
	width:50px; height:40px;
	position: fixed; top:0px; left:0px;
	z-index:1001;
	}
	
	#menu {
	width:250px; height:100%;
	position: fixed; top:0px; left:0px;
	background-color: rgba(0,0,0,0.8);
	z-index:1002;
	}
	
	#menu_list {
	border:solid red 0px;
	width:220px; 
	position: fixed; top:0px; left:30px;
	}
	
	a.ex2:link, a.ex2:visited, a.ex2:active { color:white ; text-decoration:none ; }
	a.ex2:hover { color:black ; text-decoration:none ; }
	
	a.ex3:link, a.ex3:visited, a.ex3:active { color:white ; text-decoration:none ; }
	a.ex3:hover { color:grey ; text-decoration:none ; }
	
	
	button.accordion {
    background-color: black;
    color: white;
    cursor: pointer;
    padding: 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 13px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: black;
}

button.accordion:after {
    content: "+";
    font-size: 16px;
    color: white;
    margin-left: 25px;
}

button.accordion.active:after {
    content: "-";
}

div.panel {
    padding: 0 18px;
    background-color: grey;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 800px;
}
	
	
	#timeline {
	border:solid red 0px;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent center no-repeat;
	background-size:cover;
	overflow:hidden;
	z-index:1200;
	}

	
	.box {
		position:absolute;
		left:0;
		width:10px;
		height: 10px;
		background:#09f;
	}



	
	
	#footer {
	width:400px; height:10px;
	position: fixed; top: 10px; right:10px;
	font: 10px helvetica;
    color: white;
    font-weight: lighter;
    text-align: right;
    text-decoration: none;
    clear:both;
	}

	

/*----------Main Contents--------------------------------------------------------*/

	#container {
	border:solid red 0px;
	background-repeat: none;
    width: 100%; 
    height: 100%;
    position: relative; top: 0px;
    margin-left: auto;
    margin-right: auto;
    }
    
	#container_main {
	border: solid blue 0px;
	position: relative; top: 30px;
	}
	
	#main_content {
	position: relative; top:0px; left:0px;
	/*background: url(index_img/transparent/trans_70.png) repeat;*/
	background: transparent;
	}