#module_product_specification .J_module[module-title="detailMultiImages"] .flex-layout-h {
  display: flex;
  overflow: hidden;
  margin: 0.5rem 0;
}

#module_product_specification .J_module[module-title="detailMultiImages"] .flex-layout-h>div {
  height: auto;
}

.detail-video-placeholder {
  position: relative;
  width: 350px;
  height: 350px
}

.detail-video-placeholder__cover {
  width: 100%;
  height: 100%
}

.detail-video-placeholder__video-icon {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

@-webkit-keyframes bcVideoPlayerSpin {
  to {
    transform: rotate(1turn)
  }
}

@keyframes bcVideoPlayerSpin {
  to {
    transform: rotate(1turn)
  }
}

.bc-video-player .center-control {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center
}

.bc-video-player .center-control.error,
.bc-video-player .center-control.loading {
  background: rgba(0, 0, 0, .3)
}

.bc-video-player .center-control .center-wrapper {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 23%;
  max-width: 120px
}

@media screen and (max-width: 900px) {
  .bc-video-player .center-control .center-wrapper {
    max-width: 60px
  }
}

.bc-video-player .center-control .center-wrapper:after {
  content: "";
  display: block;
  padding-bottom: 100%
}

.bc-video-player .center-control .center-button {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0
}

.bc-video-player .center-control .bvp-icon {
  position: absolute
}

.bc-video-player .center-control .center-button .bvp-icon.pause,
.bc-video-player .center-control .center-button .bvp-icon.play {
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  z-index: 1
}

.bc-video-player .center-control .center-button .bvp-icon.circle,
.bc-video-player .center-control .center-button .bvp-icon.loading {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.bc-video-player .center-control .center-button .bvp-icon.loading {
  -webkit-animation: bcVideoPlayerSpin .75s linear 0s infinite;
  animation: bcVideoPlayerSpin .75s linear 0s infinite
}

.bc-video-player .center-control .center-button .bvp-icon.refresh {
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  opacity: .8
}

.bc-video-player .center-control .bvp-icon.loading,
.bc-video-player .center-control.error .play-button,
.bc-video-player .center-control .loading-button,
.bc-video-player .center-control.loading .play-button,
.bc-video-player .center-control.only-error .play-button,
.bc-video-player .center-control .refresh-button {
  display: none
}

.bc-video-player .center-control.error .refresh-button,
.bc-video-player .center-control.loading .bvp-icon.loading,
.bc-video-player .center-control.loading .loading-button {
  display: block
}

.bc-video-player .control-progress {
  box-sizing: border-box;
  width: 100%;
  height: 13px;
  padding: 5px 0;
  cursor: pointer;
  margin-top: 7px;
  white-space: nowrap
}

.bc-video-player .control-progress:after {
  content: " ";
  display: inline-block;
  vertical-align: top;
  width: 13px;
  height: 3px;
  background: hsla(0, 0%, 100%, .4)
}

.bc-video-player .control-progress .progress-inner {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 13px);
  height: 3px;
  background: hsla(0, 0%, 100%, .4)
}

.bc-video-player .control-progress .indicator {
  position: absolute;
  z-index: 2;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background: #fff;
  top: -6px
}

.bc-video-player .control-progress .reached {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  background: #ff5000;
  height: 100%
}

.bc-video-player .control-bar {
  position: absolute;
  z-index: 2;
  width: 100%;
  left: 0;
  bottom: 0;
  box-sizing: border-box;
  color: #fff;
  background: rgba(0, 0, 0, .1);
  height: 40px;
  font-size: 16px;
  line-height: 26px;
  padding: 7px 3px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s ease-in-out
}

.bc-video-player .control-bar.show,
.bc-video-player:hover .control-bar {
  opacity: 1
}

.bc-video-player .control-bar .bar-item {
  display: inline-block;
  vertical-align: top;
  margin: 0
}

.bc-video-player .control-bar .bar-item::-moz-selection {
  background: transparent
}

.bc-video-player .control-bar .bar-item::selection {
  background: transparent
}

.bc-video-player .control-bar button {
  width: 26px;
  height: 26px;
  vertical-align: top
}

.bc-video-player .control-bar button .bvp-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: top
}

.bc-video-player .control-bar button.play-button .bvp-icon {
  width: 20px;
  height: 20px;
  margin-top: 3px
}

.bc-video-player .control-bar .left-panel,
.bc-video-player .control-bar .right-panel {
  width: 26px
}

.bc-video-player .control-bar .center-panel {
  box-sizing: border-box;
  width: calc(100% - 26px - 26px);
  padding: 0 6px
}

.bc-video-player .control-bar .progress-wrapper {
  box-sizing: border-box;
  width: calc(100% - 80px);
  padding-right: 6px
}

.bc-video-player .control-bar .progress-wrapper .current-time,
.bc-video-player .control-bar .progress-wrapper .total-time {
  width: 40px
}

.bc-video-player .control-bar .progress-wrapper .progress-bar {
  width: calc(100% - 40px - 40px - 6px);
  margin: 0 3px
}

.bc-video-player .control-bar .volume .volume-bar {
  width: 50px;
  margin-left: 3px
}

.bc-video-player .forbid-fullscreen .fullscreen-button svg path {
  fill: #000;
  opacity: .1
}

.bc-video-player.mini .control-bar .volume .volume-bar {
  display: none
}

.bc-video-player.mini .control-bar .progress-wrapper {
  width: calc(100% - 26px)
}

.bc-video-player button {
  outline: 0;
  border: none;
  background-color: transparent;
  padding: 0
}

.bc-video-player {
  position: relative
}

.bc-video-player video {
  display: block;
  width: 100%;
  height: 100%;
  background: #000
}