/*!********************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./public/static/css/web/video-page.css ***!
  \********************************************************************************************************************/
:root {
    --base: 1920;
}
html {
    font-size: calc(10 / var(--base) * 100vw);
}
.page-container {
    min-height: 100vh;
    background: #16161D;
    overflow-x: hidden;
}
.inner-content {
    height: 100vh;
    padding: 19.2rem 0 12.2rem;
    width: auto;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
    max-width: 96%;
}
.products-list {
    position: absolute;
    top: 2.6rem;
    left: -26.4rem;
    width: calc(100% + 52.8rem);
}
.products-list .swiper-container:before,
.products-list .swiper-container:after {
    content: '';
    position: absolute;
    top: 0;
    width: 26.4rem;
    height: 100%;
    z-index: 9;
}
.products-list .swiper-container:before {
    left: -0.1rem;
    background: linear-gradient(90deg, #16161D 40%, rgba(22, 22, 29, 0.00) 100%) no-repeat;
}
.products-list .swiper-container:after {
    right: -0.1rem;
    background: #16161D;
}
.products-list .swiper-container {
    padding: 0 50.4rem 0 26.4rem;
}
.products-list .swiper-slide {
    width: 24rem;
    aspect-ratio: 318/182;
    background: url(https://d2owbrhgo7vf7g.cloudfront.net/video-page/video_bg_default.svg) no-repeat;
    background-size: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-sizing: content-box;
    cursor: pointer;
}
.products-list .swiper-slide.active {
    background-image: url(https://dbwdcfz4sfe38.cloudfront.net/video-page/video_bg_green.svg);
}
.products-list .swiper-slide .product-name {
    font-size: 1.8rem;
    color: #fff;
    font-weight: 600;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
    width: 62%;
}
.products-list .swiper-slide img {
    height: calc(100% - 0.8rem);
    transition: all 0.5s ease-out;
}
.products-list .swiper-slide:hover img {
    transform: scale(1.05);
}
.products-list .navigation-box {
    position: absolute;
    top: 0;
    right: 26.3rem;
    width: 18rem;
    height: 100%;
    background: linear-gradient(-90deg, #16161D 0%, #16161D 70%, rgba(22, 22, 29, 0.00) 100%);
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}
.products-list .navigation-box span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5.7rem;
    height: 5.7rem;
    border-radius: 50%;
    background: #334155;
    cursor: pointer;
}
.products-list .navigation-box img {
    width: 4rem;
}
.products-list .navigation-box .swiper-button-disabled {
    opacity: 0.5;
    cursor: default;
}
.video-wrapper {
    width: auto;
    height: 100%;
    border-radius: 2rem;
    border: 1px solid rgba(250, 250, 250, 0.20);
    aspect-ratio: 16/9;
    max-width: 100%;
}
.video-wrapper ul {
    height: 100%;
}
.video-wrapper li {
    position: relative;
    height: 100%;
}
.video-wrapper li .video,
.video-wrapper li .poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2rem;
}
.video-wrapper .poster {
    position: absolute;
    top: 0;
    left: 0;
}
.video-wrapper .tvp-overlay-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.5s ease-out;
}
.video-wrapper .tvp-overlay-play:hover {
    transform: translate(-50%, -50%) scale(1.05);
}
.video-wrapper .tvp-overlay-play .tvp-button-play {
    display: block;
    width: 10rem;
    height: 10rem;
    background: url(https://d2owbrhgo7vf7g.cloudfront.net/video-page/play.svg) no-repeat;
    background-size: 100%;
    backdrop-filter: blur(14px);
    border-radius: 50%;
}
.video-wrapper .tvp-button-play.playing {
    transform: scale(2);
    opacity: 0;
    transition: all 0.8s;
}
.download-btn {
    margin: 3rem auto 0;
    width: 34.5rem;
    height: 6.2rem;
    background: linear-gradient(270deg, #42D357 31%, #008748 69%);
    border-radius: 6.2rem;
    padding: 2px;
    transition: all 0.5s ease-out;
}
.download-btn:hover {
    transform: scale(1.05);
}
.download-btn a {
    display: block;
    width: 100%;
    height: 100%;
    background: #16161D;
    border-radius: 6.2rem;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 858px),(orientation: portrait) {
  :root {
    --base: 393;
  }
  .inner-content {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    padding: 0;
    max-width: none;
  }
  .video-wrapper {
    border: none;
    width: 100%;
    height: 22rem;
  }
  .video-wrapper .tvp-overlay-play .tvp-button-play {
    width: 6.4rem;
    height: 6.4rem;
  }
  .products-list {
    padding: 0;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
  }
  .products-list:before {
    content: '';
    position: absolute;
    top: -0.1rem;
    left: 0;
    width: 100%;
    height: 2.4rem;
    background: linear-gradient(180deg, #16161D 0%, #16161D 50%, rgba(22, 22, 29, 0.00) 100%);
    z-index: 9;
  }
  .products-list .swiper-container {
    max-height: calc(100vh - 32.2rem);
    overflow-y: auto;
    padding: 2.4rem 2.4rem 4rem;
  }
  .products-list .swiper-container:before,
  .products-list .navigation-box,
  .products-list .swiper-container:after {
    display: none;
  }
  .video-wrapper li .video, .video-wrapper li .poster {
    border-radius: 0;
  }
  .products-list .swiper-slide {
    width: 16.7rem;
  }
  .swiper-wrapper {
    flex-wrap: wrap;
    gap: 1.1rem;
  }
  .products-list .swiper-slide .product-name {
    font-size: 1.4rem;
    left: 1.2rem;
  }
  .download-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4rem 0;
    z-index: 9;
    background: linear-gradient(0deg, #16161D 75%, #16161D 85%, rgba(22, 22, 29, 0.00) 100%);
  }
  .download-btn {
    margin-top: 0;
  }
}