@charset 'utf-8';
@import 'default.css';

#intro{
	background: url('../img/bg_intro.png') no-repeat;
	background-size: 100% 100%;
	display: flex; flex-direction: column; justify-content: space-around;
}
#intro>h1>img{
	max-width: 378px; width: 85%; height: auto;
	margin: 0 auto;
	padding: 6.1% 0 0 0.5%;
}
#intro>.char{
	max-width: 391px; width: 90%; height: auto;
	margin: -10% auto 0;
}
@keyframes fog_move_r{
	0%{
		left: -100%;
	}
	100%{
		left: 100%;
	}
}
@keyframes fog_move_l{
	0%{
		right: -100%;
	}
	100%{
		right: 100%;
	}
}
img[class*=f]{ position: absolute; }
.f1{
	left: -100%; top: 10%;
	animation: fog_move_r 10s linear Infinite Alternate;
}
.f2{
	right: -100%; top: 35%;
	animation: fog_move_l 10s 3s linear Infinite Alternate;
}
.f3{
	left: -100%; top: 60%;
	animation: fog_move_r 10s 6s linear Infinite Alternate;
}
#intro>.btns{
	width: calc(100% - 18.6%); height: 4.8%;
	margin: 0 9.3% 25%;
	display: flex; justify-content: space-between;
}
#intro>.btns>a{
	display: block;
	width: 37.21%; height: 100%;
	text-align: center; line-height: 2.8rem;
	border: 1px solid #fff; border-radius: 20px;
	font-size: 16px;
	color: #fff;
	box-shadow: 0 0 5px 4px rgba(249,246,183,0.6);
}

#guide{
	background: url('../img/bg_ex.png') no-repeat;
	background-size: 100% 100%;
	position: relative;
	text-align: center;
	color: #fff;
	overflow: hidden;
	display: none;
}
#guide .txt{ font-size: 14px; }
#guide span{ font-size: 12px; }
#guide>.quest{
	margin-top: 8.7%;
	height: 8.4%;
	text-align: center; line-height: 1.6em;
	font-size: 24px; font-weight: bold;
}
#guide .wrapper{
	height: 65.8%;
	margin: 0 2.5%;
	display: flex; flex-direction: column; justify-content: space-between;
}
#guide div>p{ margin-bottom: 20px; }
#guide div>p.last{ margin-bottom: 0; }
#guide .zom{
	width: 96%;
	margin: 0 auto;
	display: flex; justify-content: space-between;
}
#guide .zom>div{ width: 20%; height: 11%; }
#guide .zom>div>img{
	width: auto; height: 90%;
	margin: 0 auto;
}
#guide .human{ display: flex; justify-content: space-between; }
#guide .items{
	width: 157px;
	margin: 0 auto;
	display: flex; justify-content: space-between;
}
#guide .items>div{ width: 40%; }
#guide .items>div>img{ margin: 0 auto 5px; }
#guide .items>div>span{ display: block; }
#guide button{
	display: block;
	width: 35%; height: 16%;
	text-indent: -9999px;
	border: 0;
	position: absolute; bottom: 0;
}
#guide .back{
	left: 0;
	background: transparent url('../img/grave_back.png') no-repeat left -10px bottom -30px;
	background-size: contain;
}
#guide .start{
	right: 0;
	background: transparent url('../img/grave_start.png') no-repeat right -10px bottom -30px;
	background-size: contain;
}