/* Section 01 */
.section-01 .title{
  top: 16.3%; left: 23.4%; width: 53.2%; height: 26.3%;
  transform : translateY(-100px);
  opacity : 0;
  transition : transform 1s cubic-bezier(0.18, 0.9, 0.24, 1),
    opacity 1s ease-out;
}

.section-01 .title.active{
  opacity : 1;
  transform : translateY(0)
}

.section-01 .gift{
  top: 46.6%; left: 22.5%; width: 59.9%; height: 29.9%;
  transform : translateY(-100px);
  opacity : 0;
  transition : transform 1s cubic-bezier(0.18, 0.9, 0.24, 1),
    opacity 1s ease-out;
}

.section-01 .gift.active{
  opacity : 1;
  transform : translateY(0);
  transition-delay : 0.3s;
}

.section-01 .leaf{
  top: 14.6%; left: 12.7%; width: 10.6%; height: 5.9%; 
}

.section-01 .coin{
  top: 52.0%; left: 8.8%; width: 6.9%; height: 3.7%; 
}

.section-01 .cloud-01{
  top: 22.8%; left: 75.3%; width: 13.3%; height: 6.1%; 
}

.section-01 .cloud-02 {
  top: 45.0%; left: 13.3%; width: 13.3%; height: 6.1%;
}


.section-01 .tab-01{
  top: 80.0%; left: 13.3%; width: 16.8%; height: 11.8%;
}

.section-01 .tab-02{
  top: 80.3%; left: 41.3%; width: 17.4%; height: 11.5%; 
}

.section-01 .tab-03{
  top: 80.1%; left: 69.3%; width: 16.8%; height: 11.6%;
}

/* Section 02 */
.section-02 .tag{
  top: 37.6%; left: 6.7%; width: 27.1%; height: 18.6%; 
}

.section-02 .receive{
  top: 74.4%; left: 17.9%; width: 65.1%; height: 14.0%; 
}

/* Section 03 */
.section-03 .shell{
  perspective : 800px;
}

.section-03 .shell:hover{
filter: drop-shadow(0 0 20px #fff782) drop-shadow(1px 1px 20px rgba(0, 0, 0, 0.3));
}

.section-03 .shell .object{
  top : 0;
  left : 0;
  width : 100%;
  height : 100%;
  transform-style : preserve-3d;
  transition : transform .5s ease;
  will-change: transform;
}

.section-03 .shell-01{
  top: 24.8%; left: 14.2%; width: 23.4%; height: 10.8%;
}

.section-03 .shell-02{
  top: 24.8%; left: 38.3%; width: 23.4%; height: 10.8%; 
}

.section-03 .shell-03{
  top: 24.8%; left: 62.5%; width: 23.4%; height: 10.8%; 
}

.section-03 .shell-04{
  top: 36.0%; left: 14.2%; width: 23.4%; height: 10.8%;
}

.section-03 .shell-05{
  top: 36.0%; left: 38.3%; width: 23.4%; height: 10.8%; 
}

.section-03 .shell-06{
  top: 36.0%; left: 62.5%; width: 23.4%; height: 10.8%; 
}

.section-03 .shell-07{
  top: 47.1%; left: 14.2%; width: 23.4%; height: 10.8%;
}

.section-03 .shell-08{
  top: 47.1%; left: 38.3%; width: 23.4%; height: 10.8%; 
}

.section-03 .shell-09{
  top: 47.1%; left: 62.5%; width: 23.4%; height: 10.8%;
}


.section-03 .random{
  top: 60.2%; left: 19.6%; width: 60.4%; height: 5.4%; 
}

.section-03 .random:hover{
  filter: drop-shadow(0 0 20px #fff782) drop-shadow(1px 1px 20px rgba(0, 0, 0, 0.3));
}

/* Section 04 */
.section-04 .tag{
  top: 64.1%; left: 10.0%; width: 27.1%; height: 17.9%; 
  z-index : 2;
}

.section-04 .download{
  top: 71.9%; left: 17.8%; width: 65.1%; height: 13.5%; 
}