@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

@font-face {
font-family: 'DreamOrphans-Regular';
font-style: normal;
font-weight: normal;
src: local('DreamOrphans-Regular'), url('dream orphans.woff') format('woff');
}


@font-face {
font-family: 'DreamOrphans-BoldItalic';
font-style: normal;
font-weight: normal;
src: local('DreamOrphans-BoldItalic'), url('dream orphans bd it.woff') format('woff');
}


@font-face {
font-family: 'DreamOrphans-Bold';
font-style: normal;
font-weight: normal;
src: local('DreamOrphans-Bold'), url('dream orphans bd.woff') format('woff');
}


@font-face {
font-family: 'DreamOrphans-Italic';
font-style: normal;
font-weight: normal;
src: local('DreamOrphans-Italic'), url('dream orphans it.woff') format('woff');
}



body{
	margin : 0px auto;
}
div.navigation{
	position : relative;
	margin : auto;
	width : 100%;
	
	font-size:15px;
	letter-spacing:1px;

	
}
div.logo{
	color:#fff;
	font-size : 36px;
	display : inline-block;
	margin-left : 20px;
	line-height : 80px;
	
	height : 90px;
	font-weight:lighter;
	padding-left:20px;
	opacity:1; filter: alpha(opacity=100;);
}
div#choose_box{
	position:relative;
	display:block; 
	margin:auto;
	width : 230px;
	margin-top:240px;
}
div.nav{
	float : left;
	height  : 100%;
}
div.nav>ul{
	height  : 100%;
	margin : 0px;
	padding : 0;
}
div.nav>ul>li{
	position : relative;
	list-style : none;
	display : inline-block;
	height : 90px;
	color : #2d2d2d;
	font-size : 0.96em;
	background-color : transparent;
	font-family:'Nanum Gothic', sans-serif;
	letter-spacing:0px;
	transition: background-color 0.5s ;
	-webkit-transition: background-color 0.4s; /* Safari */
}
div.nav>ul>li>a{
	position : relative;
	display : block;
	font-weight : 400;
	color : inherit;
	text-decoration : none;
	line-height : 90px;
	height : 100%;
	padding : 0px 15px 0px 15px;
	border-bottom : solid 0px transparent;
	font-family: 'DreamOrphans-Regular';
	letter-spacing:2px;

}
div.nav>ul>li:hover{
	background-color : #000; opacity:0.8; filter: alpha(opacity=80;); 
	border-bottom : solid 0px #3e3e3e;
	color : #fff;
}
div.nav>ul>li>ul{
	position : absolute;
	margin : 0px;
	padding : 0;
	display : none;
}


div.nav>ul>li>ul 2{
	
	position : absolute;
	margin : 0px;
	padding : 200px;
	display : none;
}




div.nav>ul>li>ul>li{
	list-style : none;
	font-weight : 400;
	font-size : 13px;
	height : 30px;
	width : 150px;
	background-color : #F9F9F9;
	border-bottom : solid 1px #DADADA; 
}
div.nav>ul>li>ul>li>a{
	position : relative;
	display : block;
	height : 100%;
	width : 100%;
	line-height : 30px;
	margin-left : 20px;
	text-decoration : none;
	color : #454545;
	
	transition: color 0.2s ;
	-webkit-transition: color 0.2s; /* Safari */
}

div.nav>ul>li>ul>li>a:hover{
	color : #0D547C;
	
	animation : margin_left 0.8s;
	-moz-animation : margin_left 0.8s;
	-o-animation : margin_left 0.8s;
	-webkit-animation : margin_left 0.8s;
	
}

@keyframes margin_left
{
	0% {margin-left : 25px;}
	100%{margin-left : 20px;}
}

@-moz-keyframes margin_left /* Firefox */
{
	0%{margin-left : 25px;}
	100%{margin-left : 20px;}
}

@-o-keyframes margin_left /* Opera */
{
	0% {margin-left : 25px;}
	100%{margin-left : 20px;}
}

@-webkit-keyframes margin_left /* Safari & Crome */
{
	0% {margin-left : 25px;}
	100%{margin-left : 20px;}
}
div#choose_box span{
	cursor : default;
	font : normal 100% Open sans, arial;
	font-size : 15px;
	font-weight : 400;
	position:relative;
	width : 100%;
	display : block;
	height : 30px;
	color : #484848; 
	font-weight : 400; 
	border: solid 1px #A5A5A5;
}

div#choose_box span:hover{
	border: solid 1px #131313;
}

div#choose_box ul{
	margin : 0px;
	padding : 0;
	border : solid 1px #484848;
	position : absolute;
	right : -1px;
	width : 150px;
	background-color : white;
	display : none;
}
div#choose_box ul li{
	position : relative;
	list-style : none;
	font-weight : 400;
	height : 32px;
	font-size : 14px;
	line-height : 32px;
	color : #454545;
	cursor : default;
	padding-left : 10px;
}

div#choose_box ul li:hover{
	color : white;
	background-color : #0D547C;
}

/** -------------- For Desktop PC-------------------- **/
@media only screen and (min-width: 960px){
	div.nav ul li:hover ul{
	display : block;
	
	}
}
/** ----------For Note Book------------ **/
@media only screen and (min-width: 768px) and (max-width: 959px) {
	div.logo{
		margin : auto;
		display : table;
	}
	div.nav{
		float : none;
		margin : auto;
		display : table;
	}
	div.nav>ul>li{
		height : 70px;
	}
	div.nav>ul>li>a{
		line-height : 70px;
	}
	
	div.nav ul li:hover ul{
	display : block;
	
	}
}
/** ----------For Tablet PC------------ **/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	div.logo{
		margin : auto;
		display : table;
		font-size : 2.1em;
		height: 72px;
    line-height: 72px;
	}
	div.nav{
		float : none;
		margin : auto;
		display : table;
	}
	div.nav>ul>li{
		height : 70px;
		border-bottom : solid 2px transparent;
	}
	div.nav>ul>li>a{
		line-height : 70px;
	}	
	
	div.nav ul li:hover ul{
	display : block;

	}
}

/** ----------For Mobile------------ **/
@media only screen and (max-width: 479px) {
	div.logo{
		margin : auto;
		display : table;
		font-size: 1.6em;
    height: 50px;
    line-height: 50px;
	}
	
	div.nav{
		float : none;
		margin : auto;
		display : table;
	}
	div.nav{
		width : 80%;
	}
	div.nav>ul>li{
		display : block;
		height : auto;
		width : 100%;
	}
	div.nav>ul>li:hover{
		border : none;
		border-left : solid;
	}
	div.nav>ul>li>a{
		line-height : 40px;
	}
	div.nav>ul>li>ul{
		position : relative;
	}
	div.nav>ul>li>ul>li{
		width : 100%;
	}
	div.nav>ul>li>ul>li>a{
		border-left : solid 15px transparent;
	}
	div#choose_box{
		position : relative;
		display : block;
		margin-top: 60px; 
		width : 70%;
	}
	div.nav ul li:hover ul{
	display : block;
	
	-webkit-animation-fill-mode:both;
	-moz-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	-o-animation-fill-mode:both;
	animation-fill-mode:both;
	
	-webkit-animation-duration:0.5s;
	-moz-animation-duration:0.5s;
	-ms-animation-duration:0.5s;
	-o-animation-duration:0.5s;
	animation-duration:0.5s;

	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
	}
	
	@-webkit-keyframes fadeInDown {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-20px);
		}
		
		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}

	@-moz-keyframes fadeInDown {
		0% {
			opacity: 0;
			-moz-transform: translateY(-20px);
		}
		
		100% {
			opacity: 1;
			-moz-transform: translateY(0);
		}
	}

	@-o-keyframes fadeInDown {
		0% {
			opacity: 0;
			-o-transform: translateY(-20px);
		}
		
		100% {
			opacity: 1;
			-o-transform: translateY(0);
		}
	}

	@keyframes fadeInDown {
		0% {
			opacity: 0;
			transform: translateY(-20px);
		}
		
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
}