/*

<div id="loading_spinner">
  <div class="spinner"></div>
</div>
<div id="loading_spinner">
  <div class="spinner small"></div>
</div>
<div id="loading_spinner">
  <div class="spinner big"></div>
  <p class="txt">로딩 중..</p>
</div>

*/

/* 로딩 영역 */
#loading_spinner{
  display:none;
  position:relative;
  z-index:9999999;
}

/* 동그란 스피너 */
#loading_spinner .spinner{
  display:block;
  width:50px;
  height:50px;
  margin:0 auto;
  border:8px solid #ddd;
  border-top:8px solid #eb6101;
  border-radius:50%;
  animation: loading_spinner 1s linear infinite;
  box-shadow:1px 1px 20px rgba(0,0,0,0.1);
}
#loading_spinner .spinner.small{
  width:30px;
  height:30px;
  border:6px solid #ddd;
  border-top:6px solid #eb6101;
}
#loading_spinner .spinner.big{
  width:80px;
  height:80px;
  border:10px solid #ddd;
  border-top:10px solid #eb6101;
}
#loading_spinner .txt {padding:5px 10px; margin-top:10px; font-size:1.4rem; font-weight:600; color:#eb6101; text-align:center; background:rgba(255,255,255,0.6); border-radius:5px;}

/* 회전 애니메이션 */
@keyframes loading_spinner{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}