body { padding: 0; margin: 0 }
@keyframes frameAnimation {
  0% { background-image: url('test/YSK_0.png'); }
  1.6129% { background-image: url('test/YSK_1.png'); }
  3.2258% { background-image: url('test/YSK_2.png'); }
  4.8387% { background-image: url('test/YSK_3.png'); }
  6.4516% { background-image: url('test/YSK_4.png'); }
  8.0645% { background-image: url('test/YSK_5.png'); }
  9.6774% { background-image: url('test/YSK_6.png'); }
  11.2903% { background-image: url('test/YSK_7.png'); }
  12.9032% { background-image: url('test/YSK_8.png'); }
  14.5161% { background-image: url('test/YSK_9.png'); }
  16.129% { background-image: url('test/YSK_10.png'); }
  17.7419% { background-image: url('test/YSK_11.png'); }
  19.3548% { background-image: url('test/YSK_12.png'); }
  20.9677% { background-image: url('test/YSK_13.png'); }
  22.5806% { background-image: url('test/YSK_14.png'); }
  24.1935% { background-image: url('test/YSK_15.png'); }
  25.8065% { background-image: url('test/YSK_16.png'); }
  27.4194% { background-image: url('test/YSK_17.png'); }
  29.0323% { background-image: url('test/YSK_18.png'); }
  30.6452% { background-image: url('test/YSK_19.png'); }
  32.2581% { background-image: url('test/YSK_20.png'); }
  33.871% { background-image: url('test/YSK_21.png'); }
  35.4839% { background-image: url('test/YSK_22.png'); }
  37.0968% { background-image: url('test/YSK_23.png'); }
  38.7097% { background-image: url('test/YSK_24.png'); }
  40.3226% { background-image: url('test/YSK_25.png'); }
  41.9355% { background-image: url('test/YSK_26.png'); }
  43.5484% { background-image: url('test/YSK_27.png'); }
  45.1613% { background-image: url('test/YSK_28.png'); }
  46.7742% { background-image: url('test/YSK_29.png'); }
  48.3871% { background-image: url('test/YSK_30.png'); }
  50% { background-image: url('test/YSK_31.png'); }
  51.6129% { background-image: url('test/YSK_32.png'); }
  53.2258% { background-image: url('test/YSK_33.png'); }
  54.8387% { background-image: url('test/YSK_34.png'); }
  56.4516% { background-image: url('test/YSK_35.png'); }
  58.0645% { background-image: url('test/YSK_36.png'); }
  59.6774% { background-image: url('test/YSK_37.png'); }
  61.2903% { background-image: url('test/YSK_38.png'); }
  62.9032% { background-image: url('test/YSK_39.png'); }
  64.5161% { background-image: url('test/YSK_40.png'); }
  66.129% { background-image: url('test/YSK_41.png'); }
  67.7419% { background-image: url('test/YSK_42.png'); }
  69.3548% { background-image: url('test/YSK_43.png'); }
  70.9677% { background-image: url('test/YSK_44.png'); }
  72.5806% { background-image: url('test/YSK_45.png'); }
  74.1935% { background-image: url('test/YSK_46.png'); }
  75.8065% { background-image: url('test/YSK_47.png'); }
  77.4194% { background-image: url('test/YSK_48.png'); }
  79.0323% { background-image: url('test/YSK_49.png'); }
  80.6452% { background-image: url('test/YSK_50.png'); }
  82.2581% { background-image: url('test/YSK_51.png'); }
  83.871% { background-image: url('test/YSK_52.png'); }
  85.4839% { background-image: url('test/YSK_53.png'); }
  87.0968% { background-image: url('test/YSK_54.png'); }
  88.7097% { background-image: url('test/YSK_55.png'); }
  90.3226% { background-image: url('test/YSK_56.png'); }
  91.9355% { background-image: url('test/YSK_57.png'); }
  93.5484% { background-image: url('test/YSK_58.png'); }
  95.1613% { background-image: url('test/YSK_59.png'); }
  96.7742% { background-image: url('test/YSK_60.png'); }
  98.3871% { background-image: url('test/YSK_61.png'); }
  100% { background-image: url('test/YSK_62.png'); }
}
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-image: url('test.jpg'); background-size: cover; display: flex; background-repeat: no-repeat; background-position: center; overflow: hidden; justify-content: center; align-items: flex-start; margin: 0; padding: 0}
#unity-logo { position: absolute; top: 35%; left: 50%; transform: translate(-50%,-50%); width: 154px; height: 130px; background: url('test/YSK_0.png') no-repeat center; background-size: contain; animation: frameAnimation 3.15s steps(1) infinite }
#unity-progress-bar-empty { position: absolute; width: 60%; max-width: 312px; min-width: 200px; height: 7vh; max-height: 32px; min-height: 24px; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; background: url('progress_BG.png') no-repeat center; background-size: contain; overflow: hidden }
#unity-progress-bar-full { width: 0%; height: 80%; background: url('progress.png') no-repeat left center; background-size: cover; transition: width 0.3s ease; margin-top: 1%; margin-left: 2% }
#unity-wait-image { position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%); background: url('Wait.png') no-repeat center; background-size: contain; width: 197.6px; height: 21.6px }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }