/* =============================================== */
/* reset */
/* =============================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, footer, header, nav, section, article, aside, canvas, figcaption, figure, address, em, img, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: top; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block; }

ul, li {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, select {
  vertical-align: middle; }

html {
  font-size: 62.5%; }

h1, h2, h3, h4, h5, h6, b {
  font-weight: 200; }

/* =============================================== */
/* base */
/* =============================================== */
body {
  cursor: pointer; }

#canvas-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: #EEEEEE;
  opacity: 0;
  animation: canvas-frame 5s 2s infinite; }

#robo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  transform: perspective(100px) scale(1); }

#canvas-frame {
  transition: 0.5s; }

#robo {
  transition: 0.4s; }

.change #canvas-frame {
  opacity: 1;
  transition: 0.5s 0.3s; }
.change #robo {
  opacity: 0;
  transform: perspective(100px) scale(0.5);
  transition: 0.4s; }

/* =============================================== */
/* robo */
/* =============================================== */
.robo {
  width: 40%;
  overflow: visible;
  transform: translateX(-2%); }

@media only screen and (max-width: 769px) {
  .robo {
    width: 72%; } }
.st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #D0021B; }

.st1 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: rgba(0, 0, 0, 0.1); }

.st2 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #5AC3E6; }

.st3 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #D0CA39; }

.st4 {
  fill: #D0CA39; }

.st5 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #F58727; }

.st6 {
  fill: #F58727; }

.st7 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #EBE121; }

.st8 {
  fill: #5AC3E6; }

.st9 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: none;
  stroke: #474747;
  stroke-width: 2;
  stroke-miterlimit: 10; }

.st10 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #FF334B; }

.st11 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #EDEDE1; }

.parts {
  transform-origin: right center;
  opacity: 0; }

/* =============================================== */
/* robo */
/* =============================================== */
.zoomIn01 {
  transform: scale(0.01) rotateZ(45deg);
  opacity: 0; }

.zoomIn01.animEnd {
  transform: scale(1) rotateZ(0.01deg);
  opacity: 1;
  transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.roboAnim {
  animation: roboRoop 4.5s;
  animation-iteration-count: infinite; }

@keyframes roboRoop {
  0% {
    transform: translateX(-2%) rotate3d(0, 1, 0, 0deg); }
  33% {
    transform: translateX(-5%) rotate3d(0, 1, 0, 13deg); }
  66% {
    transform: translateX(1%) rotate3d(0, 1, 0, -13deg); }
  100% {
    transform: translateX(-2%) rotate3d(0, 1, 0, 0deg); } }
.groupAnim {
  animation: roop 1.5s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%; }

@keyframes roop {
  0% {
    transform: scale(1); }
  10% {
    transform: scale(1.03) rotateZ(-1deg); }
  70% {
    transform: scale(1) rotateZ(0deg); }
  100% {
    transform: scale(1) rotateZ(0deg); } }
#spanner {
  animation: color 6s 2.5s;
  animation-iteration-count: infinite; }

@keyframes color {
  0% {
    fill: #5AC3E6; }
  25% {
    fill: #EBE121; }
  50% {
    fill: #D0021B; }
  75% {
    fill: #F58727; }
  100% {
    fill: #5AC3E6; } }

/*# sourceMappingURL=style.css.map */