@charset "utf-8";

body::before {
	background: #fff;
}

/* Navigation */
nav {
	background-color: #fff;
	background-image: none;
	color: #000;
	margin-top: -100px;
	text-shadow: #fff 0 0 4px
}
nav::before {
	background-color: none;
	background-image: none
}
nav a {
	color: #000
}
nav dd a {
	background-image: url(image/arrow-black.png)
}
.view a {
	background-image: url(image/view-black.png)
}

/* Cover */
#cover {
	position: relative;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding-left: 0;
	list-style: none
}
#cover::before {
	animation: coverBefore 6s;
	background: rgba(255,255,255,.3);
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: .5s;
	z-index: 1
}
@keyframes coverBefore {
	  0% { background: transparent }
	 50% { background: transparent }
	100% { background: rgba(255,255,255,.3) }
}
#cover li { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(image/cover-01.png) no-repeat 50%;
	background-size: cover;
	opacity: 0;
	z-index: 0;
	text-indent: -999;
	animation: imageAnimation 36s linear infinite 0s; 
}
#cover li:nth-child(2) { 
	background-image: url(image/cover-02.png);
	animation-delay: 6s; 
}
#cover li:nth-child(3) { 
	background-image: url(image/cover-03.png);
	animation-delay: 12s; 
}
#cover li:nth-child(4) { 
	background-image: url(image/cover-04.png);
	animation-delay: 18s; 
}
#cover li:nth-child(5) { 
	background-image: url(image/cover-05.png);
	animation-delay: 24s; 
}
#cover li:nth-child(6) { 
	background-image: url(image/cover-03.png);
	animation-delay: 30s; 
}
@keyframes imageAnimation { 
	  0% { opacity: 0; animation-timing-function: ease-in; }
	  8% { opacity: 1; animation-timing-function: ease-out; }
	 17% { opacity: 1 }
	 25% { opacity: 0 }
	100% { opacity: 0 }
}

#signboard {
	animation: fedeUp 4s;
	background-color: rgba(255,255,255,.8);
	background-image: url(image/stripe-white.png);
	background-repeat: repeat;	
	display: block;
	height: 290px;
	margin: -145px -110px 0;
	overflow: hidden;
	padding: 10px;
	position: absolute;
	top: 36%;
	left: 50%;
	width: 220px
}
#signboard::before,
#signboard::after {
	content: '';
	position: absolute;
	top: 0;
	transform: rotate(-45deg);
	width: 220px
}
#signboard::before {
	border: solid 24px #0e238c;
	border-width: 24px 0;
	height: 342px;
	margin-top: -40px
}
#signboard::after {
	border: solid 15px #d94141;
	border-width: 15px 0;
	height: 304px;
	margin-top: -12px;
}
#signboard:hover {
	text-decoration: none;
}
#signboard time {
	display: block;
	font-size: .6em;
	margin-bottom: 8px;
	text-align: right;
}
#signboard img {
	margin-bottom: 10px;
}
#signboard h4 {
	margin: 0 !important;
	font-size: .85em;
	font-weight: 600;
}
#signboard p {
	overflow: hidden;
	margin: 1em 0 1em;
	height: 60px;
	font-size: .6em;
	line-height: 1.4em;
}

.open#book div {
	transform: translateX(-100%) rotateY(100deg) scale(1.2) rotate(45deg);
	transition: 1s
}
.scroller {
	position: absolute;
	bottom: 150px;
	right: 50%;
	animation: fede 3s
}
.scroller a {
	border: solid #fff;
	border-width: 0 1px 1px 0;
	display: block;
	width: 26px;
	height: 26px;
	margin-right: -14px;
	transform: rotate(45deg)
}
nav .menu::before {
	background-image: url(image/take-out-black.png)
}
nav .menu::after {
	background-image: url(image/do-hie-mon-black.png)
}

@media only screen and (min-width: 1023px) {
	#signboard {
		height: 340px;
		left: 40%;
		margin: -133px -150px 0;
		top: 45%;
		width: 300px
	}
	#signboard::before {
		height: 433px;
		margin-top: -60px;
		width: 300px
	}
	#signboard::after {
		height: 397px;
		margin-top: -33px;
		width: 300px
	}
	nav {
		background: none;
		margin-top: 0;
		position: absolute
	}
	nav::before,
	nav::after {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		width: 24%;
		height: 100%;
		z-index: -1
	}
	nav::before {
		animation: nav 3s;
		background-color: rgba(255,255,255,.4);
		background-image: url(image/stripe-white.png);
		background-repeat: repeat
	}
	nav::after {
		animation: nav 3.5s;
		background: rgba(255,255,255,.4);
	}
	@keyframes nav {
		  0% { width: 100% }
		 50% { width: 100% }
		100% { width: 24% }
	}
	.scroller {
		display: none
	}
	.copyright {
		position: fixed;
		bottom: -3%;
		left: 41%;
		margin-left: -107px;
		padding: 1em;
		width: auto
	}
}