@charset "utf-8";
/* CSS Document */

body{
	background-color: #dcd4e8;
	font-family: 'Roboto', sans-serif;
	font-size: .8em;
}

.container{
	max-width: 800px;
	margin: 0 auto;
}

header{
	background-color: #dcd4e9;
	padding:10px 0;
}


header .container{
	display: flex;
	justify-content:space-between;
}

header ul{
	display: flex;
}

header li{
	margin-top:9em;
}

header a{
	color:#764fab;
	text-decoration:none;
	margin: 0px 10px;
}

header a:hover{
	font-size: .9em;
	color:#935D08;
}

header .logo{
	font-size: 2em;
}

header img{
	height:150px;
}


main{
	margin-top: 0px;
	display:block;
}

#ani h1{
	text-align: center;
	font-size: 1.5em;
	color: #764fab;
	padding-top: 30px;
	padding-bottom: 30px;
}

#ani .frame{
	display:flex;
	flex-direction: column;
	align-items: center;
}

#ani .frame h2{
	text-align: left;
	font-size:.8em;
	color: gray;
	padding-top: 50px;
	padding-bottom: 5px;
}



main p{
	margin-top: 20px;
}

#album p{
	color: #764fab;
	text-align: center;
	margin-bottom: 15px;
}

#linkback{
	text-align: center;
	margin-top: 80px;
	margin-bottom: 50px;
}
#linkback a{
	text-decoration:none;
	color:#764fab;

}

#linkback a:hover{
	color:#dcd4e9;
	background-color:#764fab;
}


#banner{
	height: 400px;
	background-position: center;
	background-size: cover;
	margin-bottom: 20px;
	
}

#banner2{
	height: 800px;
	background-position:top;
	background-size:cover;
	cursor: pointer;
}


#banner3{
	height: auto;
	background-position: top;
	background-size: auto;
}

#banner3 img{
	display:block;
}


#news2{
	padding:40px 20px;
	font-size: .95em;
}


#news .container{
	display: flex;
	flex-wrap: wrap;
	padding:0px 80px;
	
}
#news .item{
	width: 300px;
	margin: 20px 10px;
	
}
#news .item h1 a{
	font-size: 1em;
	color:#764fab;
	font-weight: 700;
	text-decoration: none;
}

#news .item h1 a:hover{
	color:#935D08;
	font-size:.9em;
	text-decoration: none;
}


#news .item img{
	cursor: pointer;
	max-width:100%;
	margin: 10px 0;
}

#news .item img:hover{
	opacity: 0.3;
}


#news .item p{
	margin-top: 2px;
	font-size: .8em;
	line-height: 140%;
	color:#666;
	opacity: 0.8;
}





article{
	background-color: rgba(255,255,255,0.6);
	padding:15px;
	margin-bottom: 10px;
}


article h1{
	font-size: 1em;
	color:#764fab;
	text-align: center;
	cursor: pointer;
}
article h1:hover{
	color:#dcd4e9;
}
article p{
	margin-top:10px;
	color:#764fab;
	text-align: center;
	line-height: 140%;
}

article a{
	color:#764fab;
	text-decoration: none;
}
article a:hover{
	color:#935D08;
	font-size: .9em;
}

article.active{
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


footer{
	text-align: center;
	background-color: #764fab;
	color: #dcd4e9;
	padding: 18px;
}


footer p1{
	font-size: 0.9em;

}


footer p2{
	font-size: 0.9em;
}






















@media (max-width:480px){
body{}

.container{
	width:100%;
	
}

header{
	text-align: center;
	}
		
header .container{
	display:inline;
}

header img{
	height:100%;
	margin-bottom: 2px;
}
	
header ul{
	justify-content: center;
	margin-top: 15px;
}

header li{
	margin-top:0em;
	margin-bottom: 20px;
}
	
header a{
	color:#764fab;
	text-decoration: none;
	margin:0px 10px;	
}

	

	
#banner{
	background-position:center;
	background-size:cover;
}
	
#banner2{

	background-position:center;
	background-size:cover;
}
	
	
	
#banner3{

	background-position:center;
	background-size:cover;

}
	

#news .container{
	padding:0;
}
#news .item{
	width:100%;
	margin:0;
	padding:40px 20px;
	border-bottom: dashed 1px #fff;
	margin-bottom: 20px;
}

	
}