@charset "utf-8";

#loading{
	opacity: 0;
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	z-index: 10000;
}
#loading .loadWrap{
	position: absolute;
	top:50%;
	left: 50%;
	width: calc(100% - 50px);
	max-width: 500px;
	padding: 15px 10px;
	transform: translate(-50%, -50%);
	border: solid 2px #ffffff;
	border-radius: 5px;
}
#loading .loadWrap .load{
	position: relative;
	text-align: center;
	color: #000000;
	margin: 0 auto 15px auto;
}
#loading .loadWrap .load span{
	display: inline-block;
	white-space: pre;
	opacity: 0;
	color: #ffffff;
	font-size: .14rem;
	font-family: "DotGothic16", sans-serif;
	font-weight: 400;
	font-style: normal;
}
@keyframes contTxtanimation{
	0%{
		opacity: 0;
	}
	25%{
		opacity: .25;
	}
	50%{
		opacity: .5;
	}
	75%{
		opacity: .75;
	}
	100% {
		opacity: 1;
	}
}
#loading .loadWrap .yesno{
	position: relative;
	opacity: 0;
}
#loading .loadWrap .yesB, #loading .loadWrap .noB{
	position: relative;
	margin: 0 auto;
	width: 14em;
	font-size: .14rem;
	text-align: left;
	color: #ffffff;
}
#loading .loadWrap .arrow{
	position: relative;
	margin: 0 auto;
	width: 14em;
}
#loading .loadWrap .arrow::before{
	position: absolute;
	top:0;
	left: -1.5em;
	content: '＞';
	transform: scale(.6, .8);
	font-size: .12rem;
	color: #ffffff;
}
@keyframes arrowF{
	0%, 100%{
		opacity: 1;
	}
	15%{
		opacity: 0;
	}
	30%{
		opacity: 1;
	}
	45%{
		opacity: 0;
	}
	60%{
		opacity: 1;
	}
	75%{
		opacity: 0;
	}
	90%{
		opacity: 1;
	}
}