*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  margin: 0;
  padding: 0;
}

body,
html {
  background: transparent !important;
}

a {
  color: inherit;
  text-decoration: none;
  vertical-align: top;
  outline: 0;
}

a:hover {
  text-decoration: none;
}

a:focus,
button:focus {
  outline: 0;
  outline: -webkit-focus-ring-color auto 0;
  outline-offset: 0;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: top;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

@media (max-width: 1000px) {
  .hidden-m {
    display: none;
  }
}

/* @media (min-width: 1000px) {
  #hidden-d {
    display: none;
  }
} */
  

main {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  main {
    max-width: 100%;
    width: 1070px;
  }
}

.w-swiper {
	width: 300px;
}

@media (min-width: 1000px) {
	.w-swiper {
		width: 500px;
	}
}

.wBox {
  position: relative;
  width: 100%;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  overflow: hidden;
  margin: 0 auto;
}
@media (min-width: 1000px) {
  .wBox {
    height: 200px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    background-size: contain !important;
    margin: auto;
  }
}
.wBox-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}
.wBox-link {
  cursor: pointer;
}
.wBox-content-img {
  position: relative;
  width: 100%;
  padding-top: calc(9 / 16 * 100%);
  background-color: var(--bg-gray-med);
  border-radius: 8px;
  overflow: hidden;
}
.wBox-content-img img {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-filter: var(--img-filter);
  filter: var(--img-filter);
}
@media (max-width: 1000px) {
  .wBox-content-img img {
    object-fit: cover !important;
  }
}
.wBox-content-duration {
  font-family: Inter;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: -0.02em;
  color: #fff;
  background-color: #000000cc;
  border-radius: 8px 0 8px 0;
  padding: 2px 8px 2px 4px;
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.wBox-content-duration::before {
  content: "";
  margin-bottom: 0;
  -webkit-filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg)
    brightness(126%) contrast(82%);
  filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg)
    brightness(126%) contrast(82%);
  width: 13px;
  height: 13px;
  margin-right: 2px;
  background-size: auto 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 .5A6.5 6.5 0 1 0 13.5 7 6.512 6.512 0 0 0 7 .5Zm2.275 6.919-3 2A.544.544 0 0 1 6 9.5a.531.531 0 0 1-.237-.056A.5.5 0 0 1 5.5 9V5a.5.5 0 0 1 .263-.444.519.519 0 0 1 .512.025l3 2a.5.5 0 0 1 0 .838Z' fill='%23000'/%3E%3C/svg%3E");
}
.wBox-content-title {
  font-weight: 500;
  font-size: 12px;
  line-height: 14.4px;
  letter-spacing: -0.003em;
  max-height: 42px;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  color: #ffffff;
  margin: 8px 0 0;
  font-family: "Roboto", sans-serif;
}
.wBox-content {
  padding-top: 50px;
}
@media (min-width: 1000px) {
  .wBox-content {
    padding-top: 15px;
  }
  .wBox-content-title {
    max-height: 51px;
	text-align: left;
  }
}
.wBox-content-source {
  font-size: 12px;
  font-weight: 700;
  line-height: 14.06px;
  color: #e75524;
  font-family: "Roboto", sans-serif;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  transition-timing-function: var(
    --swiper-wrapper-transition-timing-function,
    initial
  );
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  -webkit-transform: translate3d(0px, 0, 0);
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.swiper-vertical {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

.swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  display: block;
}

@media (min-width: 1000px) {
  .swiper-slide img {
    object-fit: contain;
    height: 100%;
  }
}

@media (max-width: 1000px) {
  .swiper-slide img {
    object-fit: contain;
    height: 100%;
  }
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-button-next,
.swiper-button-prev {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  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;
  position: absolute;
  top: 7px;
  background: #ffffff4d;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 1000px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 28px;
    height: 28px;
    top: 50%;
  }
}
.swiper-button-next::after,
.swiper-button-prev::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  position: relative;
  background-position: center center;
  background-size: auto 35px;
  background-repeat: no-repeat;
}
@media (min-width: 1000px) {
  .swiper-button-next::after,
  .swiper-button-prev::after {
    width: 40px;
    height: 40px;
    background-size: auto 40px;
  }
}
/* .swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
} */

.swiper-button-next {
  right: 0;
}
@media (min-width: 1000px) {
  .swiper-button-next {
    right: 0;
  }
}

.swiper-button-next::after {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.3172 10.442L11.6922 16.067C11.5749 16.1843 11.4159 16.2502 11.25 16.2502C11.0841 16.2502 10.9251 16.1843 10.8078 16.067C10.6905 15.9498 10.6247 15.7907 10.6247 15.6249C10.6247 15.459 10.6905 15.2999 10.8078 15.1827L15.3664 10.6249H3.125C2.95924 10.6249 2.80027 10.559 2.68306 10.4418C2.56585 10.3246 2.5 10.1656 2.5 9.99986C2.5 9.8341 2.56585 9.67513 2.68306 9.55792C2.80027 9.44071 2.95924 9.37486 3.125 9.37486H15.3664L10.8078 4.81705C10.6905 4.69977 10.6247 4.54071 10.6247 4.37486C10.6247 4.20901 10.6905 4.04995 10.8078 3.93267C10.9251 3.8154 11.0841 3.74951 11.25 3.74951C11.4159 3.74951 11.5749 3.8154 11.6922 3.93267L17.3172 9.55767C17.3753 9.61572 17.4214 9.68465 17.4529 9.76052C17.4843 9.8364 17.5005 9.91772 17.5005 9.99986C17.5005 10.082 17.4843 10.1633 17.4529 10.2392C17.4214 10.3151 17.3753 10.384 17.3172 10.442Z" fill="white"/></svg>');
}

/* .swiper-button-prev {
  right: 20px;
} */
@media (max-width: 1000px) {
  .swiper-button-prev {
    left: -10px;
  }
}
@media (min-width: 1000px) {
  .swiper-button-prev {
    right: unset;
    left: 0;
  }
}
.swiper-button-prev::after {
  background-image: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2.6833 9.55795L8.3083 3.93295C8.42558 3.81568 8.58464 3.74979 8.75049 3.74979C8.91634 3.74979 9.0754 3.81568 9.19268 3.93295C9.30995 4.05023 9.37584 4.20929 9.37584 4.37514C9.37584 4.54099 9.30995 4.70005 9.19268 4.81733L4.63408 9.37514L16.8755 9.37514C17.0412 9.37514 17.2002 9.44099 17.3174 9.5582C17.4346 9.67541 17.5005 9.83438 17.5005 10.0001C17.5005 10.1659 17.4346 10.3249 17.3174 10.4421C17.2002 10.5593 17.0412 10.6251 16.8755 10.6251L4.63408 10.6251L9.19268 15.183C9.30995 15.3002 9.37584 15.4593 9.37584 15.6251C9.37584 15.791 9.30995 15.9501 9.19268 16.0673C9.0754 16.1846 8.91634 16.2505 8.75049 16.2505C8.58464 16.2505 8.42558 16.1846 8.3083 16.0673L2.6833 10.4423C2.62519 10.3843 2.57909 10.3154 2.54764 10.2395C2.51619 10.1636 2.5 10.0823 2.5 10.0001C2.5 9.91801 2.51619 9.83668 2.54764 9.7608C2.57909 9.68493 2.62519 9.616 2.6833 9.55795Z" fill="white"/></svg>');
}

/* Slide styles end */
@media (min-width: 1000px) {
  main {
    width: 1075px;
  }
}

.wBox {
  height: 220px;
  padding: 4px 0 0 10px;
  background-repeat: no-repeat;
  background-size: auto 100%;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 12px;
  padding-right: 10px;
}
@media (max-width: 359px) {
  .wBox {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}
@media (min-width: 1000px) {
  .wBox {
    height: 225px;
    padding: 0 27px 0 17px;
    background-image: url("../images/bg-d.jpg") !important;
  }
}
@media (max-width: 359px) {
  .wBox-wrap {
    width: calc(100% - 155px);
  }
}
@media (max-width: 1000px) {
  .wBox-wrap {
    width: 200px;
  }
}
@media (min-width: 1000px) {
  .wBox-wrap {
    max-width: 662px;
  }
}

.wBox-link {
  position: absolute;
  width: 150px;
  height: 100%;
  top: 0;
  left: 0;
}
@media (min-width: 1000px) {
  .wBox-link {
    width: 355px;
  }
}
@media (max-width: 1000px) {
  .--sponsor .wBox-link {
    width: 150px;
    height: 100%;
  }
}
@media (min-width: 1000px) {
  .--sponsor .wBox-link {
    width: 200px;
    height: 100%;
  }
}
.wBox-sponsor {
  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-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 132.54px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  gap: 8px;
}
@media (max-width: 1000px) {
  .wBox-sponsor {
    width: 150px;
  }
}
@media (min-width: 1000px) {
  .wBox-sponsor {
    /* width: 318px; */
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
}
.wBox-sponsor-logo {
  width: 116px;
  height: 69px;
}
@media (min-width: 1000px) {
  .wBox-sponsor-logo {
    width: 245px;
    height: 145px;
  }
}
.wBox-sponsor-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3px;
}
.wBox-sponsor-item {
  width: auto;
  height: 61px;
  max-width: 90px;
}
.wBox-sponsor-item img.desktop {
  display: none;
}
.wBox-sponsor-item img.mobile {
  display: block;
  width: 53px;
  height: 61px;
}
@media (min-width: 1000px) {
  .wBox-sponsor-item {
    max-width: 150px;
    height: 50px;
  }
  .wBox-sponsor-item img.desktop {
    display: block;
    width: 133px;
  }
  .wBox-sponsor-item img.mobile {
    display: none;
  }
}
.wBox-article {
  width: 225px;
}
.wBox-sponsor-item a {
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.wBox-content-link {
  max-width: 150px;
  padding-right: 0;
}
.wBox-content-link:last-of-type {
  padding-right: 8px;
}
@media (min-width: 1000px) {
  .wBox-content-link:last-of-type {
    padding-right: 0;
  }
}
@media (min-width: 1000px) {
  .wBox-content-link {
    max-width: 210px;
  }
}
.wBox-content-img {
  border-radius: 10px;
}
.wBox-content-duration {
  border-radius: 8px;
  padding: 1px 9px 1px 6px;
  right: 5.88px;
  bottom: 4.68px;
}
.wBox-content-duration::before {
  width: 14px;
  height: 14px;
}
.wBox-content-title {
  font-family: Inter;
  font-weight: 600;
  font-size: 12px;
  line-height: 15.6px;
  max-height: 50px;
}
@media (min-width: 1000px) {
  .wBox-content-title {
    font-size: 13px;
    line-height: 18.2px;
    max-height: 60px;
  }
  .wBox-content-btn {
    display: flex;
    justify-content: center;
  }
  .wBox-content-btn img {
    width: 123px;
    height: 31px;
  }
}
@media (min-width: 1000px) {
  .wBox.--sponsor .wBox-sponsor {
    padding-top: 23px;
    gap: 13px;
    width: 200px;
  }
  .wBox.--sponsor .wBox-sponsor-logo {
    width: 164px;
    height: 97px;
  }
  .wBox.--sponsor .wBox-sponsor-list {
    gap: 20px;
  }
}

.swiper {
  max-width: 100%;
  margin-left: unset;
  margin-right: unset;
}



.swiper-button-next,
  .swiper-button-prev {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 4px 4px 0px #00000040;
    box-shadow: 0px 4px 4px 0px #00000040;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border-radius: 50%;
  }
.swiper-button-next {
  right: -12px;
}
.swiper-button-next::after {
  background-image: url('../images/arrow-right.png');
}
.swiper-button-prev::after {
  background-image: url('../images/arrow-left.png');
}
@media (min-width: 1000px) {
  .swiper-button-prev {
    right: unset;
    left: -12px;
  }
}
