*:active {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -moz-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
}

body {
  background-color: #000;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
}

.load_page {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgb(30, 30, 30);
}

.load {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 0px;
  padding-top: 260px;
  margin-top: -130px;
  margin-left: -130px;
  background-size: 100% 100%;
}

#r_blue {
  background-image: url("load_src/r_blue.png");
  animation: spin_r 4s infinite linear;
}

#r_red {
  background-image: url("load_src/r_red.png");
  animation: spin_r 2s infinite linear reverse;
}

#r_txt {
  background-image: url("load_src/r_txt.png");
  animation: spin_r 20s infinite linear;
}

.perc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  height: 58px;
  transform: translate(-50%, -50%);
}

@font-face {
  font-family: Gravedigger;
  src: url("http://www.picto3d.co.kr/sp/font/Gravedigger.otf"), url("load_src/Gravedigger.otf");
  font-style: normal;
  font-weight: normal;
}

.perc_txt {
  position: absolute;
  top: 0%;
  text-align: center;
  width: 62.5px;
  height: 58px;
  font-family: Gravedigger;
  font-size: 54px;
  color: rgb(255, 255, 255);
}

#perc_txt1 {
  left: 5%;
}

#perc_txt2 {
  right: 25%;
}

#perc_p {
  position: absolute;
  width: 45px;
  height: 39px;
  bottom: 0%;
  right: 0%;
  background-image: url("load_src/tper.png");
  background-size: 100% 100%;
}

@keyframes spin_r {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  };
}

#main_canvas_container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

#anim_start {
  position: absolute;
  bottom: 2em;
  right: 2em;
  width: 5em;
  height: 5em;
  background-image: url("blender/Texture/play.png");
  background-size: 100% 100%;
  visibility: hidden;
}
