@charset "utf-8";
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 1%, 0);
    filter: blur(0px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0px);
  }
}
.TF_fadeIn {
  -moz-animation: fadeIn 0.5s ease-in-out 1.5s both;
  -webkit-animation: fadeIn 0.5s ease-in-out 1.5s both;
  -o-animation: fadeIn 0.5s ease-in-out 1.5s both;
  animation: fadeIn 0.5s ease-in-out 1.7s both;
}
.TF_fadeIn01 {
  -moz-animation: fadeIn 0.7s ease-in-out 1.6s both;
  -webkit-animation: fadeIn 0.7s ease-in-out 1.6s both;
  -o-animation: fadeIn 0.7s ease-in-out 1.6s both;
  animation: fadeIn 0.7s ease-in-out 1.8s both;
}
.TF_fadeIn02 {
  -moz-animation: fadeIn 0.7s ease-in-out 1.9s both;
  -webkit-animation: fadeIn 0.7s ease-in-out 1.9s both;
  -o-animation: fadeIn 0.7s ease-in-out 1.9s both;
  animation: fadeIn 0.7s ease-in-out 2.1s both;
}
.TF_fadeIn03 {
  -moz-animation: fadeIn 0.5s ease-in-out 2.2s both;
  -webkit-animation: fadeIn 0.5s ease-in-out 2.2s both;
  -o-animation: fadeIn 0.5s ease-in-out 2.4s both;
  animation: fadeIn 0.5s ease-in-out 2.4s both;
}
.TF_fadeIn04 {
  -moz-animation: fadeIn 0.7s ease-in-out 2.55s both;
  -webkit-animation: fadeIn 0.7s ease-in-out 2.55s both;
  -o-animation: fadeIn 0.7s ease-in-out 2.55s both;
  animation: fadeIn 0.7s ease-in-out 2.55s both;
}
.TF_fadeIn05 {
  -moz-animation: fadeIn 0.5s ease-in-out 3.1s both;
  -webkit-animation: fadeIn 0.5s ease-in-out 3.1s both;
  -o-animation: fadeIn 0.5s ease-in-out 3.1s both;
  animation: fadeIn 0.5s ease-in-out 2.8s both;
}
.TF_fadeIn06 {
  -moz-animation: fadeIn 0.5s ease-in-out 3.1s both;
  -webkit-animation: fadeIn 0.5s ease-in-out 3.1s both;
  -o-animation: fadeIn 0.5s ease-in-out 3.1s both;
  animation: fadeIn 0.5s ease-in-out 3.4s both;
}
@keyframes fadeOut {
  from {
    opacity: 1;
    color: #fff;
  }
  to {
    opacity: 0.8;
    color: #B4A066;
  }
}
.TF_fadeOut {
  -moz-animation: fadeOut 0.8s ease-in-out 8.5s both;
  -webkit-animation: fadeOut 0.8s ease-in-out 8.5s both;
  -o-animation: fadeOut 0.8s ease-in-out 8.5s both;
  animation: fadeOut 0.8s ease-in-out 8.5s both;
}
@keyframes puff-in-center2 {
  0% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px);
  }
}
.TF_puff-in-center2 {
  -webkit-animation: puff-in-center2 3s cubic-bezier(0.3, 0, 0.58, 1) 3.5s both;
  animation: puff-in-center2 1.9s cubic-bezier(.6, 0, .3, 1) 0.2s both;
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(1.07);
    transform: scale(1.07);
    -webkit-filter: blur(10px);
    filter: blur(10px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
.TF_puff-in-center {
  -webkit-animation: puff-in-center 1s cubic-bezier(0, 0.35, 0, 1) 0s both;
  animation: puff-in-center 0.5s cubic-bezier(0, 0.35, 0, 1) 0s both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0px);
  }
}
.TF_fadeInUp {
  -moz-animation: fadeInUp 1s ease 0s both;
  -webkit-animation: fadeInUp 1s ease 0s both;
  -o-animation: fadeInUp 1s ease 0s both;
  animation: fadeInUp 0.5s ease 0s both;
}
@keyframes to_the_top {
  0% {
    opacity: 1;
    clip-path: inset(100% 100% 0 0);
    -webkit-clip-path: inset(100% 100% 0 0);
  }
  70% {
    opacity: 1;
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}
@keyframes center_to_edge {
  0% {
    opacity: 1;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }
  70% {
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}
.TF_center_to_edge {
  -moz-animation: center_to_edge 2s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -webkit-animation: center_to_edge 2s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -o-animation: center_to_edge 2s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  animation: center_to_edge 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
}
.TF_center_to_edge02 {
  -moz-animation: center_to_edge 2s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -webkit-animation: center_to_edge 2s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -o-animation: center_to_edge 2s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  animation: center_to_edge 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 1s both;
}
@keyframes bottom_to_top {
  0% {
    opacity: 1;
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }
  70% {
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}
.TF_animation-bottom_to_top {
  -moz-animation: bottom_to_top 2s cubic-bezier(0.71, 0.01, 0.21, 1) 3.5s both;
  -webkit-animation: bottom_to_top 2s cubic-bezier(0.71, 0.01, 0.21, 1) 3.5s both;
  -o-animation: bottom_to_top 2s cubic-bezier(0.71, 0.01, 0.21, 1) 3.5s both;
  animation: bottom_to_top 2s cubic-bezier(0.71, 0.01, 0.21, 1) 3.5s both;
}
.TF_animation-bottom_to_top2 {
  -moz-animation: bottom_to_top 2.3s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -webkit-animation: bottom_to_top 2.3s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -o-animation: bottom_to_top 2.3s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  animation: bottom_to_top 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
}
.TF_animation-bottom_to_top3 {
  -moz-animation: bottom_to_top 2.3s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -webkit-animation: bottom_to_top 2.3s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -o-animation: bottom_to_top 2.3s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  animation: bottom_to_top 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 1s both;
}
.TF_animation-center_to_edge {
  -moz-animation: center_to_edge 1s ease-in-out 0s both;
  -webkit-animation: center_to_edge 1s ease-in-out 0s both;
  -o-animation: center_to_edge 1s ease-in-out 0s both;
  animation: center_to_edge 1s ease-in-out 0s both;
}
.TF_animation-to_the_top {
  -moz-animation: to_the_top 1s ease-in-out 0s both;
  -webkit-animation: to_the_top 1s ease-in-out 0s both;
  -o-animation: to_the_top 1s ease-in-out 0s both;
  animation: to_the_top 1s ease-in-out 0s both;
}
@keyframes top_to_bottom {
  0% {
    opacity: 1;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
  }
  70% {
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    -webkit-clip-path: inset(0);
  }
}
.TF_animation-top_to_bottom2 {
  -moz-animation: top_to_bottom 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -webkit-animation: top_to_bottom 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  -o-animation: top_to_bottom 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
  animation: top_to_bottom 1.5s cubic-bezier(0.71, 0.01, 0.21, 1.01) 0s both;
}
@keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateZ(-800px) rotateY(90deg);
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateY(87deg);
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateY(0);
    transform: translateZ(0) rotateY(0);
  }
}
.TF_slit-in-vertical {
  -webkit-animation: slit-in-vertical 0.45s ease-out 0s both;
  animation: slit-in-vertical 0.45s ease-out 0s both;
}
@keyframes logo-animation {
  0% {
    transform: none;
  }
  16% {
    transform: none;
  }
  50% {
    transform: translate3d(-60%, 0, 0);
  }
  100% {
    transform: translate3d(-60%, 0, 0);
  }
}
.TF_logo-animation {
  -moz-animation: logo-animation 1s ease 0s both;
  -webkit-animation: logo-animation 1s ease 0s both;
  -o-animation: logo-animation 1s ease 0s both;
  animation: logo-animation 4s ease 0s both;
}
@keyframes logo-animation02 {
  0% {
    opacity: 0;
    transform: translate3d(50%, 0, 0);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translate3d(50%, 0, 0);
    filter: blur(0px);
  }
}
.TF_logo-animation02 {
  -moz-animation: logo-animation02 1s ease 0s both;
  -webkit-animation: logo-animation02 1s ease 0s both;
  -o-animation: logo-animation02 1s ease 0s both;
  animation: logo-animation02 1s ease 1.7s both;
}
.c01 {
  position: relative;
  color: transparent;
  &::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0%;
    right: 100%;
    bottom: 0%;
    left: 0%;
    background: #fff;
  }
  &.active {
    animation-name: kf_c01a;
    animation-duration: 0s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    &::before {
      animation-name: kf_c01b;
      animation-duration: 1s;
      animation-delay: 1s;
      animation-fill-mode: forwards;
    }
  }
}
@keyframes kf_c01a {
  100% {
    color: inherit;
  }
}
@keyframes kf_c01b {
  50% {
    left: 0%;
    right: 0%;
  }
  100% {
    left: 100%;
    right: 0%;
  }
}