/****fortune****/
.fortune_teaser {
	position:absolute;
	position:fixed;
	top:160px; right:0;
	opacity:1;
	z-index:9999999999;
}
.fortune_teaser_act {
	position:absolute;
	position:fixed;
	padding:15px 10px;
	background:#f9f9f9;
	border-radius:10px 0 0 10px;
	box-shadow:0 3px 15px -5px rgba(0,0,0,.4);
	animation-name: fortune_teaser_act;
	animation-delay: 0;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-fill-mode: forwards;
	animation-timing-function:ease-in;
}
@keyframes fortune_teaser_act {
	0% {right:-300px;}
	100% {right:0; }
}
.fortune_teaser:hover {
	cursor:pointer;
}
.fortune_teaser span {
	color:#f00000;
	font-size:20px;
	font-weight:700;
	margin-bottom:15px;
	text-align:center;
}
.fortune_teaser img {
	width:110px;
	margin-bottom:10px;
}
.open_fortune {
	background:#f00000;
	text-align:center;
	margin:10px;
	font-size:16px;
	color:#f9f9f9;
	font-weight:700;
	padding:15px;
	border-radius:10px;
}
.open_fortune:hover {
	background:#dd0000;
	color:#f9f9f9;
}
.close_fortune {
	background:#333;
	text-align:center;
	margin:10px; margin-top:0;
	font-size:14px;
	color:#f9f9f9;
	font-weight:400;
	padding:10px 20px;
	border-radius:10px;
}
.close_fortune:hover {
	background:#333;
	color:#ededed;
}
.popup_fortune {
	display:none;
	position:absolute;
	position:fixed;
	top:0; left:0;
	width:100%; height:100vh;
	background:rgba(0,0,0,.5);
	z-index:9999999999999999;
}
.popup_fortune_in {
	width:100%; height:100vh;
}
.fortune_block {
	position:relative;
	width:600px; max-height:90vh;
	background:#f9f9f9; padding:20px;
	border-radius:20px;
	overflow:auto;
}
.fortune_block_img {
	width:250px;
}
.control_fort {
	position:absolute;
	top:0; left:auto;
	width:70px;
	z-index:9999999999999;
}
.rot_fort1 {
	animation-name: rot_fort1;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	transform:rotate(3600deg);
}
/*@keyframes rot_fort1 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(3600deg);
	}
}
.rot_fort2 {
	animation-name: rot_fort2;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	transform:rotate(3540deg);
}
@keyframes rot_fort2 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(3540deg);
	}
}*/
.rot_fort3 {
	animation-name: rot_fort3;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	transform:rotate(3480deg);
}
@keyframes rot_fort3 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(3480deg);
	}
}
.rot_fort4 {
	animation-name: rot_fort4;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	transform:rotate(3420deg);
}
@keyframes rot_fort4 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(3420deg);
	}
}
.rot_fort5 {
	animation-name: rot_fort5;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	transform:rotate(3360deg);
}
@keyframes rot_fort5 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(3360deg);
	}
}
.rot_fort6, .rot_fort1, .rot_fort2 {
	animation-name: rot_fort6;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-out;
	transform:rotate(3300deg);
}
@keyframes rot_fort6 {
	0% {
		transform:rotate(0deg);
	}
	100% {
		transform:rotate(3300deg);
	}
}
.inp_fortune {
	font-size:18px;
	background:#f9f9f9;
	padding:10px 20px;
	margin-top:10px;
	text-decoration:none;
	text-align:left;
	color:#111;
	border:2px solid #aaa;
	border-radius:10px;
	outline:none;
}
.btn_fortune {
	font-size:18px;
	background:#ff0000;
	padding:15px 20px;
	margin-top:20px;
	text-decoration:none;
	text-align:center;
	color:#f9f9f9;
	border-radius:10px;
	font-weight:700;
}
.btn_fortune:hover {
	background:#dd0000;
	color:#f9f9f9;
}
.tit_fortune {
	text-align:center;
	font-size:24px;
	margin-bottom:10px;
	font-weight:700;
}
.b_fortune {text-align:center;}

@media only screen and (max-width:680px) {
	.fortune_block {
		position:relative;
		width:100%; height:100vh;
		background:#f9f9f9; padding:10px;
		border-radius:0;
	}
	.fortune_block_img {
		width:150px;
	}
	.btn_fortune {
		font-size:15px;
		background:#ff0000;
		padding:15px 10px;
		margin-top:20px;
		text-decoration:none;
		text-align:center;
		color:#f9f9f9;
		border-radius:20px;
		font-weight:700;
		width:100%;
	}
}