:root{
  --width: 200vh;
  --height: 210vh;
  --depth: calc(var(--width) * 1);
  --spare: calc(var(--depth) / 2);
  --frame: 10px;
  --margin: 45vh;
  --marginTop: 100vh;
}
*{
  box-sizing:border-box;
  word-break:keep-all;
  word-wrap:break-word;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent;
}
html{ font-size:15px; }
body{
  font-size:1rem;
  color:var(--black);
  font-weight:400;
  font-family:utopia-std-caption, 'utopia-std-caption', Pretendard, 'Pretendard', sans-serif;
  line-height:1.58;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  overflow: hidden;
  width: 100vw;
}
body.loading *{ pointer-events:none; cursor:wait;  }

.device-desktop{  }
.device-mobile{ display:none !important; }

.wrap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#scene{ position:absolute; top:50%; left:50%; z-index: 1; transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
}
#sky{ width:100%; height:100%; position:relative; transform-style:preserve-3d; transition-property:transform;
  /* transition:2000ms;
  transform:rotate3d(0, 1, 0, 270deg);
  transform:rotate3d(0, 1, 0, 180deg);
  transform:rotate3d(0, 1, 0, 90deg);
  transform:rotate3d(0, 1, 0, 0deg); */
  animation:spinning 150000ms infinite linear;
}
@keyframes spinning{
  0%{ transform:rotate3d(0, 1, 0, 0deg); }
  100%{ transform:rotate3d(0, 1, 0, 360deg); }
}

.wall{ position:absolute; line-height:200px; font-weight:bold; text-transform:uppercase; text-align:center;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
}
/* .wall:after{ content:''; position:absolute; display:block; width:100%; height:100%; left:0; top:0; background-image:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0)); pointer-events:none; } */

h1.title{ position:fixed; z-index:50; left:50%; top:10%; transform:translateX(-50%); width:80%; pointer-events:none;
  transition:3000ms ease-in-out;
  transition-delay:500ms;
}
  h1.title img{ display:block; width:100%;
    animation:updownT 10000ms infinite linear;
  }
  @keyframes updownT {
    0%{ margin-top:0; }
    50%{ margin-top:10px; }
    100%{ margin-top:0; }
  }
  @keyframes updownB {
    0%{ margin-bottom:0; }
    50%{ margin-bottom:5px; }
    100%{ margin-bottom:0; }
  }

/* deco */
/* transition */
#deco{
  transition:3000ms ease-in-out;
  transition-delay:400ms;
}
#deco{ position:fixed; pointer-events:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:200; }
  #deco > div{ position:absolute; }
    #deco > div img{ position:absolute; display:block; bottom:0; }
  #deco > div#star{ width:5vw; top:80%; left:50%; transform:translate(-50%,-50%); }
    #deco > div#star img:nth-child(1){ bottom:4vh; left:14vw; width:80%; transform:rotate(20deg); }
    #deco > div#star img:nth-child(2){ bottom:6vh; left:20vw; width:50%; transform:rotate(0deg); }
    #deco > div#star img:nth-child(3){ bottom:4vh; left:25vw; width:40%; transform:rotate(50deg); }
    #deco > div#star img:nth-child(4){ bottom:4vh; left:35vw; width:50%; transform:rotate(70deg); }
    #deco > div#star img:nth-child(5){ bottom:8vh; left:30vw; width:80%; transform:rotate(34deg); }
    #deco > div#star img:nth-child(6){ bottom:2vh; left:-11vw; width:47%; transform:rotate(-15deg); }
    #deco > div#star img:nth-child(7){ bottom:1vh; left:-16vw; width:30%; transform:rotate(0deg); }
    #deco > div#star img:nth-child(8){ bottom:6vh; left:-21vw; width:80%; transform:rotate(50deg); }
    #deco > div#star img:nth-child(9){ bottom:6vh; left:-25vw; width:44%; transform:rotate(65deg); }
    #deco > div#star img:nth-child(10){ bottom:2vh; left:-28vw; width:42%; transform:rotate(51deg); }
  /* #deco > div#wing{ width:4vw; top:50%; left:50%; transform:translate(-50%,-50%); }
    #deco > div#wing img:nth-child(1){ left:-10.5vw; top:8vh; }
    #deco > div#wing img:nth-child(2){ left:10.5vw; top:8vh; transform:scaleX(-1); } */

div#entrance{ position:fixed; top:50%; left:50%; transform:translate(-50%,-48%) scale(0.08); z-index:100; width:200%; transform-origin:center; cursor:pointer;
  transition:1500ms ease-in-out;
  transition-delay:600ms;
}
div#entrance:after{ content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color:#a3dce5; opacity:0;
  transition:600ms; transition-delay:1000ms; z-index:100;
}
  div#entrance img{ display:block; width:100%; }
  div#entrance img.house{
    animation:updownT 500ms infinite steps(4);
    animation-delay:500ms
  }
  div#entrance img.lock{ position:absolute; z-index:10; bottom:15%; width:3%; right:46%; transform:translate(50%,50%); }
  div#entrance img.arrow{ position:absolute; z-index:10; width:40%; left:60%; bottom:-4%; transform:rotate(20deg); transition:1200ms; transition-delay:2000ms;
    animation:tilt1 1000ms infinite steps(2);
  }
  div#entrance img.logo{ position:absolute; z-index:10; width:71%; left:67%; bottom:25%; transform:rotate(-15deg); transition:1200ms; transition-delay:2000ms;
    animation:tilt2 1500ms infinite steps(2);
  }
  @keyframes tilt1 {
    0%{ transform:rotate(20deg); }
    100%{ transform:rotate(30deg); }
  }
  @keyframes tilt2 {
    0%{ transform:rotate(-20deg); }
    100%{ transform:rotate(-23deg); }
  }
  div#entrance div#wing{ position:absolute; width:100%; top:33%; left:50%; transform:translate(-50%,-50%); }
    div#entrance div#wing img{ position:absolute; width:26%; }
    div#entrance div#wing img:nth-child(1){ right:100%; }
    div#entrance div#wing img:nth-child(2){ left:100%; transform:scaleX(-1); }

/* entrance */
body.entrance #sky{

}
body.entrance h1.title{
  width:30%;
}
body.entrance #deco{
  transform:scale(10);
}
body.entrance div#entrance{ cursor:default; pointer-events:none; transition-delay:250ms;
  transform-origin:54% 85%;
  transform:translate(-54%,-85%) scale(5);
  transform:translate(-54%,-85%) scale(1);
}
  body.entrance div#entrance img{ animation:none; pointer-events:none; }
  body.entrance div#entrance img.house{ transition:1000ms; transition-delay:250ms;
    transform:scale(10);
    transform-origin:54% 85%;
  }
  body.entrance div#entrance img.lock{ cursor:pointer; transition:1000ms; transition-delay:250ms;
    width:30%;
    /* animation:updownB 1500ms infinite steps(1); */
  }
  body.entrance div#entrance img.logo,
  body.entrance div#entrance img.arrow{ opacity:0; }
/* room */
/* body.room div#entrance{ transform:translate(-50%,-85%) scale(1); }
  body.room div#entrance img.house{ transform:scale(1.5); } */
body.room div#entrance{ transform:translate(-54%,-85%) scale(40); }
body.room div#entrance:after{ opacity:1; }
  body.room div#entrance img.lock{ animation:none; }