body{ 
	margin: 0;
	padding: 0;
	
	background-color: #131418; 
	
	/* animation-name: clor; */
	animation-duration: 10s;
	animation-iteration-count: infinite;
	font-family: "Merriweather";  
	 
}	



@font-face {
	font-family:"Merriweather";
	src:url(../font/Merriweather.ttf); 
}

@keyframes clor{
	0%{
		background-color: #131418;		
	}
	/* 50%{
		background-color: #040a34;	
	} */
	100%{
		background-color:  #131418;
	}			
}			
							
ol,ul,li,dl,dt,dd,h1,h2{
	list-style: none;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none; 
}
i{
	font-style: normal;
}
.safearea{
	width:1000px;
	margin: 0 auto;
}
				
				
	

/* ------------------------------------------------------------ glob ------------------------------------------------------------*/


	
 	
				
.logo{
	
	height: 4.25rem;
	width:100%; 
	position: fixed; 
	filter: drop-shadow(1px 1px 10px rgba(0, 0, 0, 0.1));
	z-index: 1;  
	
	/* background: #0000FF; */
	
	padding-top: 24px;
	
}	
  
 .logoblock{
	width: 120px;	
	height: 70px;   
	position: absolute;
	cursor: pointer;
}  

.logo img{
	position:relative;
	 z-index:3; 
}

.logo img:hover+li{
	display: block;
}  
  
			
.logoarea{
	
	height: 6.25rem;
	
}				



.logo ul{ 
	margin-top: 20px
}

.logo ul li{
	font-family:"Merriweather"; 
	width: 50px;
	height: 65px;
	line-height: 20px;
	transition-duration: .5s; 
    display: none;
	/* border: red 1px solid; Merriweather.ttf  LilyUPC */
	
}
.logo ul li a{
	color: white;
	font-size: 30px; 
	/* text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1); */
	letter-spacing: 5px;
	font-weight: 800;
	transition-duration: .1s;
}

.logo ul li a:hover{
	filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}






 







/* ------------------------------------------------------------logo ------------------------------------------------------------*/