@charset "UTF-8";

/*--------------------------------------------------------
  ELEMENTS
--------------------------------------------------------*/

/* BUTTON */
.btn {
  padding: 12px 24px;
  border: solid 1px #999;
  background-color: #FFF;
  text-align: center;
  display: inline-block;
  font-weight: lighter;
  text-decoration: none ;
  -webkit-transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 400ms cubic-bezier(0.86, 0, 0.07, 1);
}
.btn:hover {
  background-color: var(--season-bg-color);
  color: #FFF;
  box-shadow: 6px 6px 6px 0px rgba(0, 0, 0, 0.13);
}



/*--------------------------------------------------------
  ANIMATION
--------------------------------------------------------*/

/* FADE */
.fade {
  opacity: 0;
  -webkit-transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.isAnimate {
  opacity: 1;
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}



/* WAVE */
.wave{
	position: relative;
  height: 100px;
  z-index: 10;
}

.wave canvas{
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
}