@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

body {
  font-family: 'Noto Sans KR', sans-serif !important;
  padding-bottom: 4.375rem;
}

a { text-decoration: none; color:inherit; }

li { list-style: none; }

.bg-brand {
  background-color: #FFD100 !important;
}

.bg-glassmorphism {
  background: rgba( 255, 255, 255, 0.2 ) !important;
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
  backdrop-filter: blur( 7.5px ) !important;
  -webkit-backdrop-filter: blur( 7.5px ) !important;
}

.text-gray {
  color: #868686 !important;
}

.text-light-gray {
  color: #909090 !important;
}

.text-xxs {
  font-size: 0.625rem !important; /* 10px */
}

.text-xs {
  font-size: 0.75rem !important; /* 12px */
}

.text-sm {
  font-size: 0.9rem !important; /* 14px */
}

.text-title {
  font-size: 1.125rem !important; /* 18px */
}

.badge-primary {
  background-color: #0095FF;
}

.divider {
  background-color: var(--bs-light) !important;
  height: 0.6rem;
  width: 100%;
}

hr {
  border-color: #EFEFEF !important;
}

/* =============================================================================
   home
   ========================================================================== */

.location-dropdown .invalid-location-popup {
  background-image: url(../images/location-popup.png);
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  width: 10rem;
  height: 3rem;
  margin-top: 0.4rem;
  position: sticky;
  z-index: 5;
}

.fade {
  opacity: 0;
  transition: opacity 1s;
}

.fade.show {
  opacity: 1;
}

.search-form input {
  background-image: url(../icons/search-gray.svg);
  background-size: 1.2rem;
  background-repeat: no-repeat;
  background-position: 0.75rem center;
  padding-left: 2.5rem !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.75rem !important;
  border-radius: 3rem !important;
  border-color: #C5C5C5 !important;
}

.search-form {
  position: relative;
}

.search-form::after {
  content: '';
  display: block;
  height: 2.25rem;
  width: 2.25rem;
  background-image: url(../icons/pulse-blue.gif);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0.45rem;
  right: 1.25rem;
}

.search-form::placeholder {
  color: #C5C5C5 !important;
}

[data-guide-mode="true"] {
  overflow: hidden;
}

[data-guide-mode="true"] .guide-cover {
  z-index: 10;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
}

[data-guide-mode="true"] .guide-phrase {
  z-index: 11;
  position: fixed;
  background-image: url(../images/renewal-phrase.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 50vw;
  height: 10vh;
  top: 2rem;
  left: 50%;
  transform: translate(-50%);
}

[data-guide-mode="true"] .guide-close {
  z-index: 11;
  position: fixed;
  background-image: url(../icons/close-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  top: 2vh;
  right: 1rem
}

[data-guide-mode="true"] .grid-guide {
  content: '';
  z-index: 11;
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.grid-content {
  position: relative;
  overflow: hidden;
  height: 18vh;
}

.grid-content-inner {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 18vh;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  position: absolute;
  opacity: 0;
}

.grid-content-inner::after,
.grid-content-inner::before,
.grid-content-inner .money-coin-1,
.grid-content-inner .money-coin-2{
  position: absolute;
  top: 50%;
  left: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


/* 푸드 */
.grid-content-1 .grid-content-inner {
  background-image: url(../images/grid-frame-1.svg); 
  animation-name: up-to-down;
}

.grid-content-1 .grid-content-inner::after {
  content: '';
  background-image: url(../images/pizza.png);
  transform: translateX(-50%) translateY(-50%);
  width: 5rem;
  height: 5rem;

  animation-name: grid-content-1;
  transition: opacity 0.3s ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.grid-content-1 .grid-guide {
  background-image: url(../images/grid-guide-1.png); 
}

/* 쇼핑 */
.grid-content-2 .grid-content-inner {
  background-image: url(../images/grid-frame-2.svg); 
  animation-name: up-to-down;
  animation-delay: 1.5s;
}

.grid-content-2 .grid-content-inner::before {
  content: '';
  background-image: url(../images/shopping.png);
  transform: translateX(-65%) translateY(-45%);
  width: 4.5rem;
  height: 4.5rem;
}

.grid-content-2 .grid-content-inner::after {
  content: '';
  background-image: url(../images/shopping-bubble.png);
  transform: translateX(10%) translateY(-135%);
  width: 2rem;
  height: 2rem;

  animation-name: grid-content-2;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
}

.grid-content-2 .grid-guide {
  background-image: url(../images/grid-guide-2.png); 
}

/* 광고 */
.grid-content-3 .grid-content-inner {
  background-image: url(../images/grid-frame-3.svg); 
  animation-name: left-to-right;
  animation-delay: 1s;
}

.grid-content-3 .grid-content-inner::before {
  content: '';
  z-index: 2;
  background-image: url(../images/notice.png);
  transform: translateX(-50%) translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;
}

.grid-content-3 .grid-content-inner::after {
  content: '';
  z-index: 3;
  background-image: url(../images/notice-bubble.png);
  transform: translateX(-50%) translateY(-70%);
  width: 2rem;
  height: 2rem;

  animation-name: grid-content-3;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.grid-content-3 .grid-guide {
  background-image: url(../images/grid-guide-3.png); 
}

/* 뉴스 */
.grid-content-4 .grid-content-inner {
  background-image: url(../images/grid-frame-4.svg); 
  animation-name: right-to-left;
  animation-delay: 0.5s;
}

.grid-content-4 .grid-content-inner::before {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/news.png);
  transform: translateX(-50%) translateY(-50%);
  width: 5rem;
  height: 5rem;
}

.grid-content-4 .grid-content-inner::after {
  content: '';
  /* z-index: 3; */
  background-image: url(../images/news-bell.png);
  transform: translateX(-120%) translateY(-150%);
  width: 2rem;
  height: 2rem;

  animation-name: grid-content-4;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
}

.grid-content-4 .grid-guide {
  background-image: url(../images/grid-guide-4.png); 
}

/* 펀딩 */
.grid-content-5 .grid-content-inner {
  position: absolute;
  background-image: url(../images/grid-frame-5.svg); 

  animation-name: left-to-right;
  animation-delay: 0.5s;
}

.grid-content-5 .grid-content-inner::before {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/money.png);
  transform: translateX(-50%) translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;
}

.grid-content-5 .grid-content-inner .money-coin-1 {
  position: absolute;
  /* z-index: 3; */
  background-image: url(../images/money-coin-1.png);
  transform: translateX(-50%) translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;

  animation-name: money-coin-1;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
}
.grid-content-5 .grid-content-inner .money-coin-2 {
  position: absolute;
  /* z-index: 3; */
  background-image: url(../images/money-coin-2.png);
  transform: translateX(-50%) translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;

  animation-name: money-coin-2;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 2.5s;
}

.grid-content-5 .grid-guide {
  position: absolute;
  background-image: url(../images/grid-guide-5.png); 
}

/* 꽃배달 */
.grid-content-6 .grid-content-inner {
  background-image: url(../images/grid-frame-6.svg); 
  animation-name: right-to-left;
}

.grid-content-6 .grid-content-inner::before {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/flower.png);
  transform: translateX(-50%) translateY(-50%);
  width: 5rem;
  height: 5rem;

  animation-name: grid-content-6;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 1s;
}

.grid-content-6 .grid-content-inner::after {
  content: '';
  /* z-index: 3; */
  background-image: url(../images/flower-face.png);
  transform: translateX(-50%) translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
}

.grid-content-6 .grid-guide {
  background-image: url(../images/grid-guide-6.png); 
}

/* 대리운전 */
.grid-content-7 .grid-content-inner {
  background-image: url(../images/grid-frame-7.svg); 
  animation-name: left-to-right;
  animation-delay: 1.5s;
}

.grid-content-7 .grid-content-inner::before {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/car-1.png);
  transform: translateX(-50%) translateY(-50%);
  width: 6rem;
  height: 6rem;

  animation-name: grid-content-7;
  transition: opacity 0.3s ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.grid-content-7 .grid-guide {
  background-image: url(../images/grid-guide-7.png); 
}

/* 이사 */
.grid-content-8 .grid-content-inner {
  background-image: url(../images/grid-frame-8.svg); 
  animation-name: right-to-left;
  animation-delay: 1s;
}

.grid-content-8 .grid-content-inner::after {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/house-box.png);
  transform: translateX(-50%) translateY(-40%);
  width: 5.5rem;
  height: 5.5rem;

  animation-name: grid-content-8-box;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
  animation-duration: 4s;
}

.grid-content-8 .grid-content-inner::before {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/house.png);
  transform: translateX(-50%) translateY(-50%);
  width: 4rem;
  height: 4rem;

  animation-name: grid-content-8;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}

.grid-content-8 .grid-guide {
  background-image: url(../images/grid-guide-8.png); 
}

/* 드론 */
.grid-content-9 .grid-content-inner {
  background-image: url(../images/grid-frame-9.svg); 
  animation-name: down-to-up;
  background-position: top;
  animation-delay: 2s;
}

.grid-content-9 .grid-content-inner::before {
  content: '';
  /* z-index: 4; */
  background-image: url(../images/drone.png);
  transform: translateX(-50%) translateY(-50%);
  width: 4.5rem;
  height: 4.5rem;

  animation-name: grid-content-9;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}

.grid-content-9 .grid-guide {
  background-image: url(../images/grid-guide-9.png); 
  background-position: top;
}


.store-promotion {
  background-color: #0095FF;
}

/* =============================================================================
   category
   ========================================================================== */

#categoryWrapper .category-name {
  font-size: 0.875rem; /* 14px */
}

#categoryWrapper .category-image {
  width: 15vw;
  height: 15vw;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  transition: opacity 0.1s ease-in-out;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-duration: 9s
}

#category1 .category-image {
  background-image: url(../images/category/all.png);
}

#category2 .category-image {
  background-image: url(../images/category/cafe-1.png);
  animation-name: category-cafe;
}

#category3 .category-image {
  background-image: url(../images/category/school-food-1.png);
  animation-name: category-school-food;
}

#category4 .category-image {
  background-image: url(../images/category/chinese-food-1.png);
  animation-name: category-chinese-food;
}

#category5 .category-image {
  background-image: url(../images/category/chicken-1.png);
  animation-name: category-chicken;
}

#category6 .category-image {
  background-image: url(../images/category/korean-food-1.png);
  animation-name: category-korean-food;
}

#category7 .category-image {
  background-image: url(../images/category/pig-hock-1.png);
  animation-name: category-pig-hock;
}

#category8 .category-image {
  background-image: url(../images/category/pizza-1.png);
  animation-name: category-pizza;
}

#category9 .category-image {
  background-image: url(../images/category/japanese-food-1.png);
  animation-name: category-japanese-food;
}

#category10 .category-image {
  background-image: url(../images/category/western-food-1.png);
  animation-name: category-western-food;
}

#category11 .category-image {
  background-image: url(../images/category/franchise-1.png);
  animation-name: category-franchise;
}

#category12 .category-image {
  background-image: url(../images/category/meat-1.png);
  animation-name: category-meat;
}

#category13 .category-image {
  background-image: url(../images/category/midnight-meal-1.png);
  animation-name: category-midnight-meal;
}

#category14 .category-image {
  background-image: url(../images/category/reservation-1.png);
  animation-name: category-reservation;
}

#category15 .category-image {
  background-image: url(../images/category/drone.png);
  animation-name: category-drone;
}

#category16 .category-image {
    background-image: url(../images/category/coupon-1.png);
    animation-name: category-coupon;
}
/* =============================================================================
   search condition
   ========================================================================== */

.condition-item {
  border: 1px solid #C5C5C5;
  border-radius: 3rem;
  color: #909090;
  padding: 0.375rem 0.2rem;
  font-size: 0.75rem; /* 12px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
}

.condition-item.active {
  background-color: #E6F5FF;
  color: #0095FF;
  border-color: #0095FF;
}

/* =============================================================================
   icons
   ========================================================================== */
.icon {
  height: 1.5rem; /* 24px */
  width: 1.5rem; /* 24px */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.icon-sm {
  height: 1rem !important; /* 16px */
  width: 1rem !important; /* 16px */
}

.icon-dropdown-arrow {
  background-image: url(../icons/dropdown-arrow.svg);
}

.icon-notification {
  background-image: url(../icons/notification.svg);
}

.icon-location {
  background-image: url(../icons/location.svg);
}

.icon-location-blue {
  background-image: url(../icons/location-blue.svg);
}

.icon-search {
  background-image: url(../icons/search.svg);
}

.icon-search-gray {
  background-image: url(../icons/search-gray.svg);
}

.icon-like {
  background-image: url(../icons/like.svg);
}

.icon-hive-score {
  background-image: url(../icons/hive-score.svg);
}

.icon-pulse {
  background-image: url(../icons/pulse.gif);
  height: 2rem !important; 
  width: 2rem !important;
}

.icon-arrow-back {
  background-image: url(../icons/arrow-back.svg);
}

/* =============================================================================
   icons for search condition
   ========================================================================== */
.icon-sort {
  background-image: url(../icons/sort.svg);
}

.icon-coupon {
  background-image: url(../icons/coupon.svg);
}

.icon-heart-fill {
  background-image: url(../icons/heart-fill.svg);
}

.icon-hive {
  background-image: url(../icons/hive.svg);
}

.icon-reserve {
  background-image: url(../icons/reserve.svg);
}

.icon-store {
  background-image: url(../icons/store.svg);
}

.icon-money {
  background-image: url(../icons/money.svg);
}

/* =============================================================================
   icons for store row
   ========================================================================== */
  
.icon-delivery-time {
  background-image: url(../icons/delivery-time.svg);
}

.icon-distance {
  background-image: url(../icons/distance.svg);
}

.icon-like {
  background-image: url(../icons/like.svg);
}

.icon-hive-score {
  background-image: url(../icons/hive-score.svg);
}


.representative-image img {
  object-fit: cover;
}

.store-item {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.75s ease-out, transform 0.75s ease-out;
}

.store-item.show {
  opacity: 1;
  transform: translateX(0);
}

/* =============================================================================
   icons for news
   ========================================================================== */
  
   .icon-eyes {
    background-image: url(../icons/eye.svg);
  }

  .icon-talk {
    background-image: url(../icons/talk.svg);
  }

/* =============================================================================
   icons for footer
   ========================================================================== */
  
  .icon-channel {
    background-image: url(../icons/channel.svg);
  }

  .icon-slash {
    background-image: url(../icons/slash.svg);
  }

  .icon-facebook {
    background-image: url(../icons/facebook.svg);
  }

  .icon-instagram {
    background-image: url(../icons/instagram.svg);
  }

  .icon-youtube {
    background-image: url(../icons/youtube.svg);
  }

  .icon-blog {
    background-image: url(../icons/blog.svg);
  }

  .icon-home {
    background-image: url(../icons/home.svg);
  }

  .icon-selected {
    background-image: url(../icons/selected.svg);
  }

  .icon-inbox-list {
    background-image: url(../icons/inbox-list.svg);
  }

  .icon-bell {
    background-image: url(../icons/bell.svg);
  }

  .icon-person {
    background-image: url(../icons/person.svg);
  }

  .icon-percent {
    background-image: url(../icons/percent.svg);
  }

/* =============================================================================
   intro 1
   ========================================================================== */

.intro-skateboarder {
  background-image: url(../images/skateboarder.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: min(90vw, 40vh);
  height: min(90vw, 40vh);
  position: fixed;
  top: 45vh;
  transform: translateX(5%);
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-name: skate; 
}

.intro-phrase-1 {
  background-image: url(../images/intro-phrase-1.png);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: fixed;
  width: 60vw;
  height: 60vw;
  right: 10vw;
  top: 15vh;
}

.intro-logo-1 {
  background-image: url(../images/whee-logo.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  width: min(25vw, 12vh);
  height: min(25vw, 12vh);
  right: 32vw;
  top: 9vh;
}

.intro-logo-inner-1 {
  position: relative;
  width: min(25vw, 12vh);
  height: min(25vw, 12vh);

  left: 33%;
  top: 40%;
}

.intro-logo-inner-1::after {
  content: '';
  background-image: url(../images/whee-bird.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;

  height: min(5vh, 9vw);
  width: min(5vh, 9vw);

  animation-name: intro-bird;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

/* =============================================================================
   intro 2
   ========================================================================== */

.intro-marketer {
  background-image: url(../images/marketer.png);
  background-size: contain;
  background-repeat: no-repeat;
  height: 45vh;
  width: calc(45vh * 0.5561);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
}

.intro-phrase-2 {
  background-image: url(../images/intro-phrase-2.png);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: fixed;
  width: 50vw;
  height: 50vw;
  right: 10vw;
  top: 15vh;
}

.intro-marketer .basement {
  position: absolute;
  width: 100%;
  height: 100%;
}

.intro-heart {
  background-image: url(../images/roate-heart-1.png);
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: relative;
  width: 4vh;
  height: 4vh;
  top: 17.5%;
  left: 3%;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-duration: 0.5s;
  animation-name: ratate-heart;
}

.intro-logo-2 {
  background-image: url(../images/whee-logo.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  width: min(25vw, 12vh);
  height: min(25vw, 12vh);
  right: 22vw;
  top: 3vh;
}

.intro-logo-inner-2 {
  position: relative;
  width: min(25vw, 12vh);
  height: min(25vw, 12vh);

  left: 38%;
  top: 44.5%
}

.intro-logo-inner-2::after {
  content: '';
  background-image: url(../images/whee-heart.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;

  height: min(3vh, 7vw);
  width: min(3vh, 7vw);

  animation-name: intro-heart;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}


/* =============================================================================
   news
   ========================================================================== */

  .news-image {
    width: 31%;
  }

  .news-contents {
    width: 68%;
  }

/* =============================================================================
   footer
   ========================================================================== */

  .text-footer {
    color: #303030;
  }

  .bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4.375rem;
    z-index: 100;
    background-color: white;
    box-shadow: 0 8px 24px 0 rgba( 31, 38, 135, 0.25 );
  }
	
  .bottom-menu-div {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 2.875rem;
    height: 2.375rem;
    color: #909090;
  }

    .bottom-menu-div.active {
        color: #02c6ff; /* Color for the active item */
    }

  .bottom-icon { 
    width: 2.875rem;
    text-align: center;
  }

  .bottom-nav-bg {
    background-color: #E6E6E6;
  }
  

/** =============================================================================
   @keyframes
   ========================================================================== */


@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes right-to-left {
  0% {
    transform: translateX(100%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes left-to-right {
  0% {
    transform: translateX(-100%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes up-to-down {
  0% {
    transform: translateX(0) translateY(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes down-to-up {
  0% {
    transform: translateX(0) translateY(100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

@keyframes ratate-heart {
  0% {
    background-image: url(../images/roate-heart-1.png);
  }
  33% {
    background-image: url(../images/roate-heart-2.png);
  }
  66% {
    background-image: url(../images/roate-heart-3.png);
  }
  100% {
    background-image: url(../images/roate-heart-4.png);
  }
}

@keyframes skate {
  /* 처음 위치 조정 */
  0% {
    transform: translateX(-10%) translateY(-30%);
  }
  /* 아래로 내려옴 */
  10% {
    transform: translateX(5%) translateY(0%);
  }
  /* 잠깐 유지 */
  30% {
    transform: translateX(5%) translateY(0%);
  }
  /* 오른쪽으로 이동 */
  60% {
    transform: translateX(120vw) translateY(0%);
  }
  /* 잠깐 유지 */
  80% {
    transform: translateX(120vw) translateY(0%);
  }
  /* 고정 위치로 이동 */
  100% {
    transform: translateX(5%) translateY(0%);
  }
}

@keyframes grid-content-1 {
  0% {
    background-image: url(../images/pizza.png);
  }
  33% {
    background-image: url(../images/chicken.png);
  }
  66% {
    background-image: url(../images/ramen.png);
  }
  100% {
    background-image: url(../images/pizza.png);
  }
}

@keyframes grid-content-2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes grid-content-3 {
  0% {
    transform: translateX(-50%) translateY(-70%);
  }
  20% {
    transform: translateX(20%) translateY(-130%);
  }
  80% {
    transform: translateX(20%) translateY(-130%);
  }
  100% {
    transform: translateX(-50%) translateY(-70%);
    z-index: 1;
  }
}

@keyframes grid-content-4 {
  0% {
    transform: translateX(-120%) translateY(-150%) rotate(5deg);
  }
  25% {
    transform: translateX(-120%) translateY(-150%) rotate(30deg);
  }
  50% {
    transform: translateX(-120%) translateY(-150%) rotate(-20deg);
  }
  75% {
    transform: translateX(-120%) translateY(-150%) rotate(10deg);
  }
  100% {
    transform: translateX(-120%) translateY(-150%) rotate(5deg);
  }
}

@keyframes money-coin-1 {
  0% {
    transform: translateX(-50%) translateY(-300%);
  }
  20% {
    transform: translateX(-50%) translateY(-50%);
  }
  90% {
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-300%);
  }
}

@keyframes money-coin-2 {
  0% {
    transform: translateX(-50%) translateY(-300%);
  }
  30% {
    transform: translateX(-50%) translateY(-300%);
  }
  40% {
    transform: translateX(-50%) translateY(-50%);
  }
  90% {
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-300%);
  }
}

@keyframes grid-content-6 {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(360deg);
  }
}

@keyframes grid-content-7 {
  0% {
    background-image: url(../images/car-1.png);
  }
  33% {
    background-image: url(../images/car-2.png);
  }
  66% {
    background-image: url(../images/car-3.png);
  }
  100% {
    background-image: url(../images/car-1.png);
  }
}

@keyframes grid-content-8 {
  0% {
    transform: translateX(-50%) translateY(-300%);
  }
  20% {
    transform: translateX(-50%) translateY(-50%);
  }
  80%{
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-300%);
  }
}

@keyframes grid-content-8-box {
  0% {
    background-image: url(../images/house-box.png);
  }
  10%{
    background-image: url(../images/house-box-2.png);
  }
  60%{
    background-image: url(../images/house-box-2.png);
  }
  80%{
    background-image: url(../images/house-box.png);
  }
  100% {
    background-image: url(../images/house-box.png);
  }
}

@keyframes grid-content-9 {
  0% {
    transform: translateX(-300%) translateY(-300%);
  }
  20%{
    transform: translateX(-50%) translateY(-50%);
  }
  80%{
    transform: translateX(-50%) translateY(-50%);
  }
  100% {
    transform: translateX(-300%) translateY(-300%);
  }
}

@keyframes category-cafe {
  0% {
    background-image: url(../images/category/cafe-1.png);
  }
  33% {
    background-image: url(../images/category/cafe-2.png);
  }
  66% {
    background-image: url(../images/category/cafe-3.png);
  }
  100% {
    background-image: url(../images/category/cafe-1.png);
  }
}

@keyframes category-school-food {
  0% {
    background-image: url(../images/category/school-food-1.png);
  }
  33% {
    background-image: url(../images/category/school-food-2.png);
  }
  66% {
    background-image: url(../images/category/school-food-3.png);
  }
  100% {
    background-image: url(../images/category/school-food-1.png);
  }
}

@keyframes category-chinese-food {
  0% {
    background-image: url(../images/category/chinese-food-1.png);
  }
  33% {
    background-image: url(../images/category/chinese-food-2.png);
  }
  66% {
    background-image: url(../images/category/chinese-food-3.png);
  }
  100% {
    background-image: url(../images/category/chinese-food-1.png);
  }
}

@keyframes category-chicken {
  0% {
    background-image: url(../images/category/chicken-1.png);
  }
  33% {
    background-image: url(../images/category/chicken-2.png);
  }
  66% {
    background-image: url(../images/category/chicken-3.png);
  }
  100% {
    background-image: url(../images/category/chicken-1.png);
  }
}

@keyframes category-korean-food {
  0% {
    background-image: url(../images/category/korean-food-1.png);
  }
  33% {
    background-image: url(../images/category/korean-food-2.png);
  }
  66% {
    background-image: url(../images/category/korean-food-3.png);
  }
  100% {
    background-image: url(../images/category/korean-food-1.png);
  }
}

@keyframes category-pig-hock {
  0% {
    background-image: url(../images/category/pig-hock-1.png);
  }
  33% {
    background-image: url(../images/category/pig-hock-2.png);
  }
  66% {
    background-image: url(../images/category/pig-hock-3.png);
  }
  100% {
    background-image: url(../images/category/pig-hock-1.png);
  }
}

@keyframes category-pizza {
  0% {
    background-image: url(../images/category/pizza-1.png);
  }
  33% {
    background-image: url(../images/category/pizza-2.png);
  }
  66% {
    background-image: url(../images/category/pizza-3.png);
  }
  100% {
    background-image: url(../images/category/pizza-1.png);
  }
}

@keyframes category-japanese-food {
  0% {
    background-image: url(../images/category/japanese-food-1.png);
  }
  33% {
    background-image: url(../images/category/japanese-food-2.png);
  }
  66% {
    background-image: url(../images/category/japanese-food-3.png);
  }
  100% {
    background-image: url(../images/category/japanese-food-1.png);
  }
}

@keyframes category-western-food {
  0% {
    background-image: url(../images/category/western-food-1.png);
  }
  33% {
    background-image: url(../images/category/western-food-2.png);
  }
  66% {
    background-image: url(../images/category/western-food-3.png);
  }
  100% {
    background-image: url(../images/category/western-food-1.png);
  }
}

@keyframes category-franchise {
  0% {
    background-image: url(../images/category/franchise-1.png);
  }
  33% {
    background-image: url(../images/category/franchise-2.png);
  }
  66% {
    background-image: url(../images/category/franchise-3.png);
  }
  100% {
    background-image: url(../images/category/franchise-1.png);
  }
}

@keyframes category-meat {
  0% {
    background-image: url(../images/category/meat-1.png);
  }
  33% {
    background-image: url(../images/category/meat-2.png);
  }
  66% {
    background-image: url(../images/category/meat-3.png);
  }
  100% {
    background-image: url(../images/category/meat-1.png);
  }
}

@keyframes category-midnight-meal {
  0% {
    background-image: url(../images/category/midnight-meal-1.png);
  }
  33% {
    background-image: url(../images/category/midnight-meal-2.png);
  }
  66% {
    background-image: url(../images/category/midnight-meal-3.png);
  }
  100% {
    background-image: url(../images/category/midnight-meal-1.png);
  }
}

@keyframes category-reservation {
  0% {
    background-image: url(../images/category/reservation-1.png);
  }
  33% {
    background-image: url(../images/category/reservation-2.png);
  }
  66% {
    background-image: url(../images/category/reservation-3.png);
  }
  100% {
    background-image: url(../images/category/reservation-1.png);
  }
}

@keyframes category-coupon {
  0% {
    background-image: url(../images/category/coupon-1.png);
  }
  33% {
    background-image: url(../images/category/coupon-2.png);
  }
  66% {
    background-image: url(../images/category/coupon-3.png);
  }
  100% {
    background-image: url(../images/category/coupon-1.png);
  }
}

@keyframes category-drone {
    0% {
        transform: rotateY(0deg);
    }

    25% {
        transform: rotateY(30deg);
    }

    50% {
        transform: rotateY(0deg);
    }

    75% {
        transform: rotateY(-30deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}


@keyframes intro-bird {
  0% {
    transform: rotate(30deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(30deg);
  }
}

@keyframes intro-heart {
  0% {
    transform: rotate(-11.22deg) rotateY(0deg);
  }
  50% {
    transform: rotate(-11.22deg) rotateY(180deg);
  }
  100% {
    transform: rotate(-11.22deg) rotateY(0deg);
  }

}