/*@font-face {*/
/*  font-family:HarmonyOS_Sans_SC_Medium;font-style: normal;font-display: swap;*/
/*  src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2'),*/
/*  url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff') format('woff');*/
/*}*/
/*body{font-family:HarmonyOS_Sans_SC_Medium;}*/
@font-face {
  font-style: normal;
  font-display: swap;
  font-family: Harmony_Regular;
  src: url("../css/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.ttf") format("truetype");
}

body {
  /*font-family: "Harmony_Regular", sans-serif;*/
  font-family: Harmony_Regular;
}

.dh {
  position: fixed;
  height: 2rem;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 4;
}

.caidan {
  width: 0.45rem;
  height: 0.33rem;
  margin-left: 22px;
}

.fanhui {
  width: 0.22rem;
  margin-right: 22px;
}

.caidans {
  position: fixed;
  width: 3.4rem;
  background-color: #fff;
  z-index: 12;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  opacity: 0;
}

.cd-close {
  width: 22px;
  height: 22px;
  position: absolute;
  left: 42px;
  top: 22px;
}

.cd-item {
  width: 2.3rem;
  margin-left: 0.1rem;
}
.cd-item-high {
  margin-left: -0.8rem;
}
.liangshi-usual {
  transform: scale(1.16);
  margin-left: 0.49rem;
}
.vjs-big-play-button {
  display: none !important;
}

/* 淡出消失 */
/*base code  fadeOutUp animated*/
.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animated.hinge {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
}
/*the animation definition*/
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp
}


/* 淡出出现 */
/*the animation definition*/
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}

/* 放大出现 */
/*the animation definition*/
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  50% {
    opacity: 1
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn
}
@-webkit-keyframes zoomSmall {
  100% {
    opacity: 1;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  125% {
    opacity: 1
  }
}
@keyframes zoomSmall {
  100% {
    opacity: 1;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3)
  }
  125% {
    opacity: 1
  }
}
.zoomSmall {
  -webkit-animation-name: zoomBig;
  animation-name: zoomBig
}
@-webkit-keyframes zoomBig {
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3)
  }
  125% {
    opacity: 1
  }
}
@keyframes zoomBig {
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    -ms-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3)
  }
  125% {
    opacity: 1
  }
}
.zoomBig {
  -webkit-animation-name: zoomBig;
  animation-name: zoomBig
}

/* 滑动xiaoshi */
/*the animation definition*/
@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
@keyframes slideOutUp {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  100% {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    -ms-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp
}


/* 滑动chuxian */
/*the animation definition*/
@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}
@keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
}
.slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp
}


/*the animation definition*/
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut
}

/*the animation definition*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}

.ripple-animated:after {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  border-radius: 100px;
  left: 0;
  top: -.5px;
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  -webkit-animation: ripple 2s ease 0s infinite;
  animation: ripple 2s ease 0s infinite;
  transform-origin: center;
  transform-style: flat;
  pointer-events: none;
  opacity: 0
}
.ripple-animated img {
  width: 100%
}
.ripple-animated-high:after {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  border-radius: 100px;
  left: 0;
  top: -.5px;
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2px);
  height: calc(100% - 36px);
  -webkit-animation: ripple 2s ease 1.2s infinite;
  animation: ripple 2s ease 1.2s infinite;
  transform-origin: center;
  transform-style: flat;
  pointer-events: none;
  opacity: 0
}
.ripple-animated-high img {
  width: 100%
}
@-webkit-keyframes ripple {
  0% {
    width: 100%;
    opacity: 1
  }

  to {
    width: 120%;
    height: 140%;
    left: calc(-10% - 2px);
    top: calc(-20% - 2px);
    opacity: 0
  }
}
@keyframes ripple {
  0% {
    width: 100%;
    opacity: 1
  }

  to {
    width: 120%;
    height: 140%;
    left: calc(-10% - 2px);
    top: calc(-20% - 2px);
    opacity: 0
  }
}
.ripple-animated1:after {
  content: "";
  position: absolute;
  border: 1px solid #fff;
  border-radius: 100px;
  left: 0;
  top: -.5px;
  display: block;
  box-sizing: border-box;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  -webkit-animation: ripple 2s ease 1s infinite;
  animation: ripple 2s ease 1s infinite;
  transform-origin: center;
  transform-style: flat;
  pointer-events: none;
  opacity: 0
}
.ripple-animated1 img {
  width: 100%
}
.dot-animated::after {
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  border: 1px solid #fff;
  animation: dot-play 4s linear 400ms infinite;
}
.dot-animated::before {
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  animation: dot-play 4s linear 200ms infinite;
  animation-delay: 2s; /* 延迟 2s */
}
@keyframes dot-play{
  from{
    transform: scale(1);
    border: 1px solid #fff;
    opacity: .2;
  }
  to{
    transform: scale(2.6);
    opacity: 0;
  }
}
.dot-animated img,.dot-animated-small img {
  width: 100%;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3.6px);
  }
}
.bounce-animated {
  animation: bounce 1s infinite;
}

.dot-animated-small::after {
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  border: 1px solid #fff;
  animation: dot-play-small 4s linear 400ms infinite;
}
.dot-animated-small::before {
  width: 100%;
  height: 100%;
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  animation: dot-play-small 4s linear 200ms infinite;
  animation-delay: 2s; /* 延迟 2s */
}
@keyframes dot-play-small{
  from{
    transform: scale(1);
    border: 1px solid #fff;
    opacity: .2;
  }
  to{
    transform: scale(1.8);
    opacity: 0;
  }
}