#wrap_fensug {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0d1121;
}
#fensug {
  background: #000;
  border: 5px #fff solid;
  margin: 100px auto;
  padding: 5px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}
#wavenum {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: url("./loading-icon.png") no-repeat center;
  background-size: 50%;
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 5;
}

#waven {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: #1925b2;
  overflow: hidden;
  position: relative;
}

#wave {
  width: 408px;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZgAAAETCAMAAAA8kuB8AAAAY1BMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Ad/8Aef8Aef8Aef8AgP8Aev8Aef8AgP8Aev8Aev8Aev8Aev8Ae/8Ae/8Aev8AfP8Aef8Aev8AeP8Ae/8Adv8Aev8Aef8Ae/8Aev8Aev+NKQD+AAAAIHRSTlMA4Pd1zIjuByVQ1A5qYRa8pVqtnueWRDK0SDwcjn6Dw2ch1RkAAARISURBVHja7NpZjpwwFIVhz9jGZp4LqLv/VSaVPHSkztBdhfEl7W8HRz9YSIYkSRJSrsfBeMc3+QPn3LnaLPqWkaspxtlz2TalsFR9B0ypjlIhyqbfuTeLvsCmbDR8be6UwR8pW1a7HzRBTxvel5TBv3WikW64EYzyxa0ThY9jtpF+xPmwFQOvLIPPYqLlc0HQyBdeWXiSrdyCqs7oKgqvoNM25yS2wqwCXsVEX6M4B7SbFBzCtl6TWLJ5tXAY2tYFiSibewqHom2Mx+3mJgZHE3IhccwtgxDsuYs0FxCIquqcnCznHYSjmpMW3biAoFjpz2xT7AoCY5MvSFhZXcIJ2HRWm7FlcIop5HujewVnYdVAgjN3OA+rDAnClHAuKjUJSO8dnKw7flHmKERQmoy8ud6Z/N69PnQRVxBJt9+Or2IqBtEoeeAiiKkaj63SKoisGf6LMAB3Q45x8w0DDOwRJ9q4EYiNupeH5LO0gAflOXlBNqwUIH4YgO6VIYWRArBRfa3JM/JhvzMAwBEGQK2meO5yhQJWTFTc6E+sWVxr4QFRmIdukn75WJ5MD64vO7gARst28/NY/G2M31qh4AFjmJ+YnfrNm1EX2W/+NphrtzbiEkXeUVSUTdtLuXHOpez7qmlK8XbBjTzML1hHqRUPllIa/UM4lOuF+dpSGKRSGKRSGKRSGKRSGKRSGKRSGKRSGKRSGKRSGKRSGKRSGKRSmG/s0bEAAAAAwCB/62nsKIWmxEyJmRIzJWZKzJSYKTFTYqbETImZEjMlZkrMlJgpMVNipsRMiZkSMyVmSsyUmCkxU2KmxEyJmRIzJWZKzJSYKTFTYqbETImZEjMlZkpM7NGxAAAAAMAgf+tpdCyFUMegjkEdgzoGdQzqGNQxqGNQx6COQR2DOgZ1DOoY1DGoY1DHoI5BHYM6BnUM6hjUMahjUMegjkEdgzoGdQzqGNQxqGNQx6COQR2DOgZ1DOoY1DGoY1DHoI5BHYM6BnUM6hjUMahjUMegjkEdgzoGdQzqGNQxqGNQx6COQR2DOgZ1DOoY1DGoY1DHoI5BHYM6BnUM6hjUMahjUMegjkHVHh0LAAAAAAzyt57GjlJIzJSYKTFTYqbETImZEjMlZkrMlJgpMVNipsRMiZkSMyVmSsyUmCkxU2KmxEyJmRIzJWZKzJSYKTFTYqbETImZEjMlZkrMlJgpMVNipsRMiZkSMyVmSsyUmCkxU2KmxEyJmRIzJWZKzJSYKTFTYqbETImZEjMlZkrMlJgpMVNipsRMiZkSMyVmSsyUmCkxU2KmxEyJmRIzJWZKzJSYKTFTYqbETImZEjMlZkrMlJgpMVNipsRMiZkSMyVmSsyUmCkxU2KmxEyJmRIzJWZKzJSYKTFTYqbETImZEjMlZkrMlJgpMVNipsRMiZkSMyVmSsyUmCkxU2KmxEyJmRIzJWZKzJSYKTFTYqbETImZCgsLWu8dsBKsAAAAAElFTkSuQmCC)
    no-repeat;
  animation: move_wave 0.8s linear infinite;
}
#loading_wave {
  position: absolute;
  width: 408px;
  height: 0;
  left: 0;
  bottom: 0;
  animation: move_loading_wave 2s forwards;
}

@media (max-width: 476px) {
  #waven,
  #wavenum {
    width: 135px;
    height: 135px;
  }

  #loading_wave {
    width: 200px;
  }
}

@keyframes move_loading_wave {
  from {
    height: 0;
  }
  to {
    height: 275px;
  }
}
@keyframes move_wave {
  0% {
    left: 0;
  }
  50% {
    left: -102px;
  }
  100% {
    left: -204px;
  }
}