/*!******************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./assets/css/videoRolls.css ***!
  \******************************************************************************************************************************************************************************************/
.shortsWrap {
  position: relative;
  background: #131313;
}

.shortsRead {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.shortsVideo {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  height: 100vh;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.shortsVideo.ads.swiper-slide.swiper-slide-active:before {
  content: none;
}

.shortsVideo.ads.swiper-slide.swiper-slide-active .shortsVideo__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 0;
  min-height: 100vh;
}

.shortsVideo.ads.swiper-slide.swiper-slide-active .ads_box {
  min-width: 300px;
  min-height: 250px;
  background-color: #f0f0f0;
}

.shortsVideo__box {
  padding: 20px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
  background: #000000;
}

.shortsVideo__box::-webkit-scrollbar {
  width: 4px;
  border-radius: 5px;
}

.shortsVideo__box::-webkit-scrollbar-track {
  background: transparent;
  cursor: pointer;
}

.shortsVideo__box::-webkit-scrollbar-thumb {
  width: 4px;
  background-color: #333333;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  border: transparent;
  cursor: pointer;
}

.shortsVideo__frame {
  width: 800px;
}

.shortsVideo__img {
  position: relative;
  width: 56.25vh;
  height: 100vh;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.shortsVideo__img img,
.shortsVideo__img iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.shortsVideo__title {
  min-width: 280px;
  max-width: 52%;
  margin-top: 0;
  margin-bottom: 24px;
  letter-spacing: -0.2px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
}

.shortsVideo__desc {
  min-width: 280px;
  max-width: 52%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #FFFFFF;
}

.shortsCta {
  width: 74px;
  height: 100vh;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  top: 0;
  left: 726px;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

.shortsCta__wrap {
  padding-bottom: 10px;
}

.shortsCta__txt {
  letter-spacing: -0.1px;
  font: 400 14px/1.2 Source Sans Pro, sans-serif;
  color: #fff;
}

.shortsCta__button {
  margin: 20px auto;
  min-width: 74px;
  pointer-events: all;
}

.shortsCta__button .icon-chevron {
  background-size: 32px auto;
}

.shortsCta__button span {
  margin-left: auto;
  margin-right: auto;
}

.shortsCta__button.swiper-button-disabled {
  opacity: 0.2;
}

.shortsCta__close {
  color: #fff;
}

.shortsCta__close .icon-close {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.shortsCta__close .icon-close::before, .shortsCta__close .icon-close::after {
  top: 20px;
  width: 24px;
  left: 8px;
}

.shortsCta__aplay {
  display: block;
}

.shortsCta__aplay input[type=checkbox] {
  height: 0;
  width: 0;
  visibility: hidden;
  display: none;
}

.shortsCta__aplay .shortsCta__trig {
  margin: 0 auto 8px;
  width: 28px;
  height: 16px;
  background: transparent;
  display: block;
  border-radius: 20px;
  border: 2px solid #fff;
  position: relative;
  cursor: pointer;
}

.shortsCta__aplay .shortsCta__trig:after {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 3px;
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 6px;
  border: 2px solid #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.shortsCta__aplay input:checked + .shortsCta__trig {
  background: #00e97e;
}

.shortsCta__aplay input:checked + .shortsCta__trig:after {
  left: calc(100% - 3px);
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.shortsCta__aplay .shortsCta__trig:active:after {
  width: 10px;
}

.shortsCta__share .icon-share {
  background-size: 32px auto;
  background-position: center center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  -webkit-filter: invert(100%) sepia(0%) saturate(3%) hue-rotate(141deg) brightness(104%) contrast(101%);
  filter: invert(100%) sepia(0%) saturate(3%) hue-rotate(141deg) brightness(104%) contrast(101%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2729%27 fill=%27none%27%3E%3Cg clip-path=%27url%28%23a%29%27%3E%3Cpath stroke=%27%23000%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M3.383 22.476c1.8-1.917 6.526-5.985 13.242-5.985v5.25l8.75-8.75-8.75-8.75v5.25c-5.775 0-13.179 5.518-14 12.637a.437.437 0 0 0 .758.348Z%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27%23000%27 d=%27M0 .741h28v28H0z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.shortsCta__arrow {
  min-width: 40px;
  height: 40px;
  border-radius: 4px;
}

.shortsCta__arrow.--prev {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.shortsCta__arrow.--next {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.ads-active .shortsCta__mute, .ads-active .shortsCta__aplay, .ads-active .shortsCta__share {
  visibility: hidden;
}

.shortsCta__mute .icon-mute {
  display: block;
  margin-bottom: 8px;
  width: 32px;
  height: 32px;
  -webkit-filter: invert(100%) sepia(0%) saturate(3%) hue-rotate(141deg) brightness(104%) contrast(101%);
  filter: invert(100%) sepia(0%) saturate(3%) hue-rotate(141deg) brightness(104%) contrast(101%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 fill=%27none%27%3E%3Cg stroke=%27%23000%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 clip-path=%27url%28%23a%29%27%3E%3Cpath d=%27M7.5 15.75H3a.75.75 0 0 1-.75-.75V9A.75.75 0 0 1 3 8.25h4.5L14.25 3v18L7.5 15.75ZM7.5 8.25v7.5M18 10.017a3 3 0 0 1 0 3.966M20.782 7.5a6.75 6.75 0 0 1 0 9%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27%23000%27 d=%27M0 0h24v24H0z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: 32px auto;
  background-position: center center;
}

.shortsCta__mute.-mute .icon-mute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2729%27 fill=%27none%27%3E%3Cg stroke=%27%23000%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 clip-path=%27url%28%23a%29%27%3E%3Cpath d=%27m5.25 5.023 17.5 19.25M8.75 10.273v8.75M21 12.337a3.5 3.5 0 0 1 0 4.627M16.625 17.536v7.612L8.75 19.023H3.5a.875.875 0 0 1-.875-.875v-7a.875.875 0 0 1 .875-.875h5.25l.746-.58M12.267 7.538l4.358-3.39v8.185M24.245 9.398a7.875 7.875 0 0 1 0 10.5%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27%23000%27 d=%27M0 .648h28v28H0z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}

.shortsShare {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: auto;
  width: 300px;
  background-color: #fff;
  border-radius: 12px;
  padding: 50px 25px;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  visibility: hidden;
  z-index: 9999;
}

.shortsShare.active {
  opacity: 1;
  visibility: visible;
}

.shortsShare__title {
  font-size: 16px;
  font-weight: 600;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.shortsShare .share {
  float: none;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding-top: 25px;
}

.shortsShare .share__link {
  display: block;
}

.shortsShare .share .fa-facebook::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("data:image/svg+xml,%3Csvg width=%2710%27 height=%2719%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M7.857 3.49H9.5V.626A21.22 21.22 0 0 0 7.107.5C4.738.5 3.113 1.99 3.113 4.73v2.52H.5v3.2h2.613v8.05h3.206v-8.05h2.509l.4-3.2H6.319v-2.2c0-.925.25-1.558 1.538-1.558V3.49Z%27 fill=%27%23000%27/%3E%3C/svg%3E");
  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.shortsShare .button {
  margin-left: 4px;
  margin-right: 4px;
}

.shortsShare .icon {
  background-size: 18px;
}

.shortsPlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
  background: transparent;
}

.shortsPlay span {
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 fill=%27none%27%3E%3Cg clip-path=%27url%28%23a%29%27%3E%3Cpath fill=%27white%27 fill-opacity=%27.6%27 d=%27M40.5 9v30a3 3 0 0 1-3 3H30a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h7.5a3 3 0 0 1 3 3ZM18 6h-7.5a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3H18a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3Z%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27white%27 d=%27M0 0h48v48H0z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: 46px;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-animation: fadeplay 0.7s normal forwards ease-in-out;
  animation: fadeplay 0.7s normal forwards ease-in-out;
}

.shortsPlay.-pause span {
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 fill=%27none%27%3E%3Cg clip-path=%27url%28%23a%29%27%3E%3Cpath fill=%27white%27 fill-opacity=%27.6%27 d=%27M24 4.5A19.5 19.5 0 1 0 43.5 24 19.521 19.521 0 0 0 24 4.5Zm7.603 20.734-9.75 6.75A1.5 1.5 0 0 1 19.5 30.75v-13.5a1.5 1.5 0 0 1 2.353-1.234l9.75 6.75a1.5 1.5 0 0 1 0 2.468Z%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27white%27 d=%27M0 0h48v48H0z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: 46px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  -webkit-animation: none;
  animation: none;
}

.shortsPlay.-played span {
  background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 fill=%27none%27%3E%3Cg clip-path=%27url%28%23a%29%27%3E%3Cpath fill=%27white%27 fill-opacity=%27.6%27 d=%27M40.5 9v30a3 3 0 0 1-3 3H30a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h7.5a3 3 0 0 1 3 3ZM18 6h-7.5a3 3 0 0 0-3 3v30a3 3 0 0 0 3 3H18a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3Z%27/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27a%27%3E%3Cpath fill=%27white%27 d=%27M0 0h48v48H0z%27/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  background-size: 46px;
  background-repeat: no-repeat;
  background-position: center;
}

button {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  cursor: pointer;
}

@-webkit-keyframes fadeplay {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}
@keyframes fadeplay {
  0% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}
@-webkit-keyframes fadeplayed {
  0% {
    opacity: 100%;
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }
  70% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
  100% {
    opacity: 0%;
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
}
@keyframes fadeplayed {
  0% {
    opacity: 100%;
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }
  70% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
  100% {
    opacity: 0%;
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
}
@-webkit-keyframes fadepause {
  0% {
    opacity: 100%;
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }
  70% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
  100% {
    opacity: 0%;
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
}
@keyframes fadepause {
  0% {
    opacity: 100%;
    -webkit-transform: scale(0) translate(-50%, -50%);
    transform: scale(0) translate(-50%, -50%);
  }
  70% {
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
  100% {
    opacity: 0%;
    -webkit-transform: scale(1.5) translate(-50%, -50%);
    transform: scale(1.5) translate(-50%, -50%);
  }
}