@charset "utf-8";

.loading {
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: #000;
  }
  .loading.hide {
	opacity: 0;
	pointer-events: none;
	transition: opacity 500ms;
  }


  .loading .circle {
	display: block;
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	background: url(../img/loading02_2.png?=20240831-3) no-repeat;
	background-size: 480px;
	animation: loading_m 0.5s steps(6) infinite forwards;
	top: 50%;
	margin-top: -40px;
	overflow: hidden;
  }

  @keyframes loading_m {
	0% {
	  background-position: 0 0;
	}
	100% {
	  background-position: -480px 0;
	}
  }


  
  /*#cboxLoadingGraphic{
	background:url(../img/loading02.gif) no-repeat center center;
}*/
  


 


  /*
  .loading .circle {
	display: block;
	position: relative;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	background: url(../img/loading02.gif) no-repeat;
	background-size: 100%;
	top: 50%;
	margin-top: -40px;
  }

  @media screen and (max-width:768px) {
	.loading .circle {
		width: 50px;
		height: 50px;
		margin-top: -25px;
	  }
  }*/

  /*
  .loading .circle {
	display: block;
	position: relative;
	top: calc( 50% - 20px );
	width: 40px;
	height: 40px;
	margin: 0 auto;
	border: 8px solid #e0e0e0;
	border-top: 7px solid #666;
	border-radius: 50px;
	animation: loading 700ms linear 0ms infinite normal both;
  }
  @keyframes loading {
	0% { transform: rotate( 0deg ); }
	100% { transform: rotate( 360deg ); }
  }
  */