@import url(https://use.typekit.net/hmm6wee.css);
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500,900&display=swap);
@charset "UTF-8";
* {
  box-sizing: border-box;
  font-family: "Noto Sans TC", "微軟正黑體", "Microsoft JhengHei", "Segoe UI Semibold", "Segoe UI", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; }

body {
  margin: 0;
  font-size: 16px;
  overflow: hidden; }

video, canvas {
  display: block;
  border: 0; }

#musicTime {
  position: absolute;
  color: #FFF;
  top: 15px;
  left: 150px;
  letter-spacing: 0.2em; }

#slitscan {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

#threeDScene {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; }

.hidden-data {
  position: absolute;
  left: 0;
  z-index: 0;
  pointer-events: none; }

#webcam {
  opacity: 0; }

#window-monitor {
  position: absolute;
  margin-top: -80px;
  top: 50%;
  right: 50%;
  margin-right: 198px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  padding: 2px;
  background-color: #d1d1d1;
  width: 355px;
  box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.15);
  z-index: 2; }
  #window-monitor .step-title {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center;
    background: #433FEF;
    color: #FFF;
    font-size: 12px;
    padding: 5px; }
  #window-monitor .content {
    margin-top: 2px;
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    height: 470px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_monitor.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  #window-monitor .text {
    margin: 20px 0 0; }
  #window-monitor .close {
    width: 16px;
    height: 16px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_btn_close.png");
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat; }
  #window-monitor .btn {
    margin: 18px 0;
    width: 75px;
    height: 22px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_btn_ok.png");
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat; }
  #window-monitor .frame {
    position: absolute;
    left: 50%;
    margin-left: -120px;
    top: 36px;
    width: 238px;
    height: 176px;
    overflow: hidden; }
  #window-monitor .frame img {
    position: absolute;
    display: block;
    border: 0;
    z-index: 0;
    opacity: 0; }
  #window-monitor #monitorScene {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    border: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%) scale(-1, 1);
            transform: translate(-50%, -50%) scale(-1, 1);
    background-color: rgba(0, 0, 0, 0.5); }

#window-doorbell {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 2px;
  background-color: #d1d1d1;
  margin-top: -100px;
  margin-left: 199px;
  width: 358px;
  box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 2; }
  #window-doorbell .step-title {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center;
    background: #433FEF;
    color: #FFF;
    font-size: 12px;
    padding: 5px; }
  #window-doorbell .content {
    position: relative;
    margin-top: 2px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    height: 430px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_doorbell.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  #window-doorbell .text {
    margin: 20px 0 0; }
  #window-doorbell .close {
    width: 16px;
    height: 16px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_btn_close.png");
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat; }
  #window-doorbell .btn {
    margin: 18px 0;
    width: 75px;
    height: 22px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_btn_ok.png");
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat; }
  #window-doorbell .text-click {
    margin: 143px 0 0;
    color: #FFF;
    font-size: 20px;
    font-weight: 900;
    text-align: center; }
  #window-doorbell .arrow {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    margin: 10px auto 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px;
    border-color: transparent transparent #FF00FF #FF00FF; }
  #window-doorbell .hand {
    position: absolute;
    bottom: 52px;
    left: 50%;
    margin-left: -38px;
    width: 60px;
    height: 60px;
    cursor: pointer; }
  #window-doorbell .hand::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 40px;
    right: 2px;
    top: 20px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_hand.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    -webkit-animation: jumping 0.5s infinite ease-in-out;
            animation: jumping 0.5s infinite ease-in-out; }

@-webkit-keyframes jumping {
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); } }

@keyframes jumping {
  100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); } }

.mvShow .mask {
  display: none; }

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 99999; }

#desktop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #1A1A1A;
  z-index: 1;
  background-image: url("https://rsdr.online/mv/assets/images/pic_desktop.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }
  #desktop.changeBG {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(41%, #A9AA98), color-stop(0%, #EC3A26));
    background: linear-gradient(to bottom, #A9AA98 41%, #EC3A26 0%); }
    #desktop.changeBG::before {
      display: none; }
  #desktop.hide .loading-info, #desktop.hide #window-monitor, #desktop.hide #window-doorbell {
    display: none; }
  #desktop .programs {
    position: relative;
    margin: 38px 0 0 20px;
    width: 180px;
    height: 480px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_program.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; }
  #desktop .logo {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 296px;
    height: 68px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_text_desktop.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; }
  #desktop .loading-info {
    position: absolute;
    left: 30px;
    bottom: 58px;
    width: 405px;
    height: 175px;
    border: 2px solid #D1D1D1;
    background-color: #D1D1D1;
    z-index: 4;
    box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.15); }
    #desktop .loading-info span {
      font-size: 16px;
      font-family: acumin-pro-extra-condensed, sans-serif;
      font-weight: 300;
      font-style: normal;
      letter-spacing: 1px; }
    #desktop .loading-info .info-title {
      width: 100%;
      background-color: #433FEF;
      padding-left: 5px;
      display: -webkit-box;
      display: flex;
      -webkit-box-align: center;
              align-items: center; }
      #desktop .loading-info .info-title img {
        padding-right: 5px; }
      #desktop .loading-info .info-title span {
        color: white; }
    #desktop .loading-info .info-wrapper {
      padding: 0 15px;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); }
      #desktop .loading-info .info-wrapper .folder-animation {
        height: 80px;
        width: 100%;
        margin-bottom: 20px;
        position: relative; }
        #desktop .loading-info .info-wrapper .folder-animation .paper {
          background-image: url("https://rsdr.online/mv/assets/images/paper.png");
          width: 65px;
          height: 65px;
          opacity: 0; }
        #desktop .loading-info .info-wrapper .folder-animation .folder {
          position: absolute;
          bottom: 0; }
        #desktop .loading-info .info-wrapper .folder-animation .left, #desktop .loading-info .info-wrapper .folder-animation .right {
          opacity: 0; }
        #desktop .loading-info .info-wrapper .folder-animation .left {
          left: 0; }
        #desktop .loading-info .info-wrapper .folder-animation .right {
          right: 0; }
        #desktop .loading-info .info-wrapper .folder-animation .last {
          left: 50%;
          -webkit-transform: translateX(-50%);
                  transform: translateX(-50%); }
      #desktop .loading-info .info-wrapper .folder-animation.loading .paper {
        -webkit-animation: paperfilp2 2s step-start infinite;
                animation: paperfilp2 2s step-start infinite;
        opacity: 1; }
      #desktop .loading-info .info-wrapper .folder-animation.loading .left, #desktop .loading-info .info-wrapper .folder-animation.loading .right {
        opacity: 1; }
      #desktop .loading-info .info-wrapper .folder-animation.loading .last {
        opacity: 0; }
      #desktop .loading-info .info-wrapper .info-processing-bar {
        width: 362px;
        height: 14px;
        box-shadow: inset 0px 0px 3px #7F7F7F;
        background-color: #D1D1D1;
        margin-bottom: 5px;
        overflow: hidden; }
        #desktop .loading-info .info-wrapper .info-processing-bar .bar {
          position: relative;
          top: 2px;
          width: 100%;
          height: 12px;
          background-image: url("https://rsdr.online/mv/assets/images/bar.png");
          background-repeat-y: no-repeat; }
      #desktop .loading-info .info-wrapper .info-status-bottom {
        display: -webkit-box;
        display: flex; }
        #desktop .loading-info .info-wrapper .info-status-bottom p {
          margin: 0;
          font-family: acumin-pro-extra-condensed, sans-serif;
          margin-right: 25px; }
        #desktop .loading-info .info-wrapper .info-status-bottom p:last-child {
          margin-right: 0; }
        #desktop .loading-info .info-wrapper .info-status-bottom span {
          display: inline-block;
          margin-left: 5px; }
  #desktop .taskBar {
    position: absolute;
    padding: 3px 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 28px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_taskbar_bg.png");
    background-repeat: repeat-x no-repeat;
    background-size: auto 100%;
    zoom: 1;
    z-index: 5; }
    #desktop .taskBar::before {
      content: "";
      display: table; }
    #desktop .taskBar::after {
      content: "";
      display: table;
      clear: both; }
    #desktop .taskBar .section-left {
      float: left;
      background-image: url("https://rsdr.online/mv/assets/images/pic_taskbar_left.png");
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% auto;
      width: 118px;
      height: 22px; }
    #desktop .taskBar .section-right {
      float: right;
      height: 100%; }
      #desktop .taskBar .section-right span {
        display: inline-block;
        vertical-align: top;
        margin: 0 20px 0 15px;
        line-height: 20px; }
      #desktop .taskBar .section-right::before {
        vertical-align: top;
        height: 22px;
        width: 1px;
        display: inline-block;
        content: "";
        background-image: url("https://rsdr.online/mv/assets/images/pic_taskbar_line.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto; }

.stickyGroup {
  position: absolute;
  top: 168px;
  right: 30px;
  width: 274px;
  z-index: 3; }

.sticky {
  position: relative;
  margin-bottom: 20px;
  padding: 2px;
  width: 274px;
  height: 124px;
  background-color: #d1d1d1;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  display: none;
  box-shadow: 2px 2px 10px 3px rgba(0, 0, 0, 0.15); }
  .sticky.show {
    display: block; }
  .sticky.blur .step-title {
    background-color: #848484; }
  .sticky .step-title {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
            align-items: center;
    background-color: #433FEF;
    color: #FFF;
    font-size: 12px;
    padding: 5px;
    height: 28px; }
  .sticky .content {
    height: calc(100% - 28px);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center; }
  .sticky .text {
    margin: 0; }
  .sticky .close {
    width: 16px;
    height: 16px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_btn_close.png");
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat; }
  .sticky .btn {
    margin: 18px 0;
    width: 75px;
    height: 22px;
    background-image: url("https://rsdr.online/mv/assets/images/pic_btn_ok.png");
    background-size: 100% auto;
    background-position: 0 0;
    background-repeat: no-repeat; }
  .sticky u {
    font-weight: 500;
    cursor: pointer; }

@-webkit-keyframes paperfilp {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    background-position: 0 top; }
  19.999% {
    background-position: 0 top; }
  20% {
    background-position: -65px top; }
  39.999% {
    background-position: -65px top; }
  40% {
    background-position: -130px top; }
  59.999% {
    background-position: -130px top; }
  60% {
    background-position: -195px top; }
  79.999% {
    background-position: -195px top; }
  80% {
    background-position: -260px top; }
  99.999% {
    background-position: -260px top; }
  100% {
    -webkit-transform: translate(310px, 0);
            transform: translate(310px, 0);
    background-position: -325px top; } }

@keyframes paperfilp {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    background-position: 0 top; }
  19.999% {
    background-position: 0 top; }
  20% {
    background-position: -65px top; }
  39.999% {
    background-position: -65px top; }
  40% {
    background-position: -130px top; }
  59.999% {
    background-position: -130px top; }
  60% {
    background-position: -195px top; }
  79.999% {
    background-position: -195px top; }
  80% {
    background-position: -260px top; }
  99.999% {
    background-position: -260px top; }
  100% {
    -webkit-transform: translate(310px, 0);
            transform: translate(310px, 0);
    background-position: -325px top; } }

@-webkit-keyframes paperfilp2 {
  20% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    background-position: 0 top; }
  40% {
    -webkit-transform: translate(77px, 0);
            transform: translate(77px, 0);
    background-position: -65px top; }
  60% {
    -webkit-transform: translate(154px, 0);
            transform: translate(154px, 0);
    background-position: -130px top; }
  80% {
    -webkit-transform: translate(231px, 0);
            transform: translate(231px, 0);
    background-position: -195px top; }
  100% {
    -webkit-transform: translate(308px, 0);
            transform: translate(308px, 0);
    background-position: -260px top; } }

@keyframes paperfilp2 {
  20% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    background-position: 0 top; }
  40% {
    -webkit-transform: translate(77px, 0);
            transform: translate(77px, 0);
    background-position: -65px top; }
  60% {
    -webkit-transform: translate(154px, 0);
            transform: translate(154px, 0);
    background-position: -130px top; }
  80% {
    -webkit-transform: translate(231px, 0);
            transform: translate(231px, 0);
    background-position: -195px top; }
  100% {
    -webkit-transform: translate(308px, 0);
            transform: translate(308px, 0);
    background-position: -260px top; } }

@-webkit-keyframes barloading {
  0% {
    width: 0px; }
  3.33% {
    width: 12px; }
  6.66% {
    width: 24px; }
  9.99% {
    width: 36px; }
  13.32% {
    width: 48px; }
  16.65% {
    width: 60px; }
  19.98% {
    width: 72px; }
  23.31% {
    width: 84px; }
  26.64% {
    width: 96px; }
  29.97% {
    width: 108px; }
  33.3% {
    width: 120px; }
  36.63% {
    width: 132px; }
  39.96% {
    width: 144px; }
  43.29% {
    width: 156px; }
  46.62% {
    width: 168px; }
  49.95% {
    width: 180px; }
  53.28% {
    width: 192px; }
  56.61% {
    width: 204px; }
  59.94% {
    width: 216px; }
  63.27% {
    width: 228px; }
  66.6% {
    width: 240px; }
  69.93% {
    width: 252px; }
  73.26% {
    width: 264px; }
  76.59% {
    width: 276px; }
  79.92% {
    width: 288px; }
  83.25% {
    width: 300px; }
  86.58% {
    width: 312px; }
  89.91% {
    width: 324px; }
  93.24% {
    width: 336px; }
  96.57% {
    width: 348px; }
  99.9% {
    width: 360px; } }

@keyframes barloading {
  0% {
    width: 0px; }
  3.33% {
    width: 12px; }
  6.66% {
    width: 24px; }
  9.99% {
    width: 36px; }
  13.32% {
    width: 48px; }
  16.65% {
    width: 60px; }
  19.98% {
    width: 72px; }
  23.31% {
    width: 84px; }
  26.64% {
    width: 96px; }
  29.97% {
    width: 108px; }
  33.3% {
    width: 120px; }
  36.63% {
    width: 132px; }
  39.96% {
    width: 144px; }
  43.29% {
    width: 156px; }
  46.62% {
    width: 168px; }
  49.95% {
    width: 180px; }
  53.28% {
    width: 192px; }
  56.61% {
    width: 204px; }
  59.94% {
    width: 216px; }
  63.27% {
    width: 228px; }
  66.6% {
    width: 240px; }
  69.93% {
    width: 252px; }
  73.26% {
    width: 264px; }
  76.59% {
    width: 276px; }
  79.92% {
    width: 288px; }
  83.25% {
    width: 300px; }
  86.58% {
    width: 312px; }
  89.91% {
    width: 324px; }
  93.24% {
    width: 336px; }
  96.57% {
    width: 348px; }
  99.9% {
    width: 360px; } }

#scene-group {
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 0; }
  #scene-group .scene {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; }
    #scene-group .scene.error.cut_1 .scene_container_1 .loading_sequence {
      opacity: 1; }
    #scene-group .scene.error.cut_1 .scene_container_1 .container {
      -webkit-animation: sequence 1s infinite steps(25);
              animation: sequence 1s infinite steps(25); }
    #scene-group .scene.error.cut_1 .scene_container_2 {
      opacity: 0; }
    #scene-group .scene.error.cut_2 .scene_container_1 {
      opacity: 0; }
    #scene-group .scene.error.cut_2 .scene_container_2 {
      opacity: 1; }
    #scene-group .scene.threeD {
      background-color: #000;
      background-image: linear-gradient(rgba(234, 236, 229, 0.08) 2px, transparent 0px), linear-gradient(90deg, rgba(255, 255, 255, 0.08) 2px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 0.5px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 0.5px);
      background-size: 200px 200px, 200px 200px, 10px 10px, 10px 10px;
      background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
      pointer-events: auto; }
      #scene-group .scene.threeD.cut_1 .bgText {
        opacity: 0; }
      #scene-group .scene.threeD.cut_1 .runningTextGroup {
        opacity: 1; }
      #scene-group .scene.threeD.cut_2 {
        -webkit-transition: opacity 0.5s;
        transition: opacity 0.5s; }
        #scene-group .scene.threeD.cut_2 .bgText {
          opacity: 0; }
        #scene-group .scene.threeD.cut_2 .bgCanvas {
          opacity: 0; }
        #scene-group .scene.threeD.cut_2 .runningTextGroup {
          opacity: 1; }
        #scene-group .scene.threeD.cut_2 .slitscanFrame {
          opacity: 1; }
    #scene-group .scene.lipSync {
      opacity: 0; }
  #scene-group .sceneLogo {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    color: #FFF;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center; }
  #scene-group .goBuyIt {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    width: 100vw;
    height: 100vh;
    background-image: url("https://rsdr.online/mv/assets/images/pic_bg_goBuyIt.jpg");
    color: #FFF;
    padding: 0 20px; }
    #scene-group .goBuyIt #replay {
      margin: 0 15px 0 30px; }
    #scene-group .goBuyIt.noWebCam .frame {
      width: 1080px; }
    #scene-group .goBuyIt.noWebCam .section_polaroid {
      display: none; }
    #scene-group .goBuyIt.noWebCam .group-right {
      width: 580px; }
    #scene-group .goBuyIt .imgPreload {
      position: absolute;
      overflow: hidden;
      height: 0;
      opacity: 0; }
    #scene-group .goBuyIt .frame {
      margin: 0 auto;
      width: 1440px;
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
              align-items: center; }
    #scene-group .goBuyIt .button {
      position: relative;
      display: block;
      border: 0;
      width: 185px;
      height: 42px;
      line-height: 40px;
      text-align: center;
      color: #000;
      background-color: #736d63;
      font-weight: 900;
      font-size: 16px;
      text-decoration: none;
      cursor: pointer;
      border-radius: 1px; }
      #scene-group .goBuyIt .button.disable {
        color: #B2B2B2; }
        #scene-group .goBuyIt .button.disable:hover {
          color: #B2B2B2;
          background-color: #736d63; }
          #scene-group .goBuyIt .button.disable:hover::before {
            background-color: #D1D1D1; }
          #scene-group .goBuyIt .button.disable:hover::after {
            width: calc(100% - 2px);
            background-color: #ADAA9C; }
          #scene-group .goBuyIt .button.disable:hover .text {
            background-color: #D1D1D1; }
        #scene-group .goBuyIt .button.disable:active {
          color: #000;
          background-color: #736d63; }
          #scene-group .goBuyIt .button.disable:active::before {
            background-color: #D1D1D1; }
          #scene-group .goBuyIt .button.disable:active::after {
            width: calc(100% - 2px);
            background-color: #ADAA9C; }
          #scene-group .goBuyIt .button.disable:active .text {
            background-color: #D1D1D1; }
      #scene-group .goBuyIt .button::before {
        position: absolute;
        content: "";
        z-index: 0;
        display: block;
        top: 0;
        left: 0;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        background-color: #D1D1D1; }
      #scene-group .goBuyIt .button::after {
        position: absolute;
        content: "";
        z-index: 0;
        display: block;
        top: 1px;
        left: 1px;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background-color: #ADAA9C; }
      #scene-group .goBuyIt .button .text {
        position: absolute;
        display: block;
        left: 1px;
        top: 1px;
        z-index: 1;
        background-color: #D1D1D1;
        width: calc(100% - 3px);
        height: calc(100% - 3px); }
      #scene-group .goBuyIt .button:hover {
        color: #FFF;
        background-color: #010673; }
        #scene-group .goBuyIt .button:hover::before {
          background-color: #6973d1; }
        #scene-group .goBuyIt .button:hover::after {
          width: calc(100% - 3px);
          background-color: #372cad; }
        #scene-group .goBuyIt .button:hover .text {
          background-color: #0000bc; }
      #scene-group .goBuyIt .button:active {
        color: #FFF;
        background-color: #010673; }
        #scene-group .goBuyIt .button:active::before {
          background-color: #0000bc; }
        #scene-group .goBuyIt .button:active::after {
          width: calc(100% - 3px);
          background-color: #372cad; }
        #scene-group .goBuyIt .button:active .text {
          background-color: #010673; }
    #scene-group .goBuyIt .album {
      position: relative;
      margin: 0 auto;
      width: 470px;
      height: 490px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% auto;
      background-image: url("https://rsdr.online/mv/assets/images/pic_album.png");
      z-index: 1; }
    #scene-group .goBuyIt .logo {
      position: absolute;
      display: block;
      bottom: -100px;
      left: 50%;
      margin-left: -284px;
      width: 568px;
      height: 166px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% auto;
      background-image: url("https://rsdr.online/mv/assets/images/pic_radr_logo.png");
      z-index: 0; }
    #scene-group .goBuyIt .intro_text {
      width: 580px;
      height: 318px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-size: 100% auto;
      background-image: url("https://rsdr.online/mv/assets/images/pic_text_goBuyIt.png"); }
    #scene-group .goBuyIt .shareBtn {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      width: 42px;
      height: 42px;
      margin: 0 4px;
      border-radius: 1px;
      background-color: #736d63; }
      #scene-group .goBuyIt .shareBtn::before {
        position: absolute;
        content: "";
        z-index: 0;
        display: block;
        top: 0;
        left: 0;
        width: calc(100% - 1px);
        height: calc(100% - 1px);
        background-color: #adaa9c; }
      #scene-group .goBuyIt .shareBtn::after {
        position: absolute;
        content: "";
        z-index: 0;
        display: block;
        top: 0;
        left: 0;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        background-color: #d1d1d1; }
      #scene-group .goBuyIt .shareBtn:hover {
        background-color: #010673; }
        #scene-group .goBuyIt .shareBtn:hover::before {
          width: 100%;
          background-color: #6973d1; }
        #scene-group .goBuyIt .shareBtn:hover::after {
          background-color: #0000bc; }
        #scene-group .goBuyIt .shareBtn:hover .text {
          background-position: 0 100%; }
      #scene-group .goBuyIt .shareBtn:active {
        background-color: #010673; }
        #scene-group .goBuyIt .shareBtn:active::before {
          width: 100%;
          background-color: #0000bc; }
        #scene-group .goBuyIt .shareBtn:active::after {
          background-color: #010673; }
        #scene-group .goBuyIt .shareBtn:active .text {
          background-position: 0 100%; }
      #scene-group .goBuyIt .shareBtn .text {
        position: relative;
        display: block;
        z-index: 2;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto; }
    #scene-group .goBuyIt .shareText {
      display: inline;
      vertical-align: middle;
      font-size: 16px;
      font-weight: 900; }
    #scene-group .goBuyIt .shareBtns {
      margin-top: 65px;
      zoom: 1; }
      #scene-group .goBuyIt .shareBtns::before {
        content: "";
        display: table; }
      #scene-group .goBuyIt .shareBtns::after {
        content: "";
        display: table;
        clear: both; }
      #scene-group .goBuyIt .shareBtns .btnGroup {
        float: left; }
      #scene-group .goBuyIt .shareBtns .button {
        position: relative;
        left: 0;
        margin-left: 0; }
      #scene-group .goBuyIt .shareBtns .fb {
        margin-left: 10px; }
        #scene-group .goBuyIt .shareBtns .fb .text {
          background-image: url("https://rsdr.online/mv/assets/images/pic_share_fb.png"); }
      #scene-group .goBuyIt .shareBtns .twitter .text {
        background-image: url("https://rsdr.online/mv/assets/images/pic_share_twitter.png"); }
    #scene-group .goBuyIt .group-left {
      width: 470px; }
    #scene-group .goBuyIt .group-right {
      width: 920px;
      display: -webkit-box;
      display: flex; }
    #scene-group .goBuyIt .section_album {
      position: relative;
      text-align: center; }
    #scene-group .goBuyIt .section_introduce {
      position: relative;
      overflow: hidden;
      width: 580px; }
      #scene-group .goBuyIt .section_introduce .title {
        margin-top: 30px;
        width: 420px;
        height: 64px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url("https://rsdr.online/mv/assets/images/pic_share_title.png");
        background-size: 100% auto; }
    #scene-group .goBuyIt .polaroid-Group {
      width: 100%;
      height: 380px;
      overflow: hidden; }
    #scene-group .goBuyIt .section_polaroid {
      position: relative;
      text-align: center;
      width: 334px; }
      #scene-group .goBuyIt .section_polaroid canvas {
        position: absolute;
        border: 0;
        display: block;
        -webkit-transform: scale(0.39) rotate(7deg) translate(30%, -10%);
                transform: scale(0.39) rotate(7deg) translate(30%, -10%);
        -webkit-transform-origin: left top;
                transform-origin: left top; }
      #scene-group .goBuyIt .section_polaroid .btnGroup {
        position: relative;
        z-index: 1; }
    #scene-group .goBuyIt #download {
      margin-left: 10px; }
      #scene-group .goBuyIt #download .text {
        background-image: url("https://rsdr.online/mv/assets/images/pic_download.png"); }
  #scene-group .scene_container_1 {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #0617b6;
    color: #FFF; }
    #scene-group .scene_container_1 .loading_sequence {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 50px;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      -webkit-transform: rotateZ(-20deg) scale(1.4);
              transform: rotateZ(-20deg) scale(1.4); }
    #scene-group .scene_container_1 .container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 2500vh;
      background-image: url("https://rsdr.online/mv/assets/images/pic_loading.png");
      background-size: auto 100%;
      background-position: center 0;
      background-repeat: no-repeat; }
    #scene-group .scene_container_1 .textGroup {
      padding: 10px 25px;
      zoom: 1;
      font-size: 18px;
      line-height: 1.4em; }
      #scene-group .scene_container_1 .textGroup p {
        margin: 30px 0; }
      #scene-group .scene_container_1 .textGroup::before {
        content: "";
        display: table; }
      #scene-group .scene_container_1 .textGroup::after {
        content: "";
        display: table;
        clear: both; }
  #scene-group .scene_container_2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0; }
    #scene-group .scene_container_2 .decoration {
      position: absolute;
      top: 0;
      left: 0;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;
      padding: 25px 25px;
      width: 100%;
      height: 100%; }
      #scene-group .scene_container_2 .decoration .top {
        width: 100%;
        height: calc(100% - 38px);
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
                justify-content: space-between; }
      #scene-group .scene_container_2 .decoration .left {
        position: relative;
        border-style: solid;
        border-color: #FFF transparent #FFF #FFF;
        border-width: 1px;
        width: 17px; }
      #scene-group .scene_container_2 .decoration .pic {
        position: relative;
        margin-top: 30px;
        margin-left: 25px;
        width: 156px;
        height: 276px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url("https://rsdr.online/mv/assets/images/pic_decoration_leftTop.png");
        background-size: 100% auto;
        overflow: hidden; }
        #scene-group .scene_container_2 .decoration .pic::after {
          position: absolute;
          content: "";
          display: block;
          width: 312px;
          height: 312px;
          top: 120px;
          left: 0;
          background-position: 0 0;
          background-image: url("https://rsdr.online/mv/assets/images/pic_decoration_leftTop_stripe.png");
          background-size: 312px 312px;
          -webkit-animation: moveStripe 2s infinite linear;
                  animation: moveStripe 2s infinite linear; }
      #scene-group .scene_container_2 .decoration .topCross {
        position: relative;
        margin-top: 30px;
        margin-left: 25px;
        width: 154px;
        height: 54px; }
        #scene-group .scene_container_2 .decoration .topCross::before, #scene-group .scene_container_2 .decoration .topCross::after {
          position: absolute;
          display: block;
          content: "";
          background-color: #FFF;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
        #scene-group .scene_container_2 .decoration .topCross::before {
          width: 100%;
          height: 1px; }
        #scene-group .scene_container_2 .decoration .topCross::after {
          width: 1px;
          height: 100%; }
      #scene-group .scene_container_2 .decoration .text {
        position: absolute;
        left: 25px;
        bottom: 15px;
        width: 29.30556vw;
        height: 17.91667vw;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url("https://rsdr.online/mv/assets/images/pic_decoration_text.png");
        background-size: cover; }
      #scene-group .scene_container_2 .decoration .right {
        position: relative;
        border-style: solid;
        border-color: #FFF #FFF #FFF transparent;
        border-width: 1px;
        width: 17px; }
      #scene-group .scene_container_2 .decoration .music {
        position: absolute;
        right: 0;
        width: 100px;
        height: 100%;
        background-position: center 0;
        background-image: url("https://rsdr.online/mv/assets/images/pic_decoration_music.png");
        background-size: auto 200%;
        background-repeat: no-repeat repeat;
        -webkit-animation: runMusic 4s infinite linear;
                animation: runMusic 4s infinite linear; }
      #scene-group .scene_container_2 .decoration .bottom {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
                justify-content: space-between;
        margin-top: 34px;
        width: 100%;
        height: 38px; }
      #scene-group .scene_container_2 .decoration .arrowGroup {
        position: relative;
        width: calc(100% - 422px - 10px);
        height: 38px;
        overflow: hidden; }
        #scene-group .scene_container_2 .decoration .arrowGroup::before {
          position: absolute;
          display: block;
          content: "";
          right: 0;
          bottom: 5px;
          width: 3784px;
          height: 12px;
          background-position: 0 center;
          background-image: url("https://rsdr.online/mv/assets/images/pic_decoration_arrow.png");
          background-size: auto 12px;
          background-repeat: repeat no-repeat;
          -webkit-animation: runArrow 10s infinite linear;
                  animation: runArrow 10s infinite linear;
          -webkit-transform: translateX(0);
                  transform: translateX(0); }
      #scene-group .scene_container_2 .decoration .textGroup {
        position: relative;
        width: 422px;
        height: 38px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: url("https://rsdr.online/mv/assets/images/pic_decoration_bottomText.png");
        background-size: 100% auto;
        border-style: solid;
        border-color: #FFF #FFF transparent #FFF;
        border-width: 1px; }
  #scene-group .slitscanFrame {
    position: absolute;
    opacity: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    width: calc(100vw - 226px);
    height: calc(100vh - 226px);
    overflow: hidden; }
  #scene-group .threeDBackground {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: 100vh; }
  #scene-group .runningTextGroup {
    position: relative;
    width: 100vw;
    height: 100vh;
    zoom: 1; }
    #scene-group .runningTextGroup::before {
      content: "";
      display: table; }
    #scene-group .runningTextGroup::after {
      content: "";
      display: table;
      clear: both; }
    #scene-group .runningTextGroup .text {
      background-repeat: no-repeat;
      background-position: 0 center;
      background-size: auto 100%;
      background-repeat: repeat no-repeat;
      background-image: url("https://rsdr.online/mv/assets/images/pic_running_text.png"); }
    #scene-group .runningTextGroup .top {
      position: absolute;
      left: 10px;
      top: 10px;
      width: calc(100vw - 20px);
      height: 93px;
      -webkit-animation: runTextH 8s infinite linear;
              animation: runTextH 8s infinite linear; }
    #scene-group .runningTextGroup .bottom {
      position: absolute;
      left: 10px;
      bottom: 10px;
      width: calc(100vw - 20px);
      height: 93px;
      -webkit-animation: runTextH 8s infinite linear;
              animation: runTextH 8s infinite linear;
      animation-direction: reverse; }
    #scene-group .runningTextGroup .left {
      position: absolute;
      left: calc(100vw - 10px);
      top: 113px;
      width: calc(100vh - 226px);
      height: 93px;
      -webkit-animation: runTextH 8s infinite linear;
              animation: runTextH 8s infinite linear;
      -webkit-transform-origin: left top;
              transform-origin: left top;
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg); }
    #scene-group .runningTextGroup .right {
      position: absolute;
      left: 10px;
      bottom: 20px;
      width: calc(100vh - 226px);
      height: 93px;
      -webkit-animation: runTextH 8s infinite linear;
              animation: runTextH 8s infinite linear;
      -webkit-transform-origin: left top;
              transform-origin: left top;
      -webkit-transform: rotate(-90deg);
              transform: rotate(-90deg); }
  #scene-group .bgCanvas {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    -webkit-box-pack: center;
            justify-content: center;
    overflow: hidden; }
    #scene-group .bgCanvas iframe {
      display: block;
      width: 1440px;
      height: 760px;
      border: 0; }
  #scene-group .songName {
    width: 917px;
    height: 190px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-image: url("https://rsdr.online/mv/assets/images/pic_logo_songName.png");
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s; }
  #scene-group.scene-rgbSplit .scene.rgbSplit {
    opacity: 1;
    z-index: 10; }
  #scene-group.scene-monitor .scene.monitor {
    opacity: 1;
    z-index: 10; }
  #scene-group.scene-videoCall .scene.videoCall {
    opacity: 1;
    z-index: 10; }
  #scene-group.scene-error {
    z-index: 2;
    height: 100vh;
    background: #0b23b3; }
    #scene-group.scene-error .scene.error {
      opacity: 1;
      z-index: 10; }
  #scene-group.scene-logo {
    z-index: 2; }
    #scene-group.scene-logo .scene.sceneLogo {
      opacity: 1; }
    #scene-group.scene-logo .songName {
      -webkit-transform: scale(1);
              transform: scale(1); }
  #scene-group.scene-threeD {
    z-index: 2; }
    #scene-group.scene-threeD .scene.threeD {
      opacity: 1;
      z-index: 10; }
  #scene-group.scene-goBuyIt {
    z-index: 2; }
    #scene-group.scene-goBuyIt .scene.goBuyIt {
      opacity: 1;
      z-index: 10; }
    #scene-group.scene-goBuyIt .scene.sceneLogo {
      opacity: 1; }

@-webkit-keyframes moveStripe {
  100% {
    background-position: -148px -148px; } }

@keyframes moveStripe {
  100% {
    background-position: -148px -148px; } }

@-webkit-keyframes sequence {
  100% {
    top: -2500%; } }

@keyframes sequence {
  100% {
    top: -2500%; } }

@-webkit-keyframes runTextH {
  100% {
    background-position: 1830px center; } }

@keyframes runTextH {
  100% {
    background-position: 1830px center; } }

@-webkit-keyframes runArrow {
  100% {
    -webkit-transform: translateX(1892px);
            transform: translateX(1892px); } }

@keyframes runArrow {
  100% {
    -webkit-transform: translateX(1892px);
            transform: translateX(1892px); } }

@-webkit-keyframes runMusic {
  100% {
    background-position: center 100%; } }

@keyframes runMusic {
  100% {
    background-position: center 100%; } }