/*!***************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./public/static/css/web/index.css ***!
  \***************************************************************************************************************/

.mobile {
  display: none;
}
.homepage {
  margin-top:-64px;
}
.home-banner {
  position: relative;
}
.home-banner .swiper{
  height:100%;
  aspect-ratio: 2.1 / 1;
  overflow: hidden;
}
.home-banner .swiper-slide{
  opacity: 0 !important;
}
.home-banner .swiper-slide-active{
  opacity: 1 !important;
}
.home-banner img {
  width: 100%;
  aspect-ratio: 2.1 / 1;
}
.home-banner .swiper-slide a {
  display: block;
}
.home-banner .swiper-pagination{
  bottom: 20px !important;
}

.home-banner .banner-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.home-banner video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 2.1 / 1;
}
.home-banner .text-light {
  color: #fff;
}
.home-banner .text-dark{
  color: #000;
}
.home-banner .banner-text {
  position: absolute;
  line-height: 1.3;
}
.home-banner .banner-text .title {
  line-height: 1;
  margin-bottom: .625vw;
  font-weight:700;
  font-size:3.75vw;
  color:var(--theme-color)
}
.home-banner .banner-text .subtitle{
  font-size:1.6666vw;
  font-weight:600;
  max-width: 31.25vw;
}

.home-banner .content-left .banner-text {
  left: 13.0208vw;
  transform: translateY(-50%);
  top: 50%;
  text-align: left;
}
.home-banner .content-center .banner-text {
  bottom: auto;
  top: 7.5vw;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.home-banner .content-right .banner-text {
  right: 13.0208vw;
  transform: translateY(-50%);
  top: 50%;
  text-align: left;
}
.home-banner .banner-text .title,
.home-banner .banner-text .subtitle,
.home-banner .banner-text .learn-more {
  opacity: 0;
  transform: translateY(-60px);
}
.home-banner .swiper-slide-active .banner-text .title,
.home-banner .swiper-slide-active .banner-text .subtitle,
.home-banner .swiper-slide-active .banner-text .learn-more {
  opacity: 1;
  transform: translateY(0);
}
.home-banner .swiper-slide-active .banner-text .title {
  transition: opacity 0.6s linear, transform 0.6s cubic-bezier(.215,.61,.355,1);
}
.home-banner .swiper-slide-active .banner-text .subtitle {
  transition: opacity 0.6s linear .1s, transform 0.6s cubic-bezier(.215,.61,.355,1) .1s;
}
.home-banner .swiper-slide-active .banner-text .learn-more {
  transition: opacity 0.6s linear .2s, transform 0.6s cubic-bezier(.215,.61,.355,1) .2s;
}
.button-prev,
.button-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 9;
  width: 3.6vw;
  height: 3.6vw;
  max-width: 48px;
  max-height:48px;
  line-height: 2;
  text-align: center;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(100, 100, 100, 0.55);
  color: #fff;
  font-size: 24px;
}
.button-prev {
  left: 30px;
}
.button-next {
  right: 30px;
}

.button-prev:hover,
.button-next:hover {
  background: rgba(0, 0, 0, 0.3);
}
.button-prev:hover,
.button-next:hover {
  background: rgba(0, 0, 0, 0.3);
}
.home-floor-2 img{
  width: 100%;

}
.home-flavorfloor {
  width: 100%;
  height: var(--floor-height);
  position: relative;
  overflow: hidden;
  background:url('https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/p4-bg.jpeg') center center no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.home-flavorfloor .button-prev {
  left: -1vw;
}
.home-flavorfloor .button-next {
  right: -1vw;
}
.home-flavorfloor-position{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.home-flavorfloor-flavor{
    width: 60%;
    padding-top:44%;
    background:url('https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/p4-map.svg') center center no-repeat;
    background-size:100% 100%;
    transform: translateY(10%);
    position: relative;
}
.home-flavorfloor-flavor.show{
    background:url('https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/p4-map.svg') center center no-repeat;
    background-size:100%;
    pointer-events:auto;
}
.home-flavorfloor-frame {
    position: relative;
    width: 30%;
    padding-top:46%;
    background:url('https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/p4-fram.svg') center center no-repeat;
    background-size:100% 100%;
    font-size:2vw;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
}
.home-flavorfloor-frame::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 14%;
  height: 40%;
  z-index: 2;
  background: url(https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/p4-fram.svg) left bottom no-repeat;
  background-size: 710%;
  background-position: 0 100%;
}
.home-flavorfloor-frame::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 2px;
  width: 14%;
  height: 20%;
  z-index: 2;
  background: url(https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/p4-fram.svg) top left no-repeat;
  background-size: 710%;
}
.home-flavorfloor-frame > div{
    position: absolute;
    text-align:left;
    color:#EDDB00;
    top:0;
    left:5%;
    right:15%;
    line-height:1.2;
}

.home-flavorfloortext{
  position: absolute;
  display: table;
  margin:0 auto;
  top: 6%;
  left:0;
  right:0;
  color: #fff;
  z-index: 2;
  text-align: center;
}

.home-flavorfloortext-title{
  font-size:3.6vw;
  font-weight: 500;
  margin-bottom:1vw
}
.home-flavorfloortext-stitle{
  font-size:1.7vw;
  font-weight: 500;
  margin-bottom:1vw;
}
.home-flavorfloortext-des{
  font-size:1vw;
  margin-bottom:1vw;
}

.home-flavorfloordesbox{
    opacity: 0;
    top:50%;
    color:#fff;
}

.home-flavorfloorimgbox span{
    color: #fff;
    display: block;
    text-align: center;
    font-size: 2vw;
    margin-top: 5%;
    margin-left:2vw;
}

.home-flavorfloorimgbox > div:not('swiper-container'){
   display: none;
}
.home-flavorfloorimgbox img{
   width: 90%;
   display: block;
   margin:8px auto 0 auto;
}
.home-flavorfloor-frame .imgbox-des{
    font-size: 1vw;
    color: #fff;
    text-align: center;
    margin: 8% 0 0 2vw 
}
.home-flavorfloor-flavor img{
  width: 1.3vw 
}
.home-flavorfloor-flavor.show img{
  width: 1.3vw 
}

.flavor-item{
    display: table;
    text-align:center;
    transform: translate(-50%, -50%);
   
}
.flavor-item span{
    display: block;
    color:#EDDB00;
    margin-top:4px;
    font-size:1vw
}
.flavor-item{
    -webkit-transition: all .1s;
    transform-origin: 0% 0%;

}
.flavor-item.itemhover{
    z-index: 10;
    transform: scale(1.4) translate(-50%, -50%);
}
.flavor1{
    position: absolute;
    left: 17%;
    top: 14%;
}
.flavor2{
    position: absolute;
    left: 10%;
    top: 40%;
}
.flavor3{
    position: absolute;
    left: 15%;
    top: 60%
}

.flavor4{
    position: absolute;
    top: 26%;
    left: 30%;
}
.flavor5{
    position: absolute;
    top: 51%;
    left: 33%;
}
.flavor6{
    position: absolute;
    top: 75%;
    left: 33%;
}
.flavor7{
    position: absolute;
    top: 46%;
    left: 46%;
}
.flavor8{
    position: absolute;
    top: 80%;
    left: 50%;
}
.flavor9{
    position: absolute;
    top: 40%;
    left: 64%;
}
.flavor10{
    position: absolute;
    top: 60%;
    left: 68%;
}
.flavor11{
    position: absolute;
    top: 31%;
    left: 82%;
}
.flavor12{
    position: absolute;
    top: 56%;
    left: 88%;
}

.home-aboutfloor{
  width: 100%;
  background: #EDDB00;
  position: relative;
  padding:12vh 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.home-aboutfloor .floor-row{
  flex-direction: column;
  text-align: center;
}
.home-aboutfloor-title{
  font-size: 3.25vw;
  margin: 2.25vw auto;
}
.home-aboutfloor-des{
    max-width: 900px;
    font-size: 1.25vw;
    margin-bottom:1.875vw;
}
.home-aboutfloor-logo{
  width: 100%;
  max-width: 1480px;
}
.home-aboutfloor-title{
  width: 100%;
  max-width: 1480px;
}
@media (max-width: 1920px) {
  .home-flavorfloorimgbox span{
    font-size: 2.5vw;
  }
  .home-flavorfloor-frame .imgbox-des{
    font-size: 1.25vw;
  }
}

@media (max-width: 820px) {
  .pc {
    display: none;
  }
  .mobile {
    display: block;
  } 
 
  .home-banner .swiper{
    height:100%;
    aspect-ratio: 0.545 / 1;
  }
  .home-banner img {
    aspect-ratio: 0.545 / 1;
  }
  .home-banner video {
    aspect-ratio:0.545 / 1;
  }
  .button-prev,.button-next{
    display: none;
  }
  .home-aboutfloor-bg.enter{
    transform: scale(1.4);
  }
  .home-flavorfloor .floor-row{
    flex-direction: column-reverse;
  }
  .home-flavorfloor-position{
    flex-direction: column-reverse;
  }
  .home-flavorfloortext{
    position: static;
    order:1;
    margin-bottom:48px;
  }
  .home-banner .banner-text .title{
    font-size:9.6618vw;
  }
  .home-banner .banner-text .subtitle{
    font-size: 5.7971vw;
    max-width: 80.1932vw;
  }
  .home-banner .banner-text{
    top:calc(18vw + 60px) !important;
    left:50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    width: 80.1932vw;
  }
  .home-flavorfloor {
    width: 100vw;
    height: auto;
    position: relative;
    padding: 48px 0;
  }
  .home-flavorfloor-frame::before,.home-flavorfloor-frame::after {
    content: none;
  }
  .home-flavorfloor-frame > div{
      top:15%;
      left:5vw;
      right:5vw;
      bottom: 10%;
      display: flex;
  }
  .home-flavorfloor-position {
      flex-flow: column-reverse;
  }
  .home-flavorfloor-frame{
      width: 90vw;
      height: 54.5vw;
      background:url('https://urban-tale.s3.us-west-2.amazonaws.com/products/urbantaleproduct/fram-m.svg') center center no-repeat;
      background-size: 100% 100%;
  }

  .home-flavorfloor-frame .home-flavorfloortextbox{
      left: 5vw;
      right: 20vw 
  }
  .home-flavorfloortext-title{
    font-size:10.6vw;
  }
  .home-flavorfloortext-stitle{
    font-size:5.3vw;
  }
  .home-flavorfloortext-des{
    font-size:3.6vw;
    margin-bottom:16px;
  }
  .home-flavorfloor-flavor{
    width: 120%;
    padding-top: 85%;
    margin-top: 0;
    transform: translateY(10%);
  }
  .home-flavorfloor-flavor img{
    width: 3vw;
  }
  .flavor-item span{
    font-size: 3vw;
    max-width: 80%;
    margin: 0 auto;
    line-height: 1;
  }
  .home-flavorfloor-frame .home-flavorfloorimgbox{
      left: 5vw;
      right: 5vw 
  }
  .home-flavorfloorimgbox img {
      width: 30vw;
      margin:unset
  }
  .home-flavorfloor-frame .imgbox-item{
      display: flex !important;
      flex-flow: row-reverse
  }
  .home-flavorfloor-frame .home-flavorfloorimgbox span{
    position: absolute;
    top: 15%;
    left: 0;
    right: 30vw;
    font-size: 5.5vw;
    margin: 0;
  }
  .button-prev,.button-next{
    width: 48px;
    height:48px;
  }
  .button-next{
    right: 16px;;
  }
  .button-prev{
    left:16px;
  }
  
  .home-flavorfloor-frame .imgbox-des{
      position: absolute;
      left: 0%;
      right: 30vw;
      width: auto;
      margin: 0;
      top: 40%;
      bottom: 0;
      font-size: 4vw;
  }
  .home-flavorfloortextbox span{
      font-size:6vw
  }
 
  .home-aboutfloor-title{
    font-size:48px;
    margin:24px auto
  }
  
  .home-aboutfloor-des{
    font-size:20px;
    margin-bottom:24px;
  }
  
}
@media (max-width: 480px) {
  .home-flavorfloortext-title,.home-flavorfloortext-stitle,.home-flavorfloortext-des{
    margin-bottom:12px
  }
  .home-aboutfloor-title{
    font-size:36px;
  }
  
  .home-aboutfloor-des{
    font-size:16px;
  }
}