body {
  width: 100%;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: auto;
}

.player_container {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  overflow: hidden;
}

.iframe_container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.svg-whitebalance {
  position: fixed;
  top: -100px;
  left: -100px;
  width: 0;
  height: 0;
}

.vr_cover {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  display: block;
}

.vr_cover .play_btn {
  width: 10%;
  height: 10%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  cursor: pointer;
}

.vr_cover .play_btn:hover .line {
  stroke: #7bacb9;
}

.vr_cover .play_btn .line {
  fill: none;
  stroke: #fff;
  stroke-miterlimit: 10;
  stroke-width: 3.5px;
}

.vr_cover .play_btn .fill {
  fill: #fff;
  opacity: 0.2;
}

.vr_cover .cover_image {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.vr_cover .cover_image .desktop_cover {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
}

.vr_cover .cover_image .mobile_cover {
  width: auto;
  height: 100%;
  left: 0;
  display: none;
}

.instruction_container {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}

.instruction_container .logo_display {
  width: 40%;
  height: 10%;
  top: 45%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
}

.instruction {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: none;
}

.instruction .desktop {
  width: 80%;
  bottom: 5.5%;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
          transform: translate(-50%, 0%);
  position: absolute;
}

.instruction .mobile {
  width: 83%;
  height: 90%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  display: none;
}

.instruction .mobile img:first-child {
  margin-top: 15%;
  display: inline-block;
  vertical-align: middle;
}

.instruction .mobile img:nth-child(2) {
  bottom: 0;
  left: 0;
  position: absolute;
  display: inline-block;
  vertical-align: middle;
}

.instruction .skip_btn {
  width: 5%;
  height: 5.5%;
  bottom: 21%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  position: absolute;
  cursor: pointer;
}

/* touch device */
.instruction.touch .desktop {
  display: none;
}

.instruction.touch .mobile {
  display: block;
}

/* ipad */
@media only screen and (max-width: 1366px) and (orientation: landscape) {
  .player_container.touch {
    height: 102%;
    padding-bottom: initial;
  }
  .player_container.touch .instruction .skip_btn {
    height: 3.8%;
    bottom: 16%;
  }
  .player_container.touch .cover_image .desktop_cover {
    width: auto;
    height: 100%;
  }
  .player_container.touch .instruction_container .logo_display {
    width: 70%;
    height: 20%;
  }
  .player_container.touch .instruction .mobile {
    height: auto;
    top: 50%;
    bottom: initial;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .player_container.touch .instruction .mobile img:first-child {
    width: 40%;
    margin-top: 0;
    margin-right: 14%;
    vertical-align: middle;
  }
  .player_container.touch .instruction .mobile img:nth-child(2) {
    width: 45%;
    margin-top: 0%;
    bottom: initial;
    position: relative;
  }
}

/* ipad */
@media only screen and (min-width: 737px) and (max-width: 1024px) and (orientation: portrait) {
  .player_container.touch {
    height: 102%;
    padding-bottom: initial;
  }
  .player_container.touch .vr_cover .play_btn {
    width: 6%;
    height: 7%;
  }
  .player_container.touch .vr_cover .cover_image .desktop_cover {
    display: none;
  }
  .player_container.touch .vr_cover .cover_image .mobile_cover {
    display: block;
	margin-left: -10%;
  }
  .player_container.touch .instruction_container .logo_display {
    width: 70%;
    height: 20%;
  }
  .player_container.touch .instruction .mobile {
    width: 55%;
  }
  .player_container.touch .instruction .skip_btn {
    width: 9%;
    height: 3.8%;
    bottom: 19%;
  }
}

/* mobile */
@media only screen and (max-width: 736px) and (orientation: portrait) {
  .player_container.touch {
    height: 101%;
    padding-bottom: initial;
  }
  .player_container.touch .vr_cover .play_btn {
    width: 12%;
    height: 9%;
  }
  .player_container.touch .vr_cover .cover_image .desktop_cover {
    display: none;
  }
  .player_container.touch .vr_cover .cover_image .mobile_cover {
    display: block;
	margin-left: -30%;
  }
  .player_container.touch .instruction_container .logo_display {
    width: 100%;
    max-width: 400px;
    height: 50%;
	margin-top: 40%;
  }
  .player_container.touch .instruction .mobile {
    max-width: 300px;
  }
  .player_container.touch .instruction .mobile img:first-child {
    margin-top: 0;
  }
  .player_container.touch .instruction .skip_btn {
    width: 20%;
    max-width: 100px;
    height: 15%;
    bottom: 10%;
  }
}

/* mobile */
@media only screen and (max-width: 823px) and (orientation: landscape) {
  .player_container.touch {
    height: 102%;
    padding-bottom: initial;
  }
  .player_container.touch .vr_cover .play_btn {
    width: 7%;
    height: 13%;
  }
  .player_container.touch .vr_cover .cover_image .desktop_cover {
    width: 100%;
    min-width: 880px;
    height: auto;
  }
  .player_container.touch .instruction .skip_btn {
    width: 20%;
    height: 15%;
    left: 70.5%;
  }
  .player_container.touch .instruction .mobile {
    height: auto;
    top: 50%;
    bottom: initial;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .player_container.touch .instruction .mobile img:first-child {
    width: 40%;
    margin-top: 0;
    margin-right: 10%;
    vertical-align: middle;
  }
  .player_container.touch .instruction .mobile img:nth-child(2) {
    width: 49%;
    margin-top: 0%;
    bottom: initial;
    position: relative;
  }
}