html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
canvas {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

i {
  display: inline-block;
  width: 30px;
}

html,
body {
  font-family: "Open Sans", Arial, 文泉驛正黑, "WenQuanYi Zen Hei", "儷黑 Pro",
    "LiHei Pro", 微軟正黑體, "Microsoft JhengHei", 新細明體, DFKai-SB,
    sans-serif;
  height: 100%;
}
.cameraListBtn .iconMenu .st0 {
  fill: #888;
}

.cameraListBtn:hover .iconMenu .st0 {
  fill: #00b1d2;
}

.cameraListBtn .iconBack .st0 {
  fill: #888;
}

.cameraListBtn:hover .iconBack .st0 {
  fill: #00b1d2;
}

.iconSet .st0 {
  fill: #888;
}

.iconSet .st1 {
  fill: #00b1d2;
}

.iconFilm .st0 {
  fill: #888;
}

.iconFilm .st1 {
  fill: #00b1d2;
}

.iconMicrophone .st0 {
  fill: #888;
}

.iconMicrophone .st1 {
  fill: #00b1d2;
}


.iconShare .st0 {
  fill: #888;
}

.iconShare .st1 {
  fill: #00b1d2;
}

.iconShare .st2 {
  fill: #888;
}

.iconCamera .st0 {
  fill: #888;
}

.iconCamera .st1 {
  fill: #00b1d2;
}

.iconSearch .st0 {
  fill: #888;
}

.iconSearch .st1 {
  fill: #00b1d2;
}

.iconSearch .st2 {
  fill: #00b1d2;
}

.iconSense .st0 {
  fill: #888;
}

.iconSense .st1 {
  fill: #00b1d2;
}

.iconSense .st2 {
  fill: #00b1d2;
}

.iconBabyGallery .st0 {
  fill: #888;
}

.iconBabyGallery .st1 {
  fill: #00b1d2;
}

.iconPetGallery .st0 {
   fill:#888;
}

.iconPetGallery .st1 {
  fill: #00b1d2;
}

.iconEva .st0 {
  fill: #888;
}

.iconEva .st1 {
  fill: #00b1d2;
}

.iconEvent .st0 {
  fill: #888;
}

.iconEvent .st1 {
  fill: #00b1d2;
}


.iconFullscreen .st0 {
  fill: #888;
}

.iconFullscreen .st1 {
  fill: #00b1d2;
}

.iconSlickscreen svg {
  fill: #ccc;
}
.iconSlickscreen:hover svg {
  fill: #00b1d2;
}
.iconDivide1 .st0 {
  fill: #ccc;
}

.iconDivide4 .st0 {
  fill: #ccc;
}

.iconDivide6 .st0 {
  fill: #ccc;
}
.iconDivide9 .st0 {
  fill: #ccc;
}
.iconDivide12 .st0 {
  fill: #ccc;
}
.iconDivide16 .st0 {
  fill: #ccc;
}

.iconCloseList .st0 {
  fill: #ccc;
}

.iconCloseList .st1 {
  fill: #ccc;
}

.iconCloseList:hover .st0 {
  fill: #00b1d2;
}

.iconCloseList:hover .st1 {
  fill: #00b1d2;
}

.iconMenuInner1 .st0 {
  fill: #ccc;
}

.iconMenuInner2 .st0 {
  fill: #ccc;
}

.iconMenuInner2 .st1 {
  fill: #ccc;
}

.iconWatch .st0 {
  fill: #ccc;
}

.iconArrowT .st0 {
  opacity: 0.62;
  enable-background: new;
}

.iconArrowT .st1 {
  fill: #888;
}

.iconArrowB .st0 {
  opacity: 0.62;
  enable-background: new;
}

.iconArrowB .st1 {
  fill: #888;
}

.iconCloseEventList .st0 {
  clip-path: url(#closeEvent_SVGID_2_);
}

.iconCloseEventList .st1 {
  fill: #888;
}

.iconCloseEventList .st2 {
  fill: #00b1d2;
}

.iconAudio .st0 {
  fill: #f8a452;
}

.iconMotion .st0 {
  fill: #f19695;
}

.iconHumidity .st0 {
  fill: #00b1d2;
}

.iconHumidity .st1 {
  fill: #fff;
}

.iconIllumination .st0 {
  fill: #fcd020;
}

.iconTemperature .st0 {
  fill: #a3cd88;
}

.iconArrowR .st0 {
  opacity: 0.62;
  enable-background: new;
}

.iconArrowR .st1 {
  fill: #888;
}

.iconArrowL .st0 {
  opacity: 0.62;
  enable-background: new;
}

.iconArrowL .st1 {
  fill: #888;
}

.iconTriangle .st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #888;
}

.iconArrow .st0 {
  fill: #888;
}

.iconArrow .st1 {
  fill: #00b1d2;
}

.iconHome2 .st0 {
  fill: #888;
}

.iconHome2 .st1 {
  clip-path: url(#home2_SVGID_2_);
}

.iconHome2 .st2 {
  clip-path: url(#home2_SVGID_4_);
}

.iconHome2 .st3 {
  fill: #00b1d2;
}

.iconPause2 .st0 {
  fill: #888;
}

.iconPreset .st0 {
  fill: #00b1d2;
}

.iconPreset .st1 {
  fill: #888;
}

.iconPresetPos .st0 {
  fill: #00b1d2;
}

.iconSpeed .st0 {
  fill: #c0c0c0;
}

.iconSpeed .st1 {
  clip-path: url(#speed_SVGID_2_);
}

.iconPresetAdd .st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #888;
}
.iconPresetAdd:hover .st0 {
  fill: #fff;
}
.iconPresetCheck .st0 {
  fill: #888;
}
.iconPresetCheck:hover .st0 {
  fill: #fff;
}

.iconPetTracking .st0 {
  fill: #00b1d2;
}

.iconPetTracking .st1 {
  fill: #888;
}

.iconCheck .st0 {
  fill-rule: evenodd;
  clip-rule: evenodd;
  fill: #888;
}

.iconCheck:hover .st0 {
  fill: #fff;
}

.iconAlert .st0,
.iconAlertH .st0 {
  fill: #e84343;
  stroke: #e84343;
  stroke-width: 0.25;
  stroke-miterlimit: 10;
}
.icon.photo .st0,
.icon.photo .st1 {
  stroke: #eee;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}
.screenBox .icon.one_divide svg {
  stroke: #eee;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}
.screenBox .icon.full_screen svg {
  stroke: #ccc;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}
.screenBox .icon.close_full_screen svg {
  stroke: #ccc;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.iconVolumn .st0 {
  fill: #888;
}

.iconVolumn .st1 {
  fill: #00b1d2;
}

.iconBack .st0 {
  fill: #888;
}

.iconBack .st1 {
  clip-path: url(#back_SVGID_2_);
}

.iconBack .st2 {
  fill: #00b1d2;
}

.iconPause .st0 {
  fill: #888;
}

.iconZoomin .st0 {
  fill: #888;
}

.iconZoomin .st1 {
  fill: #00b1d2;
}

.iconZoomout .st0 {
  fill: #888;
}

.iconZoomout .st1 {
  fill: #00b1d2;
}

.iconZoomin:not(.icon-disabled):hover .st0,
.iconZoomin:not(.icon-disabled):hover .st1,
.iconZoomout:not(.icon-disabled):hover .st0,
.iconZoomout:not(.icon-disabled):hover .st1 {
  fill: #00b1d2!important;
}

.iconCalendar .st0 {
  fill: #00b1d2;
}

.iconCalendar .st1 {
  fill: none;
  stroke: #888;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.iconCalendar .st2 {
  fill: #888;
}

.iconCalendar .st3 {
  clip-path: url(#calendar_XMLID_4_);
}

.iconUnknownperson .st0 {
  fill: #b25492;
}
.iconScreaming .st0 {
  fill: #59016a;
}
.iconAbnormalSound .st0 {
  fill: #77b50b;
}
.iconPetSound .st0 {
  stroke: #0072b5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  fill:none;
}
.iconPetSound .st1 {
  fill: #0072b5;
}

.iconRing .st0 {
  fill: #b5ac48;
}

.iconPet .st0 {
  fill: #50493a;
}

.iconPassout .st0 {
  fill: #e99dc2;
}

.iconMotion .st0 {
  fill: #e79192;
}

.iconMissingobject .st0 {
  fill: #726cb0;
}

.iconKnownperson .st0 {
  fill: #59beb7;
}

.iconKnownperson .st0 {
  fill: #59beb7;
}

.iconIllumination .st0 {
  fill: #f4ca2b;
}

.iconHumidity .st0 {
  fill: #7cc4e0;
}

.iconHuman .st0 {
  fill: #94c865;
}

.iconFence .st0 {
  fill: #785f4b;
}

.iconCover .st0 {
  fill: #4f4f4f;
}
.iconCover .st1 {
  fill: none;
  stroke: #4f4f4f;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}
.iconCover .st2 {
  fill: #757575;
}

.iconOndemand .st0 {
  fill: #90cca3;
}

.iconVehicle .st0 {
  fill: #3f3f3f;
}

.iconInfantcry .st0 {
  fill: #785f4b;
}

.iconInfantcry .st1 {
  fill: #f6b45d;
}

.iconInfantcry .st2 {
  fill: #ffffff;
}

.iconTemperature .st0 {
  fill: #9fc686;
}

.iconAudio .st0 {
  fill: #ef9f53;
}

.iconMinus .st0 {
  fill: #888;
}
.iconMinus:hover .st0 {
  fill: #fff;
}
.iconPresetAdd.disabled .st0,
.iconPresetCheck.disabled .st0,
.iconMinus.disabled .st0 {
  fill: #fff !important;
}
.iconHuman .st0 {
  fill: #888;
}
.iconHuman .st1 {
  fill: #00b1d2;
}
.iconEdit .st0 {
  fill: #afafaf;
}
.iconEdit .st1 {
  fill: #17a7c5;
}
.iconHumantracking .st0 {
  fill: #de723b;
}
.iconBaby .st0 {
  fill: #ef94ae;
}
.iconBaby .st1 {
  fill: #fff;
}
.iconBabyFaceNotDetected .st0 {
  fill: #00b1d2;
}

.audio {
  background-color: #ee9f53;
}
.motion {
  background-color: #e79191;
}
.humidity {
  background-color: #7cc4df;
}
.illumination {
  background-color: #f3ca2a;
}
.temperature {
  background-color: #9ec585;
}
.cover {
  background-color: #747474;
}
.ring_event {
  background-color: #b4ac47;
}
.ondemand {
  background-color: #8fcba3;
}
.missingobject {
  background-color: #716cb0;
}
.fence {
  background-color: #785e4b;
}
.human {
  background-clor: #94c864;
}
.vehicle {
  background-color: #3e3e3e;
}
.passout {
  background-color: #e89cc2;
}
.pet {
  background-color: #4f4939;
}
.infantcry {
  background-color: #f6b45c;
}
.knownperson {
  background-color: #58beb7;
}
.unknownperson {
  background-color: #b15391;
}

a {
  text-decoration: none;
}

.text {
  font-size: 16px;
  color: #888;
}

.textM {
  font-size: 14px;
}

.textS {
  font-size: 12px;
}

.textL {
  font-size: 18px;
}

.textBlue {
  color: #00b1d2;
}

.textCalendar {
  color: #666;
}

.player {
  margin: 0 auto;
  font-size: 0;
  height: 100%;
}

.player .mainContent {
  width: 100%;
  height: 100%;
  /* max-width: 1920px; */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.player .mainContent .sideContent_left {
  width: 19%;
  position: absolute;
  left: -19%;
  background-color: #fff;
  transition: left 0.5s;
  top: 0;
  height: 100%;
  border-right: 1px solid #e4e5e6;
  border-bottom: 1px solid #e4e5e6;
  box-sizing: border-box;
  z-index: 3;
  overflow: hidden;
}

.player .mainContent .sideContent_left.active {
  left: 0;
}

.player .mainContent .sideContent_left .topTitle {
  border: 1px solid #e4e5e6;
  border-right: none;
  text-align: center;
  line-height: 48px;
  box-sizing: border-box;
  position: relative;
  background-color: #f9f9f9;
}

.player .mainContent .sideContent_left .topTitle .closeListBtn {
  position: absolute;
  top: 12px;
  right: 8px;
}

.player .mainContent .sideContent_left .topTitle .closeListBtn i {
  width: 20px;
}

.player .mainContent .sideContent_left .listStyle {
  margin: 0;
  border-bottom: 1px solid #e4e5e6;
}
.player .mainContent .sideContent_left .listStyle::after {
  display: block;
  content: "";
  clear: both;
  height: 0;
  width: 100%;
}

.player .mainContent .sideContent_left .listStyle .listStyleSetBtn {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.player
  .mainContent
  .sideContent_left
  .listStyle
  .listStyleSetBtn.active
  i
  .st0,
.player
  .mainContent
  .sideContent_left
  .listStyle
  .listStyleSetBtn:hover
  i
  .st0 {
  fill: #888;
}

.player
  .mainContent
  .sideContent_left
  .listStyle
  .listStyleSetBtn
  .iconMenuInner1 {
  width: 16px;
  margin-top: 7px;
}

.player
  .mainContent
  .sideContent_left
  .listStyle
  .listStyleSetBtn
  .iconMenuInner2 {
  width: 22px;
  margin-top: 7px;
}
.player .mainContent .sideContent_left .listStyle .list-change {
  float: left;
  padding: 7px 10px 10px;
}
.player .mainContent .sideContent_left .listStyle .group-block {
  float: right;
  font-size: 14px;
  color: #888;
}
.player .mainContent .sideContent_left .listStyle .group-block label {
  display: inline-block;
  padding: 13px 5px 10px;
  vertical-align: top;
}
.player .mainContent .sideContent_left .listStyle .group-block select {
  border: none;
  padding: 10px 5px;
  outline: none;
  color: #888;
  font-family: inherit;
  border-left: 1px solid #e4e5e6;
}
.player .mainContent .sideContent_left .listStyle .group-block select option {
  color: #000;
  padding: 10px 0;
}
.player .mainContent .sideContent_left .listStyle .group-block .group-select {
  position: relative;
  display: inline-block;
  vertical-align: top;
  z-index: 99;
  width: 120px;
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .group-selected {
  padding: 13px 25px 10px 5px;
  color: #888;
  font-family: inherit;
  border-left: 1px solid #e4e5e6;
  display: block;
  position: relative;
  min-width: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .group-selected
  i {
  position: absolute;
  width: 10px;
  height: 5px;
  right: 5px;
  top: 17px;
  transform: rotate(180deg);
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .group-selected
  i.up {
  transform: rotate(0);
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .group-selected
  i svg {
    display: inline-block;
    vertical-align: top;
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .group-selected
  i.iconArrow
  .st1 {
  fill: #888;
  opacity: 0.65;
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .sub {
  color: #888;
  font-family: inherit;
  border: 1px solid #e4e5e6;
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: calc(100% - 1px);
  background-color: #fff;
  z-index: 5;
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .sub
  a {
  display: block;
  padding: 10px;
  cursor: pointer;
}
.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .sub
  a:hover {
  background-color: rgba(0, 177, 210, 0.1);
}

.player
  .mainContent
  .sideContent_left
  .listStyle
  .group-block
  .group-select
  .group-select-mask {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.player .mainContent .sideContent_left .listInnerScroll {
  overflow-y: auto;
  height: calc(100% - 92px);
}

.player .mainContent .sideContent_left .listInner {
  padding: 0 10px;
}

.player .mainContent .sideContent_left .listInner .camera {
  cursor: pointer;
  padding: 5px 15px 5px 25px;
  font-size: 0;
  position: relative;
}

.player .mainContent .sideContent_left .listInner .camera::before {
  position: absolute;
  width: 36px;
  height: 100%;
  content: "";
  left: -10px;
  top: 0;
  background: url(../../images/new_player/icon_line.svg) no-repeat center center;
  background-size: 100% auto;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .camera:hover
  .cameraInfo
  .name {
  color: #01b2d2;
}

.player .mainContent .sideContent_left .listInner .camera:last-child {
  border-bottom: none;
}

.player .mainContent .sideContent_left .listInner .camera .cameraImg {
  display: inline-block;
  vertical-align: middle;
  width: 99px;
  height: 54px;
  background-size: 100%;
  background-position: center center;
}

.player .mainContent .sideContent_left .listInner .camera .cameraImg.off{
  position: relative;
}
.player .mainContent .sideContent_left .listInner .camera .cameraImg.off::before{
  position: absolute;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  background-color: rgba(0,0,0,0.5);
  content: "";
  z-index: 2;
}
.player .mainContent .sideContent_left .listInner .camera .cameraImg.off::after{
  position: absolute;
  width: 25px;
  height: 22px;
  left:50%;
  top:50%;
  margin-left: -12px;
  margin-top: -11px;
  content: "";
  background: url(../../images/new_player/icon_turn_off.svg) no-repeat center center;
  background-size: contain;
  z-index: 3;
}
.player .mainContent .sideContent_left .listInner .camera .cameraInfo {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 100px);
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
  position: relative;
}

.player .mainContent .sideContent_left .listInner .camera .cameraInfo .light {
  position: absolute;
  left: 11px;
  top: 12px;
  width: 6px;
  height: 6px;
  background-color: #ccc;
  border-radius: 100%;
  border: 2px solid #ccc;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .camera
  .cameraInfo
  .light.on {
  background-color: #aad371;
  border-color: #aad371;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .camera
  .cameraInfo
  .light.p2p {
  background-color: #aad371;
  border-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.player .mainContent .sideContent_left .listInner .camera .cameraInfo .name {
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 16px;
  padding-left: 20px;
}

.player .mainContent .sideContent_left .listInner .camera .cameraInfo .type {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 16px;
}

.player .mainContent .sideContent_left .listInner .camera .watchBtn {
  cursor: auto;
  position: absolute;
  top: 26px;
  right: 2px;
  display: none;
}

.player .mainContent .sideContent_left .listInner .camera .watchBtn.active {
  display: block;
}

.player .mainContent .sideContent_left .listInner .camera .watchBtn i {
  width: 16px;
}

.player .mainContent .sideContent_left .listInner .camera .subscribed {
  position: absolute;
  top: 7px;
  left: 27px;
  float: left;
  background-size: 8px auto;
  background-image: url(/images/myspotcam/icon_subscribed.png);
  background-repeat: no-repeat;
  width: 8px;
  height: 12px;
}
/*.player .mainContent .sideContent_left .listInner.style1 .camera .subscribed{
    left: 3px;
}*/

.player .mainContent .sideContent_left .listInner .camera .subscribed_nowonair {
  position: absolute;
  top: 7px;
  left: 27px;
  background-size: 8px auto;
  background-image: url(/images/new_player/icon_subscribed_nowonair.png);
  background-repeat: no-repeat;
  width: 8px;
  height: 12px;
  background-size: contain;
  z-index: 2;
}
/*.player .mainContent .sideContent_left .listInner.style1 .camera .subscribed_nowonair{
    left: 3px;
}*/

.dragging.camera {
  cursor: pointer;
  padding: 15px 0;
  font-size: 0;
  position: relative;
}

.dragging.camera .cameraImg {
  display: inline-block;
  vertical-align: middle;
  width: 99px;
  height: 54px;
  background-color: #000;
  background-size: 100%;
  background-position: center center;
}

.dragging.camera .cameraInfo {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 99px);
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
}

.dragging.camera .cameraInfo .name {
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 16px;
}

.dragging.camera .cameraInfo .type {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 16px;
}

.dragging.camera .watchBtn {
  cursor: auto;
  position: absolute;
  top: 38px;
  right: 2px;
  display: none;
}

.dragging.camera .watchBtn i {
  width: 16px;
}

.player .mainContent .sideContent_left .listInner.style1 .camera {
  padding: 0;
}

.player .mainContent .sideContent_left .listInner.style1 .camera .cameraImg {
  display: none;
}

.player .mainContent .sideContent_left .listInner.style1 .camera .cameraInfo {
  padding-left: 0;
  width: calc(100% - 25px);
}
.player
  .mainContent
  .sideContent_left
  .listInner.style1
  .camera
  .cameraInfo
  .light {
  left: 32px;
}
.player
  .mainContent
  .sideContent_left
  .listInner.style1
  .camera
  .cameraInfo
  .light.on {
  background-color: #aad371;
  border-color: #aad371;
}
.player
  .mainContent
  .sideContent_left
  .listInner.style1
  .camera
  .cameraInfo
  .light.p2p {
  background-color: #aad371;
  border-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.player
  .mainContent
  .sideContent_left
  .listInner.style1
  .camera
  .cameraInfo
  .name {
  padding-left: 48px;
}
.player .mainContent .sideContent_left .listInner.style1 .camera .watchBtn {
  top: 11px;
}
.player .mainContent .sideContent_left .listInner .group-name {
  font-size: 16px;
  color: #888;
  padding: 10px 0;
  font-weight: bold;
}
.player .mainContent .sideContent_left .listInner .group-name i {
  width: 15px;
  margin-right: 10px;
  margin-top: -1px;
}
.player .mainContent .sideContent_left .listInner .group-name i svg {
  width: 15px;
}
.player .mainContent .sideContent_left .listInner .sub-group {
  font-size: 14px;
  color: #888;
  font-weight: bold;
}
.player .mainContent .sideContent_left .listInner .sub-group .group-collapse {
  padding: 10px 0 10px 32px;
  box-sizing: border-box;
  display: block;
  position: relative;
  color: #888;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .sub-group
  .group-collapse::before {
  position: absolute;
  width: 36px;
  height: 36px;
  content: "";
  left: -10px;
  top: -2px;
  background: url(../../images/new_player/icon_line_open.svg) no-repeat center
    center;
  background-size: contain;
}
.player .mainContent .sideContent_left .listInner .camera:last-child::before {
  background-image: url(../../images/new_player/icon_line_last.svg);
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .sub-group
  .sub:last-child
  .group-collapse::before {
  background-image: url(../../images/new_player/icon_line_open_last.svg);
}
.player .mainContent .sideContent_left .listInner .sub-group .sub .collapse {
  padding-left: 30px;
  background: url(../../images/new_player/icon_line_parent.svg) repeat-y -10px top;
  background-size: 36px auto;
  display: none;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .sub-group
  .sub:last-child
  .collapse {
  background-image: none;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .sub-group
  .sub.active
  .collapse {
  display: block;
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .sub-group
  .sub.active
  .group-collapse::before {
  background-image: url(../../images/new_player/icon_line_close.svg);
}
.player
  .mainContent
  .sideContent_left
  .listInner
  .sub-group
  .sub.active:last-child
  .group-collapse::before {
  background-image: url(../../images/new_player/icon_line_close_last.svg);
}
.player .mainContent .middleContent {
  width: 100%;
  transition: all 0.5s;
}

.player .mainContent .middleContent .topBar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  padding-left: 10px;
  position: relative;
  z-index: 10;
}
.player .mainContent .middleContent .topBar .loader-inner {
  display: none;
}
.player .mainContent .middleContent .topBar.topBarMask .loader-inner {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 10;
  align-items: center;
  justify-content: center;
}
.player .mainContent .middleContent .topBar.topBarMask .loader-inner::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  bottom: 0;
  background-color: rgba(0, 177, 210, 0.25);
  content: "";
}
.player .mainContent .middleContent .topBar.topBarMask .loader-inner::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  bottom: 0;
  background-color: #00b1d2;
  -webkit-animation: loaderRun 4s ease alternate;
  animation: loaderRun 4s ease alternate;
  content: "";
}

@-webkit-keyframes loaderRun {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes loaderScale {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.player .mainContent .middleContent .topBar:before {
  content: "";
  display: block;
  clear: both;
}
.player .mainContent .middleContent .topBar:after {
  content: "";
  display: block;
  clear: both;
}
.player .mainContent .middleContent .topBar .left {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  min-width: 200px;
  width: 100%;
}
.player .mainContent .middleContent .topBar.topBarGroup {
  flex-wrap: wrap;
}
.player .mainContent .middleContent .topBar.topBarGroup .left {
  margin-top: 10px;
  width: 100%;
  order: 2;
}
.player .mainContent .middleContent .topBar.topBarGroup .left .cameraListBtn {
  position: absolute;
  top: 15px;
}
/*
.player .mainContent .middleContent .topBar .left.shorten {
  width: calc(100% - 900px);
}
.player .mainContent .middleContent .topBar.topBar_1 .left {
  width: calc(100% - 640px);
}
.player .mainContent .middleContent .topBar.topBar_1 .left.shorten {
  width: calc(100% - 640px);
}
.player .mainContent .middleContent.side_left .topBar:not(.topBar_1) .left,
.player .mainContent .middleContent.side_right .topBar:not(.topBar_1) .left {
  margin-top: 10px;
  margin-right: 0;
  width: 100% !important;
}
.player .mainContent .middleContent.side_left .topBar:not(.topBar_1) .right,
.player .mainContent .middleContent.side_right .topBar:not(.topBar_1) .right {
  width: 100% !important;
}
*/

.player .mainContent .middleContent .topBar .left .cameraListBtn {
  display: inline-block;
  width: 35px;
}
.player .mainContent .middleContent .topBar .left .cameraListBtn i {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  margin: 5px 5px 5px 0;
}
.player .mainContent .middleContent .topBar .left .cameraListBtn i.iconBack {
  width: 15.4px;
}

.player .mainContent .middleContent .topBar .left .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 20px;
  line-height: 26px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: calc(100% - 5px);
}

.player .mainContent .middleContent .topBar .group {
  width: calc(100% - 5px);
}
.player .mainContent .middleContent .topBar .group .list {
  width: 100%;
  font-size: 14px;
  /* text-overflow: ellipsis; */
  white-space: nowrap;
  /* overflow: hidden; */
}
.player .mainContent .middleContent .topBar .group .list .list__item {
  display: inline-flex;
  line-height: 32px;
  padding: 0 10px;
  margin-right: 10px;
  background-color: #eee;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  vertical-align: bottom;
  position: relative;
}
.player .mainContent .middleContent .topBar .group .list .list__item .btnText {
  display: none;
}
.player .mainContent .middleContent .topBar .group .list .list__item--hidden {
  visibility: hidden;
  position: absolute;
  z-index: -999999;
}
.player .mainContent .middleContent .topBar .group .list .list__item.list__sub {
  cursor: pointer !important;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item.list__item--active,
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item:not(.list__item--disabled):hover,
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item--active
  .list__item__plus {
  background-color: #00b1d2;
  cursor: default;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item.list__item--active
  .list__item__name,
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item:not(.list__item--disabled):hover
  .list__item__name {
  color: #fff;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .list__item__plus {
  padding: 3px;
  font-size: 16px;
  background-color: #fff;
  color: #757575;
  font-weight: bold;
  border-radius: 2px;
  line-height: 10px;
  margin-left: 5px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item:not(.list__item--disabled):hover
  .list__item__plus {
  color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .list__item__menu-btn {
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  width: 18px;
  align-items: center;
  justify-content: center;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .list__item__menu-btn
  .circle {
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 4px;
  margin: 1px;
  background-color: #888;
  border-radius: 100%;
}

.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item.list__item--disabled {
  position: relative;
  cursor: default;
}
.player .mainContent .middleContent .topBar .group .list .list__item .btnMore {
  display: none;
  background-color: #888;
  color: #fff;
  position: absolute;
  top: 29.5px;
  left: 50%;
  width: 100px;
  line-height: 1.2;
  padding: 3px 0;
  border-radius: 3px;
  text-align: center;
  margin-left: -50px;
  z-index: 7;
  pointer-events: none;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item:not(.list__item--active):hover
  .btnMore {
  display: block;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .btnMore.btnFull {
  white-space: normal;
  width: 120px;
  margin-left: -60px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .btnMore:before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #888 transparent;
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item.list__item--disabled
  .list__item__menu-btn
  .circle {
  background-color: #ccc;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item.list__item--disabled
  .list__item__menu-btn {
  pointer-events: none;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item:not(.list__item--disabled):hover
  .list__item__menu-btn
  .circle,
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item.list__item--active
  .list__item__menu-btn
  .circle {
  background-color: #fff;
}

.player .mainContent .middleContent .topBar .group .list .list__item .dropdown {
  position: absolute;
  left: 0;
  top: 10px;
  z-index: 100;
  width: 100px;
  margin-top: 30px;
  padding: 10px;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 0 3px #ddd;
}

.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .dropdown
  .dropdown__item {
  padding: 8px 0;
  font-size: 16px;
  color: #888;
  line-height: 16px;
  cursor: pointer;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .dropdown
  .dropdown__item.list__item--active {
  color: #00b1d2;
  cursor: default;
  opacity: 0.5;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .dropdown
  .dropdown__item:hover {
  color: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__item
  .dropdown
  .dropdown__title {
  padding: 2px 0;
  font-size: 18px;
  color: #888;
  line-height: 20px;
  font-weight: bold;
}
.player .mainContent .middleContent .topBar .group .list .list__arrow {
  display: inline-flex;
  height: 32px;
  margin-right: 10px;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
}

.player .mainContent .middleContent .topBar .group .list .list__arrow svg {
  width: 18px;
  height: 18px;
}
.player .mainContent .middleContent .topBar .group .list .list__arrow svg path {
  fill: #757575;
}

.player .mainContent .middleContent .topBar .group .list .list__arrow--back {
  cursor: pointer;
}
/* .player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__arrow--back
  svg {
  transform: rotate(90deg);
  width: 15px;
  height: 15px;
} */
.player
  .mainContent
  .middleContent
  .topBar
  .group
  .list
  .list__arrow--back:hover
  svg
  path {
  fill: #999;
}

.player .mainContent .middleContent .topBar .right {
  margin-left: auto;
  padding: 2.5px 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

.player .mainContent .middleContent .topBar .right .topBar_tools {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  max-width: 405px;
  white-space: nowrap;
  align-items: center;
  justify-content: space-around;
}
.player .mainContent .middleContent .topBar .right .topBar_tools.back_tools {
  padding-left: 30px;
}

.player .mainContent .middleContent .topBar.topBar .right .topBar_tools {
}

.player .mainContent .middleContent .topBar .right .vr {
  width: 1px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
  background-color: #e4e5e6;
}

.player .mainContent .middleContent .topBar .right .topBarBtn {
  display: inline-block;
  vertical-align: middle;
  margin: 0 9px;
  position: relative;
}

.player .mainContent .middleContent .topBar .right .topBarBtn:last-child {
  margin-right: 0;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBar_tools
  .topBarBtn
  .icon {
  width: 30px;
  text-align: center;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBar_tools
  .topBarBtn
  .icon:hover .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBar_tools
  .topBarBtn
  .icon:hover .st1{
    fill: #00b1d2;
}
.player .mainContent .middleContent .topBar .right .topBar_tools .topBarBtn {
  margin: 0 5px;
}
.player .mainContent .middleContent .topBar .right .topBarBtn .iconSet svg {
  width: 21px;
}

.player .mainContent .middleContent .topBar .right .topBarBtn .iconFilm svg {
  width: 26px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn
  .iconMicrophone
  svg {
  width: 16px;
}

.player .mainContent .middleContent .topBar .right .topBarBtn .iconShare svg {
  width: 20px;
}

.player .mainContent .middleContent .topBar .right .topBarBtn .iconSense svg {
  width: 25px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn
  .iconBabyGallery
  svg {
  width: 26px;
}

.player .mainContent .middleContent .topBar .right .topBarBtn .iconEva svg {
  width: 24px;
}

.player .mainContent .middleContent .topBar .right .topBarBtn .iconEvent svg {
  width: 28px;
}

.player .mainContent .middleContent .topBar .right .topBarBtn.dividePage {
  font-size: 16px;
  color: #888;
  line-height: 22px;
  white-space: nowrap;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  select {
  border: 1px solid #888;
  border-radius: 2px;
  padding: 3px 5px;
  margin-top: -1px;
}

.topBarBtn {
  position: relative;
}
.topBarBtn .btnText {
  display: none;
  background-color: #888;
  color: #fff;
  position: absolute;
  top: 27px;
  left: 50%;
  width: 100px;
  line-height: 1.2;
  padding: 3px 0;
  border-radius: 3px;
  text-align: center;
  margin-left: -50px;
  z-index: 7;
  white-space: normal;
}

.topBarBtn .btnText:before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #888 transparent;
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
}
.topBarBtn:last-child .btnText {
  margin-left: -65px;
}
.topBarBtn:last-child .btnText:before {
  margin-left: 9px;
}
.evaControlBoxBtn .topBarBtn .btnText{
  top: 55px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.subscriptionBtn
  .icon {
  width: 14px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.subscriptionBtn
  .icon
  .st0 {
  fill: #fff;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.subscriptionBtn.active
  .icon
  .st1 {
  fill: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.subscriptionBtn.active
  .icon
  .st0 {
  fill: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.subscriptionBtn
  .icon
  .st1 {
  fill: #888;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.subscriptionBtn.active
  .icon
  .st0 {
  fill: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.divideBtn.active
  .icon
  .st0 {
  fill: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.slickscreenBtn.active
  .icon
  svg {
  fill: #00b1d2;
}
.player .mainContent .middleContent .topBar .right .topBarBtn.readonly {
  cursor: auto;
  pointer-events: none;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.setBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.setBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.setBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.setBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.filmBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.filmBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.filmBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.filmBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.microphoneBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.microphoneBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.microphoneBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.microphoneBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.shareBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.shareBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.shareBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.shareBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.cameraBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.cameraBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.cameraBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.cameraBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.searchBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.searchBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.searchBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.searchBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.senseBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.senseBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.senseBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.senseBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.evaBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.evaBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.evaBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.evaBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.eventBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.eventBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.eventBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.readonly.eventBtn
  .icon
  .st3,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.slickscreenBtn.readonly
  .icon
  svg,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.babyAlbumBtn.readonly
  .icon
  .st1 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.babyAlbumBtn.readonly
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.babyAlbumBtn.readonly
  .icon
  .st2 {
  stroke: #ccc;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.petAlbumBtn.readonly
  .icon
  .st1 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.petAlbumBtn.readonly
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.petAlbumBtn.readonly
  .icon
  .st2 {
  stroke: #ccc;
}

.player .mainContent .middleContent .topBar .right .topBarBtn.setBtn {
  position: relative;
}
.player .mainContent .middleContent .topBar .right .topBarBtn.setBtn::after {
  display: none;
  content: "";
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 100%;
  position: absolute;
  top: -3px;
  right: -3px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.setBtn.can-upgrade::after {
  display: block;
}

.player .mainContent .middleContent .topBar .right .microphoneBox {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox.active
  .iconMicrophone
  .st0,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox.active
  .iconMicrophone
  .st1 {
  fill: #ec5a5c;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox.active
  .triangle,
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox.active
  .microphoneInner {
  display: inline-block;
}

.player .mainContent .middleContent .topBar .right .microphoneBox .triangle {
  position: absolute;
  top: -10px;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent #e4e5e6 transparent;
  z-index: 2;
  left: 50%;
  margin-left: -10px;
  display: none;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .triangle:before {
  content: "";
  display: inline-block;
  position: absolute;
  border-width: 0 8px 9px 8px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  left: 50%;
  top: 1px;
  margin-left: -8px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner {
  position: absolute;
  top: 36px;
  left: 50%;
  margin-left: -79.5px;
  border: 1px solid #e4e5e6;
  width: 159px;
  background-color: #fff;
  display: none;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li {
  height: 40px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .text {
  line-height: 40px;
  vertical-align: middle;
  display: inline-block;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .iconArrowR {
  width: 5px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner {
  display: none;
  position: absolute;
  background-color: #f8f8f8;
  border-top: 1px solid #e4e5e6;
  border-left: 1px solid #e4e5e6;
  border-right: 1px solid #e4e5e6;
  left: 159px;
  top: -42px;
  width: 159px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .voiceMsg:hover {
  background-color: #e4e5e6;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .voiceMsg:hover
  .text {
  color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .voiceMsg:hover
  .iconTriangle
  .st0 {
  fill: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .voiceMsg.readonly {
  cursor: auto;
  background-color: #f8f8f8;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .voiceMsg.readonly
  .text {
  color: #ccc;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .voiceMsg.readonly
  .iconTriangle
  .st0 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li
  .voiceMsgInner
  .iconTriangle {
  vertical-align: middle;
  width: 8px;
  margin-right: 8px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li.record {
  cursor: auto;
  position: relative;
  z-index: 1;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li.voiceMsgBtn:hover {
  background-color: #f8f8f8;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li.voiceMsgBtn:hover
  > .text {
  color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .microphoneBox
  .microphoneInner
  li.voiceMsgBtn:hover
  .voiceMsgInner {
  display: inline-block;
}

.player .mainContent .middleContent .topBar .headerMenu {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.player .mainContent .middleContent .topBar .headerMenu svg {
  transform: rotate(0);
}
.player .mainContent .middleContent .topBar .headerMenu.back {
  position: absolute;
  left: 0;
  top: 0;
}
.player .mainContent .middleContent .topBar .headerMenu.back svg {
  transform: rotate(180deg);
}
.player .mainContent .middleContent .topBar .headerMenu .mainLink {
  display: inline-block;
  vertical-align: middle;
  margin: 0 9px;
  font-size: 16px;
  color: #888;
  position: relative;
}

.player .mainContent .middleContent .topBar .headerMenu .mainLink:hover {
  color: #00b1d2;
}

.player .mainContent .middleContent .topBar .headerMenu .mainLink.videoHide {
  display: none;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink.videoHide.active {
  display: inline-block;
}

.player .mainContent .middleContent .topBar .headerMenu .menuBtn {
  cursor: pointer;
  display: inline-flex;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  vertical-align: top;
}

.player .mainContent .middleContent .topBar .headerMenu .menuBtn:hover {
  box-shadow: 0 0 3px #00b1d2;
}

.player .mainContent .middleContent .topBar .headerMenu .menuBtn .circle {
  width: 4px;
  height: 4px;
  margin: 1px 0;
  background-color: #888;
  border-radius: 100%;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle
  a.topBarBtn
  .btnText {
  top:70px;
  margin-left: -55px;
  padding: 3px 5px;

}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle
  a.topBarBtn
  .btnText:before {
  margin-left: -6px;
}
.player .mainContent .middleContent .topBar .headerMenu .mainLink .subMenu {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  border-radius: 5px;
  box-shadow: 0 0 3px #ddd;
  background-color: #fff;
  padding: 10px;
  z-index: 1000;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu.active {
  display: block;
}

.player .mainContent .middleContent .topBar .headerMenu .mainLink .subMenu .hr {
  width: 100%;
  height: 1px;
  background-color: #888;
  margin: 8px 0;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .subTitle {
  font-size: 16px;
  color: #888;
  font-weight: bold;
  display: block;
  white-space: nowrap;
  padding: 8px 0;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .subLink {
  font-size: 16px;
  color: #888;
  display: block;
  white-space: nowrap;
  padding: 8px 0;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .subLink:hover {
  color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .subLink.videoLink {
  display: none;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .videoHr {
  display: none;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .subLink.videoLink.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .mainLink
  .subMenu
  .videoHr.active {
  display: block;
}
.player .mainContent .middleContent .topBar .headerMenu .shareLink {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  margin: 0 5px;
  font-size: 16px;
  color: #888;
}
.player .mainContent .middleContent .topBar .headerMenu .shareLink .shareNote {
  display: none;
  background-color: #888;
  color: #fff;
  position: absolute;
  bottom: -27px;
  left: 50%;
  width: 100px;
  line-height: 1.7;
  border-radius: 3px;
  text-align: center;
  margin-left: -50px;
  z-index: 3;
}
.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .shareNote::before {
  content: "";
  display: inline-block;
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #888 transparent;
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -6px;
}
.player .mainContent .middleContent .topBar .headerMenu .shareLink .shareBtn {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  font-size: 16px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .shareBtn
  i::before {
  font-family: FontAwesome;
}
.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .shareBtn:hover {
  color: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .shareBtn:hover
  .shareNote {
  display: block;
}
.player .mainContent .middleContent .topBar .headerMenu .shareLink .subMenu {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  border-radius: 5px;
  box-shadow: 0 0 3px #ddd;
  background-color: #fff;
  padding: 10px;
  z-index: 1000;
  font-size: 16px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .subMenu
  .subLink {
  cursor: pointer;
  font-size: 16px;
  color: #888;
  display: block;
  white-space: nowrap;
  padding: 8px 0;
}
.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .subMenu
  .subLink:hover {
  color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .subMenu.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .topBar
  .headerMenu
  .shareLink
  .subMenu
  .share_icon {
  display: inline-block;
  vertical-align: top;
  font-family: FontAwesome;
  width: 16px;
}

.player .mainContent .middleContent .film {
  background-color: #000;
  width: 100%;
  position: relative;
  z-index: 1;
}

.player .mainContent .middleContent.side_right .film,
.player .mainContent .middleContent.side_left .film {
  height: calc(100vh - 56px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.player .mainContent .middleContent.side_right .film.divide_1,
.player .mainContent .middleContent.side_left .film.divide_1 {
  height: calc(100vh - 173px);
}

.player .mainContent .middleContent.show_banner.side_right .film.divide_1,
.player .mainContent .middleContent.show_banner.side_left .film.divide_1 {
  height: calc(100vh - 188px);
}

.player .mainContent .middleContent .film .filmContent {
  transition: all 0.5s;
  width: 100%;
  height: calc(100vh - 56px);
  margin: 0 auto;
  background-color: #000;
  font-size: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.player .mainContent .middleContent .film .filmContent .slick-arrow {
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow {
  display: flex;
  position: absolute;
  width: 100px;
  height: 100%;
  align-items: center;
  top: 0;
  flex-wrap: wrap;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.5s;
}
/*.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow:hover {
  opacity: 1;
}*/
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow.slick-left {
  left: 0;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow.slick-right {
  right: 0;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-box {
  width: 120px;
  height: 80px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 0 160px 160px 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  padding-right: 10px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow.slick-right
  .slick-box {
  border-radius: 160px 0 0 160px;
  padding-left: 10px;
  padding-right: 0;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-btn {
  width: 30px;
  height: 30px;
  padding: 10px 7px;
  opacity: 0.6;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-separate {
  opacity: 0.6;
  height: 30px;
  width: 1px;
  background-color: #fff;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-btn:first-child::after {
  display: none;
}
/*.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-btn:hover {
  opacity: 1;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-btn:hover::after {
  background-color: rgba(255, 255, 255, 0.6);
}*/
.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow.slick-left
  .slick-btn {
  transform: rotate(180deg);
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent.slick-active
  .slick-arrow
  .slick-btn
  img {
  max-width: 100%;
}
.player .mainContent .middleContent .film.divide_1 .filmContent {
  height: calc(100vh - 173px);
  max-width: 1920px;
  max-height: calc(1920px / 762* 428);
}
.player .mainContent .middleContent.show_banner .film.divide_1 .filmContent {
  height: calc(100vh - 188px);
}
.player .mainContent .middleContent.show_banner .aBN {
  padding: 0 10px;
  height: 100px;
}
.player
  .mainContent
  .middleContent.show_banner
  .film
  .filmContent.filmContentVH
  .divide.divide1 {
  width: calc((100vh - 190px) / 428 * 762);
}

.player .mainContent .middleContent.side_left .film .filmContent.filmContentVH,
.player
  .mainContent
  .middleContent.side_right
  .film
  .filmContent.filmContentVH {
  /* width: calc((100vh - 56px) / 428 * 762); */
}

.player
  .mainContent
  .middleContent.side_left
  .film.divide_1
  .filmContent.filmContentVH,
.player
  .mainContent
  .middleContent.side_right
  .film.divide_1
  .filmContent.filmContentVH {
  width: calc((100vh - 173px) / 428 * 762);
}

.player .mainContent .middleContent .film .filmContent .divide {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #efefef;
}
.player .mainContent .middleContent .film .filmContent .divide.divide1 {
  height: auto;
}
/*.player .mainContent .middleContent .film .filmContent .divide:not(.divide1) {
  height: calc(100vh - 56px);
}*/
.player
  .mainContent
  .middleContent
  .film
  .filmContent.filmContentVH
  .divide.divide1 {
  width: calc((100vh - 174px) / 428 * 762);
  margin: 1px auto 0;
}
/*.player
  .mainContent
  .middleContent.side_left
  .film
  .filmContent
  .divide:not(.divide1),
.player
  .mainContent
  .middleContent.side_right
  .film
  .filmContent
  .divide:not(.divide1) {
  height: auto;
  max-height: calc(100vh - 56px);
}*/

.player
  .mainContent
  .middleContent.side_right.side_left
  .film
  .filmContent.filmContentVH
  .divide:not(.divide1) {
  height: calc(100vw * 0.62 / 762 * 428);
}

.player .mainContent .middleContent .film .filmContent .divide.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools
  .left {
  display: flex;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools
  .right {
  display: none !important;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools.switch
  .left {
  display: none !important;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .tools
  .btnToolsSwitch {
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools.switch
  .right {
  display: flex !important;
  margin-top: -0.42px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .tools
  .btnToolsSwitch {
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools
  .btnToolsSwitch {
  display: block;
  width: 24px;
  height: 18px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools
  .btnToolsSwitch
  svg {
  fill: #eee;
  width: 24px;
  height: 18px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools
  .btnToolsSwitch:hover
  svg {
  fill: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.toolSwitch
  .tools.switch
  .btnToolsSwitch {
  transform: rotate(180deg);
}

.player .mainContent .middleContent .film .filmContent .divide .divideBlock {
  position: relative;
  overflow: hidden;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.active:not(.full-screen)::after {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid red;
  pointer-events: none;
  z-index: 5;
  content: "";
  box-sizing: border-box;
}
.player .mainContent .middleContent .film .filmContent .divide .divideFilm {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideFilm{
  height: 0;
  padding-top: 56.25%;
}
/*.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideFilm,
.player
  .mainContent
  .middleContent.side_left
  .film
  .filmContent
  .divide
  .divideFilm,
.player
  .mainContent
  .middleContent.side_right
  .film
  .filmContent
  .divide
  .divideFilm {
  height: 0;
  padding-top: 56.25%;
}*/
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.no_film
  .video_name,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.no_film
  .tools {
  display: none;
}
.player .mainContent .middleContent .film .filmContent .divide .video_name {
  position: absolute;
  left: 15px;
  top: 15px;
  display: inline-block;
  padding: 5px 10px;
  color: #fff;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  z-index: 5;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .video_name
  .light {
  display: inline-block;
  vertical-align: top;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #ccc;
  margin-right: 6px;
  margin-top: 1px;
  border: 2px solid #ccc;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .video_name.on
  .light {
  background-color: #aad371;
  border-color: #aad371;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .video_name.p2p
  .light {
  background-color: #aad371;
  border-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools {
  background-color: rgba(0, 0, 0, 0.5);
  width: calc(100% - 10px);
  left: 0;
  bottom: -100%;
  padding: 10px 5px;
  position: absolute;
  z-index: 5;
  transition: bottom 0.5s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
/* .player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
} */
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .left {
  float: left;
  display: flex;
  align-items: center;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .right {
  float: right;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.topBar_tools__headerMenu {
  margin: 0 5px;
  cursor: pointer;
}
.topBar_tools__headerMenu svg {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}
.topBar_tools__headerMenu.topBar_tools__headerMenu--reverse svg {
  transform: rotate(270deg);
}
.topBar_tools__headerMenu svg .cls-1 {
  fill: #757575;
}
.topBar_tools__dropdown {
  position: absolute;
  padding: 10px;
  top: 30px;
  right: 10px;
  background-color: #fff;
  z-index: 6;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .date {
  display: inline-block;
  vertical-align: top;
  margin-right: 5px;
  /* background-color: #888; */
  color: #fff;
  /* padding: 5px 10px; */
  font-size: 12px;
  border-radius: 5px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .screenBox {
  margin-top: 3px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumnBtn
  .st0 {
  fill: #eee;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon {
  width: 24px;
  display: inline-block;
  vertical-align: top;
  margin: 0 4px;
  cursor: pointer;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon
  svg {
  fill: #eee;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon:hover
  svg {
  fill: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon.iconVolumn:hover
  .st0 {
  fill: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon
  .st0 {
  display: block;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon.readonly {
  pointer-events: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .icon.readonly
  svg {
  pointer-events: none;
  fill: #888;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox {
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .volumeSliderBox {
  position: absolute;
  width: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  top: -132px;
  padding: 10px 0;
  display: none;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .volumeSliderBox.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .volumeSliderBox
  .volumeSlider {
  margin: 0 auto;
  width: 1px;
  background-color: #ccc;
  border-color: transparent;
  border-bottom: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox--split1
  .volumeSliderBox
  .volumeSlider {
  margin: 0 auto;
  width: 50px;
  height: 5px;
  background-color: #ccc;
  border-color: transparent;
  border: none !important;
  border-radius: 0 !important;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .volumeSliderBox
  .volumeSlider
  .ui-slider-handle {
  height: 11px;
  width: 11px;
  outline: none;
  border-radius: 100%;
  left: -6px;
  margin-bottom: -5.5px;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .volumeSliderBox
  .volumeSlider
  .ui-slider-handle.ui-state-active {
  border-color: #00b1d2;
  background-color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .volumeSliderBox
  .volumeSlider
  .ui-slider-range {
  background: #00b1d2;
  width: 3px;
  left: -1px;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .controlBtn.volumnBtn {
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .controlBtn.volumnBtn.mute
  .st1 {
  stroke: #eee;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .volumeControlBox
  .controlBtn.volumnBtn.mute:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 1px;
  left: 14px;
  height: 30px;
  background-color: #e84343;
  transform: rotate(45deg);
  top: -8px;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox {
  display: inline-block;
  vertical-align: top;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .iconZoomout,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .iconZoomin {
  cursor: pointer;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .icon {
  display: inline-block;
  vertical-align: middle;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .icon.iconZoomout {
  margin-left: 4px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .sliderZoom {
  display: inline-block;
  width: 80px;
  margin: 0 5px;
  border: none;
  height: 2px;
  background-color: #ccc;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .sliderZoom
  .ui-slider-handle {
  cursor: pointer;
  height: 14px;
  top: -7px;
  border-color: #00b1d2;
  background-color: #00b1d2;
  border-width: 1.5px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .sliderZoom
  .ui-slider-handle:focus {
  outline: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .sliderZoom
  .ui-slider-handle {
  border-color: #ccc;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .zoomBox
  .sliderZoom
  .ui-slider-handle:hover {
  border-color: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .close_full_screen {
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.full-screen
  .tools
  .full_screen {
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.full-screen
  .tools
  .close_full_screen {
  display: inline-block;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.active
  .tools {
  bottom: 0;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break {
    color:#fff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  text-align: center;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break::before {
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    background-color: rgba(0,0,0,0.5);
  }
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break.offline.off::before {
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    content: "";
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break.offline.off::after {
    position: absolute;
    width: 35px;
    height: 30px;
    left:50%;
    top:50%;
    margin-left: -17px;
    margin-top: -5px;
    content: "";
    background: url(../../images/new_player/icon_turn_off.svg) no-repeat center center;
    background-size: contain;
    z-index: 3;
  }
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break .text {
    color:#fff;
    position: relative;
    z-index: 1;
  }
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  > .break.sleep,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break.connect {
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  > .break.sleep
  .text,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break.connect
  .text {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 1.5;
  flex-direction: column;
  color: #ddd;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  > .break.sleep
  .text
  .retryBtn,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break.connect
  .text
  .retryBtn {
  cursor: pointer;
  background: #333;
  line-height: 30px;
  padding: 0 16px;
  border-radius: 50px;
  margin-top: 10px;
  transition: 0.3s all;
  color: #fff;
  border: 1px solid transparent;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  > .break.sleep
  .text
  .retryBtn:hover,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .break.connect
  .text
  .retryBtn:hover {
  background: #444;
  border-color: #fff;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .icon {
  width: calc(100% * 360 / 1200);
  margin-bottom: calc(100% * 27 / 1200);
  max-width: 360px;
  text-align: center;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .icon
  img {
  height: 77px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .spotcamtype {
  width: calc(100% - 100px);
  font-size: 16px;
  line-height: 20px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .text {
  width: 90%;
  font-size: 16px;
  text-align: center;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .text .name{
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 6px;
    line-height: 1;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .cameraImg
  .text p{
    margin: 0;
    line-height: 1.5;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .icon
  .st0 {
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .icon
  .st1 {
  display: inline;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .icon
  .st2 {
  fill: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  .icon
  .st3 {
  fill: #888888;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock {
  width: calc(100% + 2px);
  height: auto;
  position: relative;
  top: 0;
  left: -1px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload{
    position: absolute;
    right: 5px;
    top: 10%;
    padding: 5px 0;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 50px;
    z-index: 5;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a{
    width: 35px;
    padding: 8px 10px;
    display: block;
    position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a .tip{
    display: none;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a svg{
    width: 35px;
    height: auto;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a .mobile-icon{
    fill: #fff;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a .mobile-stroke{
    stroke: #fff;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a.readonly{
    pointer-events: none;
  }
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a.readonly  .mobile-icon{
    fill: #888;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a.readonly .mobile-stroke{
    stroke: #888;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a:not(.readonly):hover .mobile-icon{
    fill: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a:not(.readonly):hover .mobile-stroke{
    stroke: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock #mobile-upload a:not(.readonly):hover .tip{
    display: block;
    position: absolute;
    right:calc(100% - 5px);
    bottom:12px;
    white-space: nowrap;
    background-color: #888;
    color: #fff;
    padding: 3px 5px;
    border-radius: 3px;
    z-index: 2;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide1
  .divideBlock.full-screen
  .divideFilm{
    height: 100vh;
    padding-top: 0;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide4
  .divideBlock {
  display: inline-block;
  width: 50%;
  height: 50%;
  border: 1px solid #e4e5e6;
  box-sizing: border-box;
  position: relative;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide4
  .divideBlock
  .divideFilm
  .cameraImg
  .text {
  font-size: 16px;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide6
  .divideBlock {
  display: inline-block;
  width: 33.33%;
  height: 50%;
  border: 1px solid #e4e5e6;
  box-sizing: border-box;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide6
  .divideBlock
  .divideFilm
  .cameraImg
  .text {
  font-size: 10px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide9
  .divideBlock {
  display: inline-block;
  width: 33.33%;
  height: 33.33%;
  border: 1px solid #e4e5e6;
  box-sizing: border-box;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide9
  .divideBlock
  .divideFilm
  .cameraImg
  .text {
  font-size: 10px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide12
  .divideBlock {
  display: inline-block;
  width: 25%;
  height: 33.33%;
  border: 1px solid #e4e5e6;
  box-sizing: border-box;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide12
  .divideBlock
  .divideFilm
  .cameraImg
  .text {
  font-size: 10px;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide16
  .divideBlock {
  display: inline-block;
  width: 25%;
  height: 25%;
  border: 1px solid #e4e5e6;
  box-sizing: border-box;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide16
  .divideBlock
  .divideFilm
  .cameraImg
  .text {
  font-size: 10px;
}
/*.player
  .mainContent
  .middleContent.side_left
  .film
  .filmContent
  .divide
  .divideBlock,
.player
  .mainContent
  .middleContent.side_right
  .film
  .filmContent
  .divide
  .divideBlock {
  height: auto;
}*/
.player .mainContent .middleContent .film .filmContent .divide .zoomSmall {
  position: absolute;
  bottom: 0px;
  right: 1px;
  width: 25%;
  height: 25%;
  border: 4px solid #fff;
  cursor: move;
  display: none;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide:not(.divide1)
  .zoomSmall {
  bottom: 44px;
}

.player .mainContent .middleContent .film .filmContent .divide .zoomSmall img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .zoomSmall
  .zoomFrame {
  position: absolute;
  border: 3px solid red;
  display: inline-block;
  width: 50%;
  height: 50%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  cursor: pointer;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideFilm
  canvas
  .player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide4
  .divideFilm:hover,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide9
  .divideFilm:hover,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide16
  .divideFilm:hover,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide4
  .divideFilm.active,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide9
  .divideFilm.active,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide16
  .divideFilm.active {
  border-color: red;
}

.player .mainContent .middleContent .filmBottom {
  width: 100%;
  position: relative;
  z-index: 10;
}
.player .mainContent .middleContent .filmBottom .timeZoneInner {
  background-color: #fff;
  border: 1px solid #e4e5e6;
  width: 92px;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.5s;
}

.player .mainContent .middleContent .filmBottom .timeZoneInner.active {
  top: -79px;
}

.player .mainContent .middleContent .filmBottom .timeZoneInner .timeZoneBtn {
  width: 100%;
  display: block;
  border-bottom: 1px solid #e4e5e6;
  box-sizing: border-box;
  line-height: 25px;
  text-align: center;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeZoneInner
  .timeZoneBtn:last-child {
  border-bottom: none;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox {
  position: relative;
  background-color: #fff;
  z-index: 2;
  font-size: 0;
  height: 30px;
  width: 100%;
  border-bottom: 1px solid #e4e5e6;
  box-sizing: border-box;
  border-top: none;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .timeZoneBox {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 92px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone {
  position: relative;
  z-index: 2;
  display: inline-block;
  padding: 0 10px;
  line-height: 30px;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone
  .text {
  display: inline-block;
  vertical-align: middle;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone
  .icon {
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  line-height: initial;
  margin-left: 13px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone
  .icon.iconArrowB {
  display: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone
  .icon.iconArrowT {
  display: inline-block;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone.active
  .icon.iconArrowB {
  display: inline-block;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone.active
  .icon.iconArrowT {
  display: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone.readonly {
  cursor: auto;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone.readonly
  .text {
  color: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeZoneBox
  .openTimeZone.readonly
  .text
  .icon
  .st0 {
  fill: #ccc;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .vr {
  width: 1px;
  background-color: #e4e5e6;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .videoControlBox {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  padding: 0 5px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox--split1 {
  display: inline-flex;
  vertical-align: middle;
  height: 100%;
  padding: 0 10px 0 5px;
  width: 80px;
  align-items: center;
  justify-content: center;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox:before {
  display: inline-block;
  content: "";
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .volumeSliderBox {
  position: absolute;
  width: 30px;
  background-color: #fff;
  top: -122px;
  padding: 10px 0;
  display: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox--split1
  .volumeSliderBox {
  position: relative;
  width: 50px;
  background-color: #fff;
  top: auto;
  padding: 10px 0;
  display: block;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .volumeSliderBox.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .volumeSliderBox
  #volumeSlider {
  margin: 0 auto;
  width: 1px;
  background-color: #ccc;
  border-color: transparent;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox--split1
  .volumeSliderBox
  #volumeSlider {
  margin: 0 auto;
  width: 50px;
  height: 5px;
  background-color: #ccc;
  border-color: transparent;
  border: none !important;
  border-radius: 0 !important;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .volumeSliderBox
  #volumeSlider
  .ui-slider-handle {
  height: 11px;
  width: 11px;
  outline: none;
  border-radius: 100%;
  left: -6px;
  margin-bottom: -5.5px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .volumeSliderBox
  #volumeSlider
  .ui-slider-handle.ui-state-active {
  border-color: #00b1d2;
  background-color: #00b1d2;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .volumeSliderBox
  #volumeSlider
  .ui-slider-range {
  background: #00b1d2;
  width: 3px;
  left: -1px;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox--split1
  .volumeSliderBox
  #volumeSlider
  .ui-slider-range {
  border-radius: 0 !important;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn {
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.volumnBtn {
  position: relative;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.volumnBtn.mute:before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 1px;
  left: 7px;
  height: 25px;
  background-color: #e84343;
  transform: rotate(45deg);
  top: -6px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.volumnBtn
  .icon {
  width: 18px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.backBtn
  .icon {
  width: 16px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.pauseBtn
  .icon {
  width: 11px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.pauseBtn
  .iconTriangle {
  display: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly {
  cursor: auto;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.backBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.backBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.backBtn
  .icon
  .st2,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.pauseBtn
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.pauseBtn
  .icon
  .st1,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.pauseBtn
  .icon
  .st2 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.volumnBtn
  .st0 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .videoControlBox
  .controlBtn.readonly.volumnBtn
  .st1 {
  stroke: #ccc;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .timeTextBox {
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
  height: 100%;
  width: calc(100% - 92px - 103px - 144px - 3px);
  box-sizing: border-box;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox::after {
  width: 100%;
  content: "";
  height: 0;
  clear: both;
  display: block;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .left {
  float: left;
  padding-top: 6px;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlert,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlertH {
  display: inline-block;
  vertical-align: top;
  width: 28px;
  height: 28px;
  margin: -6px -5px 0;
  display: none;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../../images/new_player/icon_siren_off.svg");
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .baby-text {
  display: inline-block;
  vertical-align: top;
  margin-left: 6px;
}
.player .mainContent .middleContent .filmBottom .filmFuncBox .baby-text .icon,
.player .mainContent .middleContent .filmBottom .filmFuncBox .baby-text .text {
  display: inline-block;
  vertical-align: middle;
  color: #00b1d2;
  margin-left: 5px;
}
.player .mainContent .middleContent .filmBottom .filmFuncBox .baby-text .icon {
  display: inline-block;
  width: 32px;
  height: 20px;
  background-image: url(../../images/myspotcam/icon_lullaby\ playing03.svg);
  background-size: cover;
  background-position: center;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .baby-text
  .icon.playing {
  background-image: none;
  animation: ani_lullaby 3s infinite linear;
}
@keyframes ani_lullaby {
  0% {
    background-image: url(../../images/myspotcam/icon_lullaby\ playing01.svg);
  }
  33% {
    background-image: url(../../images/myspotcam/icon_lullaby\ playing02.svg);
  }
  67% {
    background-image: url(../../images/myspotcam/icon_lullaby\ playing03.svg);
  }
  100% {
    background-image: none;
  }
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlert.active,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlertH.active {
  display: inline-block;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlert:hover,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlertH:hover,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlert.trigger,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .iconAlertH.trigger {
  background-image: url("../../images/new_player/icon_siren_on.svg");
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .iconAlert {
  background-image: url("../../images/new_player/icon_siren_off.svg");
  width: 30px;
  height: 30px;
  margin: -8.5px 2px;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .iconAlert:hover,
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .tools
  .iconAlert.trigger {
  background-image: url("../../images/new_player/icon_siren_on.svg");
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .timeText {
  display: block;
  line-height: 30px;
  text-align: center;
  overflow: hidden;
  padding-right: 360px;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .timeText.noTools {
  padding-right: 90px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox
  .liveText {
  display: inline-block;
  vertical-align: middle;
  background-color: #00b1d2;
  color: #fff;
  padding: 3px 12px;
  border-radius: 2px;
  position: absolute;
  top: 5px;
  right: 165px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox.readonly
  .iconAlert
  .st0,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox.readonly
  .iconAlertH
  .st0 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .timeTextBox.readonly
  .timeText {
  color: #ccc;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .zoomBox {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  padding: 0 10px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox
  .iconZoomout,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox
  .iconZoomin {
  cursor: pointer;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .zoomBox:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}

.player .mainContent .middleContent .filmBottom .filmFuncBox .zoomBox .icon {
  display: inline-block;
  vertical-align: middle;
  width: 14px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox
  .icon.iconZoomout {
  margin-left: 4px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox
  .sliderZoom {
  display: inline-block;
  width: 80px;
  margin: 0 5px;
  border: none;
  height: 2px;
  background-color: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox
  .sliderZoom
  .ui-slider-handle {
  cursor: pointer;
  height: 14px;
  top: -8px;
  border-color: #00b1d2;
  background-color: #00b1d2;
  border-width: 1.5px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox
  .sliderZoom
  .ui-slider-handle:focus {
  outline: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox.readonly
  .icon
  .st0,
.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox.readonly
  .icon
  .st1 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .filmFuncBox
  .zoomBox.readonly
  .sliderZoom
  .ui-slider-handle {
  border-color: #ccc;
}

.player .mainContent .middleContent .filmBottom .timeBar {
  position: relative;
  height: 90px;
  background-color: #fff;
  border-top: none;
  padding: 0 10px;
}

.player .mainContent .middleContent .filmBottom .timeBar:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 90px;
}
.player .mainContent .middleContent .filmBottom .timeBar .calendarBox__outer {
  width: 115px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.player .mainContent .middleContent .filmBottom .timeBar .calendarBox {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
}

.player .mainContent .middleContent .filmBottom .timeBar .calendarBox .setDate {
  border-radius: 100%;
  margin-right: 2px;
  display: block;
  text-align: center;
  width: 30px;
  height: 30px;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate:hover {
  background-color: #efefef;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate
  .iconCalendar {
  display: inline-block;
  width: 16.5px;
  margin-top: 6px;
  height: 15.5px;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate
  .iconCalendar svg{
    width: 16px;
    height: 15px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate.readonly {
  cursor: none;
  pointer-events: none;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate.readonly
  .iconCalendar
  .st0 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate.readonly
  .iconCalendar
  .st1 {
  stroke: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate.readonly
  .iconCalendar
  .st2 {
  fill: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .setDate
  .text {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  width: 85px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar {
  display: none;
  background-color: #f1f1f1;
  position: absolute;
  z-index: 100;
  top: -308px;
  left: -11px;
  width: 200px;
  box-sizing: border-box;
  border: 1px solid #e4e5e6;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title {
  position: relative;
  padding: 15px 0 10px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .dateTitle {
  text-align: center;
  color: #666;
  font-weight: bold;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .dateTitle
  span {
  display: inline-block;
  margin: 0 2px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .calendarBtn {
  display: inline-block;
  position: absolute;
  top: 12px;
  text-align: center;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 100%;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .calendarBtn:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 23px;
  width: 0;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .calendarBtn
  .icon {
  vertical-align: middle;
  width: 6px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .calendarBtn.prev {
  left: 5px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .title
  .calendarBtn.next {
  right: 5px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list.dateBox {
  background-color: #fff;
  height: 178px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list.dateBox
  ul
  li {
  cursor: pointer;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list.dateBox
  ul
  li.choose {
  background-color: #00b1d2;
  border-radius: 100%;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list.dateBox
  ul
  li.choose
  .text {
  color: #fff;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list.dateBox
  ul
  li.disabled {
  cursor: auto;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list.dateBox
  ul
  li.disabled
  .text {
  color: #ccc;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list
  ul {
  width: 100%;
  font-family: arial;
  font-weight: bold;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list
  ul
  li {
  position: relative;
  width: 14.28%;
  height: 28px;
  line-height: 28px;
  list-style-type: none;
  display: block;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .body-list
  ul
  li
  .text {
  display: inline-block;
  border-radius: 100%;
  position: relative;
  font-weight: 400;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .calendarBottom {
  padding: 13px 0;
  text-align: center;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .calendarBox
  .calendar
  .calendarBottom
  .goTodayBtn {
  background-color: #00b1d2;
  color: #fff;
  width: 100px;
  line-height: 28px;
  display: inline-block;
  border-radius: 25px;
}

.player .mainContent .middleContent .filmBottom .timeBar .sliderBackBtn {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  top: -8px;
  left: -0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
}
.player .mainContent .middleContent .filmBottom .timeBar .sliderNextBtn {
  display: inline-flex;
  vertical-align: middle;
  transform: rotate(180deg);
  margin-left: 10px;
  position: relative;
  top: -8px;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  align-items: center;
  justify-content: center;
}

.player .mainContent .middleContent .filmBottom .timeBar .sliderBackBtn:hover{
  background-color: #efefef;
}
.player .mainContent .middleContent .filmBottom .timeBar .sliderBackBtn .icon {
  width: 8px;
}
.player .mainContent .middleContent .filmBottom .timeBar .sliderBackBtn .icon svg{
  fill: #00b1d2;
}

.player .mainContent .middleContent .filmBottom .timeBar .processBox {
  position: relative;
  background-image: url(../../images/timeline.svg);
  background-size: 100%;
  height: 36px;
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 200px);
  margin-left: 10px;
}

.player .mainContent .middleContent .filmBottom .timeBar .processBox .eventBox {
  width: 100%;
  position: relative;
  top: -10px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event {
  position: absolute;
  width: 4px;
  height: 28px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_AV {
  background-color: #e99231;
  left: calc(100% / 7 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_T {
  background-color: #a3cd88;
  left: calc(100% / 7 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_A {
  background-color: #c17a27;
  left: calc(100% / 9 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_M {
  background-color: #387235;
  left: calc(100% / 2 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_H {
  background-color: #00b1d2;
  left: calc(100% / 3 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_I {
  background-color: #fcd020;
  left: calc(100% / 5 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_Od {
  background-color: #4092af;
  left: calc(100% / 3 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_Co {
  background-color: #b97426;
  left: calc(100% / 5 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .eventBox
  .event.event_R {
  background-color: #2f622e;
  left: calc(100% / 5 - 2px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  top: 4px;
  height: 14px;
  background-color: transparent;
  border-color: transparent;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive{
    cursor: pointer;
  }

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .ui-slider-handle,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .ui-slider-handle {
  width: 5px;
  height: 34px;
  outline: none;
  top: -16px;
  border: none;
  background: transparent;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .ui-slider-handle::after,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .ui-slider-handle::after {
  width: 10px;
  height: 34px;
  left: -5px;
  top: 0;
  background: url(../../images/new_player/icon_pointer.svg) no-repeat center top;
  background-size: contain;
  content: "";
  position: absolute;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .ui-slider-range,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .ui-slider-range {
  cursor: pointer;
  background: rgba(48, 176, 212, 0.3);
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .timeImg,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeImg {
  position: absolute;
  display: none;
  bottom: 23px;
  z-index: 101;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .timeImg
  .img,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeImg
  .img {
  width: 200px;
  height: 112px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff url(/images/new_player/icon_video_img.svg) no-repeat 5px 5px;
  background-size: 200px auto;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .timeImg
  .img
  #timeImgText,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeImg
  .img
  #timeImgText {
  display: none;
  margin-top: 45px;
  font-size: 14px;
  color: #555;
  text-align: center;
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .timeImg
  .time,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeImg
  .time {
  padding: 5px 0;
  font-size: 12px;
  color: #555;
  text-align: center;
}
/* .player .mainContent .middleContent .filmBottom .timeBar .processBox #timeSlider:hover .timeImg {
    display: block;
} */
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .timeImg
  img,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeImg
  img {
  max-width: 100%;
  width: 200px;
  height: calc((200px * 9) / 16);
}
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .timeImg.active,
.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeImg.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSlider
  .ui-slider-range {
  background: transparent;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  #timeSliderLive
  .timeBlock {
  position: absolute;
  top: 0;
  height: 100%;
  background: rgba(48, 176, 212, 0.3);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox {
  position: relative;
  width: 100%;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum {
  position: absolute;
  width: 58px;
  text-align: center;
  top: 40px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(1) {
  left: -27px;
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(2) {
  left: calc(100% / 7 - 27px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(3) {
  left: calc(100% / 7 * 2 - 27px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(4) {
  left: calc(100% / 7 * 3 - 27px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(5) {
  left: calc(100% / 7 * 4 - 27px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(6) {
  left: calc(100% / 7 * 5 - 27px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(7) {
  left: calc(100% / 7 * 6 - 27px);
}

.player
  .mainContent
  .middleContent
  .filmBottom
  .timeBar
  .processBox
  .timeNumBox
  .timeNum:nth-child(8) {
  left: calc(100% - 25px);
}

.player .mainContent .middleContent.side_left {
  width: 81%;
  margin-right: 0;
  margin-left: auto;
}

.player
  .mainContent
  .middleContent.side_left
  .film
  .filmContent:not(.divideContent) {
  height: calc(100vw * 0.81 / 762 * 428);
}

.player
  .mainContent
  .middleContent.side_left
  .film
  .filmContent.filmContentVH:not(.divideContent) {
  height: calc(100vh - 173px);
}
.player
  .mainContent
  .middleContent.side_left.show_banner
  .film
  .filmContent.filmContentVH:not(.divideContent) {
  height: calc(100vh - 188px);
}

.player .mainContent .middleContent.side_right {
  width: calc(100% - 355px);
  margin-left: 0;
  margin-right: auto;
}

.player
  .mainContent
  .middleContent.side_right
  .film
  .filmContent.filmContentVH {
  /* height: calc(100vh - 173px); */
}

.player .mainContent .middleContent.side_left.side_right {
  width: calc(81% - 355px);
  margin-left: auto;
  margin-right: 355px;
}

.player .mainContent .middleContent.side_left.side_right .film .filmContent {
  height: calc(100vw * 0.62 / 762 * 428);
}

.player
  .mainContent
  .middleContent.side_left.side_right
  .film
  .filmContent.filmContentVH {
  height: calc(100vh - 173px);
}

.player
  .mainContent
  .middleContent.side_left.side_right.show_banner
  .film
  .filmContent.filmContentVH {
  height: calc(100vh - 188px);
}
.player .mainContent .middleContent.side_left_close {
  margin-right: 0;
  margin-left: auto;
}

.player .mainContent .middleContent.side_right_close {
  margin-left: 0;
  margin-right: auto;
}

.player .mainContent .middleContent.side_left_right_close {
  margin-right: 355px;
  margin-left: auto;
}

.player .mainContent .middleContent.side_right_left_close {
  margin-left: 355px;
  margin-right: auto;
}

.player .mainContent .sideContent_right {
  width: 355px;
  position: absolute;
  right: -355px;
  background-color: #fff;
  transition: right 0.5s;
  top: 0;
  height: 100%;
  border-left: 1px solid #e4e5e6;
  border-bottom: 1px solid #e4e5e6;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 100;
}

.player .mainContent .sideContent_right.active {
  right: 0;
}

.player .mainContent .sideContent_right .topTitle {
  position: relative;
  z-index: 2;
  border: 1px solid #e4e5e6;
  border-left: none;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  background-color: #f9f9f9;
}

.player .mainContent .sideContent_right .topTitle .closeEventListBtn {
  position: absolute;
  top: 12px;
  left: 8px;
}

.player
  .mainContent
  .sideContent_right
  .topTitle
  .closeEventListBtn
  .iconCloseList {
  width: 21px;
  transform: rotate(180deg);
}

.player .mainContent .sideContent_right .topTitle .closeEvaBtn {
  position: absolute;
  top: 0px;
  left: 8px;
}

.player .mainContent .sideContent_right .topTitle .closeEvaBtn .iconCloseList {
  width: 21px;
  line-height: 23px;
  transform: rotate(180deg);
}

.player .mainContent .sideContent_right .topTitle .slideEventListBtn span {
  display: inline-block;
  vertical-align: middle;
  line-height: 48px;
}

.player .mainContent .sideContent_right .topTitle .slideEventListBtn i {
  display: none;
  vertical-align: middle;
  width: 10px;
  height: 23px;
}

.player
  .mainContent
  .sideContent_right
  .topTitle
  .slideEventListBtn
  i.iconArrowB {
  display: inline-block;
}

.player
  .mainContent
  .sideContent_right
  .topTitle
  .slideEventListBtn
  i.iconArrowT {
  display: none;
}

.player
  .mainContent
  .sideContent_right
  .topTitle
  .slideEventListBtn.active
  i.iconArrowB {
  display: none;
}

.player
  .mainContent
  .sideContent_right
  .topTitle
  .slideEventListBtn.active
  i.iconArrowT {
  display: inline-block;
}

.player .mainContent .sideContent_right .senseFilterBox {
  z-index: 1;
  position: absolute;
  left: 0;
  top: -922px;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #e4e5e6;
  transition: top 0.5s;
  height: 500px;
}

.player .mainContent .sideContent_right .senseFilterBox.active {
  top: 50px;
}

.player .mainContent .sideContent_right .senseFilterBox .senseFilter {
  display: block;
  padding: 10px 3px;
  text-align: left;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  line-height: 28px;
}

.player .mainContent .sideContent_right .senseFilterBox .senseFilter.allBtn {
  text-align: center;
}

.player .mainContent .sideContent_right .senseFilterBox .senseFilter i,
.player .mainContent .sideContent_right .senseFilterBox .senseFilter span {
  display: inline-block;
  vertical-align: middle;
}

.player .mainContent .sideContent_right .senseFilterBox .senseFilter span {
  max-width: 180px;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  overflow: hidden;
  width: calc(100% - 36px);
}

.player .mainContent .sideContent_right .senseFilterBox .senseFilter i {
  width: 28px;
  margin-right: 8px;
  text-align: center;
  line-height: 0;
}

.player .mainContent .sideContent_right .senseFilterBox .senseFilter i svg {
  width: 18px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconAudio
  svg {
  width: 28px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconMissingobject
  svg {
  width: 24px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconFence
  svg {
  width: 20px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconVehicle
  svg {
  width: 23px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconPeet
  svg {
  width: 19px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconInfantcry
  svg {
  width: 21px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconKnownperson
  svg {
  width: 17px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconUnknownperson
  svg {
  width: 17px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconHuman
  svg {
  width: 17px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconBaby
  svg {
  width: 26px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconBabyFaceNotDetected
  svg {
  width: 26px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconHumantracking
  svg {
  width: 23px;
}

.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconDangerous
  svg {
  width: 27px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconPetSound
  svg {
  width: 23px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconPetTracking
  svg {
  width: 23px;
  height: 23px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconPetTracking
  .st0,
  .player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconPetTracking
  .st1 {
  fill: #50493a;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconAbnormalSound
  svg {
  width: 23px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconScreaming{
  margin-top: -6px;
}
.player
  .mainContent
  .sideContent_right
  .senseFilterBox
  .senseFilter
  .iconScreaming
  svg {
  width: 19px;
}
.player .mainContent .sideContent_right .eventInnerScroll {
  overflow-y: auto;
  height: calc(100% - 50px);
}

.player .mainContent .sideContent_right .mCSB_container {
  margin-right: 10px;
}
.player .mainContent .sideContent_right .mCSB_container.mCS_no_scrollbar {
  margin-right: 0;
}
.player .mainContent .sideContent_right .eventInner {
  padding: 0 10px;
  font-size: 0;
}

.player .mainContent .sideContent_right .eventInner .event {
  border-bottom: 1px solid #e4e5e6;
  cursor: pointer;
}
.player .mainContent .sideContent_right .eventInner .event.play{
  position: relative;
}
.player .mainContent .sideContent_right .eventInner .event.play::after{
  position: absolute;
  width: 20px;
  height: 20px;
  overflow: hidden;
  right:0;
  top:50%;
  margin-top: -10px;
  content: "";
  background: url(../../images/plays.png) no-repeat top center;
  background-size: 20px auto;
}
.player .mainContent .sideContent_right .eventInner .event.play .eventInfo .name{
  color: #05b2d2;
}
.player .mainContent .sideContent_right .eventInner .event.play .cameraImg{
  position: relative;
  overflow: hidden;
}
.player .mainContent .sideContent_right .eventInner .event.play .cameraImg::after{
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  content: "";
  left:0;
  top:0;
}
.player .mainContent .sideContent_right .eventInner .event .cameraImg .text{
  display: none;
}
.player .mainContent .sideContent_right .eventInner .event.play .cameraImg .text{
  font-size:12px;
  color:#fff;
  display: flex;
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  box-sizing: border-box;
  line-height: 1.2;
}
.player .mainContent .sideContent_right .eventInner .event:last-child {
  border-bottom: none;
}

.player .mainContent .sideContent_right .eventInner .event .cameraImg {
  display: inline-flex;
  vertical-align: middle;
  width: calc(100vw * 0.19 * 0.3 - 5px);
  height: calc((100vw * 0.19 * 0.3 - 5px) / 99 * 54);
  max-width: 99px;
  max-height: 54px;
  background-color: #000;
  justify-content: center;
  align-items: center;
}

.player .mainContent .sideContent_right .eventInner .event .senseIcon {
  padding-left: 5px;
  display: inline-block;
  vertical-align: middle;
}

.player .mainContent .sideContent_right .eventInner .event .senseIcon i {
  width: 20px;
}
.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconHuman {
  margin-left: 3px;
  margin-right: -3px;
}

.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconDangerous {
  width: 32px;
  margin-left: -5px;
  margin-right: -7px;
}
.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconBaby {
  width: 29px;
  margin-right: -5px;
  margin-left: -4px;
}
.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconBabyFaceNotDetected {
  width: 29px;
  margin-right: -5px;
  margin-left: -4px;
}
.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconAbnormalSound svg{
    width: 25px;
    margin-left: -1px;
}
.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconPetSound svg{
    width: 23px;
}
.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .senseIcon
  i.iconScreaming {
    margin-top: -3px;
}
.player .mainContent .sideContent_right .eventInner .event .senseIcon i.iconPetTracking svg {
    width: 27px;
    margin-left: -1px;
}
.player .mainContent .sideContent_right .eventInner .event .eventInfo {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 30px - (100vw * 0.19 * 0.3 - 10px));
  padding: 10px 0 10px 10px;
  box-sizing: border-box;
}

.player .mainContent .sideContent_right .eventInner .event .eventInfo .name {
  font-weight: bold;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  overflow: hidden;
  /* height: 20px */
}

.player
  .mainContent
  .sideContent_right
  .eventInner
  .event
  .eventInfo
  .senseText {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.5;
}

.player .mainContent .sideContent_right .eventInner .event .eventInfo .time {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 16px;
  line-height: 1.3;
}

.player .mainContent .sideContent_right.sideContent_right_eva {
  background-color: #f9f9f9;
}

.player .mainContent .sideContent_right.sideContent_right_eva .topTitle {
  line-height: 48px;
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner {
  overflow-y: auto;
  height: calc(100% - 42px);
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox {
  text-align: center;
  position: relative;
  margin: 10% 0;
  user-select: none;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .evaMoveBtn {
  cursor: pointer;
  width: 18px;
  height: 18px;
  background-color: #00b1d2;
  border-radius: 100%;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox {
  width: 210px;
  height: 210px;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  background-color: #eeeeee;
  margin: 0 auto;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector {
  transform-origin: 100% 100%;
  background-color: #eeeeee;
  width: 105px;
  height: 105px;
  cursor: pointer;
  position: absolute;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector::before {
  position: absolute;
  content: "";
  width: 45px;
  height: 1px;
  left:10px;
  bottom:0;
  background-color: #c9c9c9;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector
  .triangle {
  border-width: 12px;
  border-color: transparent transparent #00b1d2 transparent;
  border-style: solid;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -18px;
  margin-left: -18px;
  transform: rotate(-45deg);
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector:hover{
  background-color: #cbeef5;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector:hover
  .triangle {
  border-color: transparent transparent #00b1d2 transparent;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector.disabled{
    pointer-events: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .sector.disabled
  .triangle {
  border-color: transparent transparent #c9c9c9 transparent;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle {
  position: absolute;
  background-color: #fff;
  width: 84px;
  height: 84px;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  margin-left: -42px;
  margin-top: -42px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle
  a {
  display: block;
  width: 84px;
  height: 84px;
  text-align: center;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle
  a::before {
  content: "";
  position: relative;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle
  a
  i {
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .coordinateBox
  .innerBox
  .circle
  a:hover
  .iconHome2
  path {
  fill: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn {
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn::before {
  width: calc(90% - 65px);
  position: absolute;
  z-index: 0;
  left: calc(10% + 20px);
  top: 50%;
  content: "";
  margin-top: -2px;
  height: 5px;
  background-color: #d2d3d3;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  background-color: #fff;
  border: 5px solid #d2d3d3;
  padding: 1px 0 0 1px;
  position: relative;
  z-index: 5;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn
  i {
  vertical-align: middle;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn
  i.iconHome2 {
  width: 28px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn
  i.iconPause2 {
  width: 18px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn
  i.iconPreset {
  width: 28px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn
  i.iconPetTracking svg {
  width: 30px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn
  i.iconBaby
  .st0 {
  fill: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn:hover
  i
  [class*="st"] {
  fill: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn.active {
  background-color: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn.active.disabled {
  background-color: #d2d3d3;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn.active
  i
  [class*="st"] {
  fill: #fff!important;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn.disabled {
  cursor: not-allowed;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaControlBoxBtn
  .evaControlBtn.disabled
  i
  [class*="st"] {
  fill: #d2d3d3;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox {
  padding: 0 5%;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetTitle {
  text-align: center;
  margin-bottom: 5px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetTitle
  .iconPresetPos {
  width: 13px;
  vertical-align: middle;
  margin-right: 5px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetTitle
  .text {
  display: inline-block;
  vertical-align: middle;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner {
  padding: 5px 10px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset {
  margin: 20px 0 0;
  font-size: 0;
  position: relative;
  height: 33px;
  padding: 7px 36px;
  border-bottom: 1px solid #888888;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset:last-child
  .presetInput {
  border-bottom: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .num {
  text-align: center;
  width: 27px;
  height: 27px;
  line-height: 27px;
  border-radius: 100%;
  background-color: #fff;
  border: 3px solid #d2d3d3;
  color: #00b1d2;
  position: absolute;
  left: 0;
  top: 7px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .num.disabled {
  color: #d2d3d3;
  pointer-events: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .num:hover {
  border-color: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .num:active {
  border-color: #00b1d2;
  color: #fff;
  background-color: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .presetInput {
  display: block;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .presetInput
  input {
  padding: 0 5px;
  color: #888;
  outline: none;
  height: 29px;
  width: 100%;
  color: #00b1d2;
  font-size: 14px;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .presetInput
  input:focus {
  outline: none;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .presetInput
  input:read-only {
  background-color: #f9f9f9;
  border-color: transparent;
}

.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .btnEdit {
  position: absolute;
  right: 0;
  top: 14px;
  width: 22px;
  height: 22px;
  display: block;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .btnEdit
  .iconEdit {
  width: 22px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .btnEdit:hover
  .iconEdit
  .st0,
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .btnEdit:hover
  .iconEdit
  .st1 {
  fill: #17a7c5;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .btnEdit.disabled{
  pointer-events: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .presetBox
  .presetInner
  .preset
  .btnEdit.disabled
  .iconEdit 
  [class*="st"]{
  fill: #d2d3d3;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaSettingBox
  .settingName {
  font-size: 16px;
  font-weight: bold;
  padding: 15px calc(5% + 10px);
  margin-top: 20px;
  color: #00b1d2;
  position: relative;
  cursor: pointer;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaSettingBox
  .settingName::after {
  width: 10px;
  height: 10px;
  border-top: 2px solid #00b1d2;
  border-left: 2px solid #00b1d2;
  content: "";
  position: absolute;
  right: calc(5% + 15px);
  transform: rotate(-135deg);
  top: 14px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaSettingBox.active
  .settingBlock {
  display: block;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .evaSettingBox.active
  .settingName::after {
  top: 21px;
  transform: rotate(45deg);
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock {
  background-color: #fff;
  padding: 20px calc(5% + 10px);
  border-top: 1px solid #e1e1e1;
  display: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .title {
  color: #00b1d2;
  position: relative;
  display: flex;
  align-items: center;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .title::after {
  position: absolute;
  width: 80%;
  height: 1px;
  content: "";
  background-color: #00b1d2;
  top: 50%;
  right: 0;
  z-index: 1;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .title
  .icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  background-color: #fff;
  position: relative;
  z-index: 2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .title
  .text {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  background-color: #fff;
  padding: 2px 15px 2px 8px;
  color: #00b1d2;
  position: relative;
  z-index: 2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .control {
  padding: 10px 0;
  position: relative;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .speedControl::before {
  width: 90%;
  position: absolute;
  z-index: 0;
  left: 5%;
  top: 50%;
  content: "";
  margin-top: -2px;
  height: 5px;
  background-color: #d2d3d3;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .speedControl
  .speedNum {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 5px solid #d2d3d3;
  font-weight: bold;
  border-radius: 100%;
  line-height: 20px;
  text-align: center;
  background-color: #fff;
  position: relative;
  z-index: 2;
  cursor: pointer;
  font-size: 14px;
  color: #666666;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .speedControl
  .speedNum:nth-child(2) {
  margin: 0 calc(50% - 45px);
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .speedControl
  .speedNum.active {
  background-color: #00b1d2;
  color: #fff;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .speedControl
  .speedNum:not(.active):hover {
  color: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl {
  font-size: 14px;
  color: #888888;
  line-height: 1.4;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .info {
  font-size: 12px;
  color: #707070;
  padding-left: 30px;
  position: relative;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .info::before {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  left: 3px;
  top: 2px;
  background: url(../../images/new_player/info.svg) no-repeat center center;
  background-size: contain;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  p {
  margin: 10px 0;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .radio-row {
  padding-left: 30px;
  display: block;
  margin: 10px 0;
  position: relative;
  color: #888888;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .radio-row::before {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid #d2d2d2;
  left: 0;
  top: 1px;
  z-index: 0;
  content: "";
  border-radius: 100%;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .radio-row::after {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  left: 3px;
  top: 4px;
  z-index: 1;
  content: "";
  border-radius: 100%;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  input[type="radio"] {
  display: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  input[type="radio"]:checked
  + .radio-row::before {
  background-color: #00b1d2;
  border-color: #00b1d2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  input[type="radio"]:disabled
  + .radio-row::before {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  input[type="radio"]:disabled
  + .radio-row::after {
  border-color: #f5f5f5;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  input[type="radio"]:disabled:checked
  + .radio-row::before {
  background-color: #ddd;
  border-color: #ddd;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  input[type="radio"]:disabled:checked
  + .radio-row::after {
  border-color: #fff;
}.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl .trackingBlock{
    padding: 5px 0 0;
  }
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock {
  padding-right: 45px;
  position: relative;
  line-height: 21px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock .icon{
    width: 24px;
    height: 24px;
    vertical-align: top;
    margin-top: -3px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch {
  position: absolute;
  right: 0;
  top: calc(50% - 10px);
  display: block;
  width: 40px;
  height: 20px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  z-index: 5;
  cursor: pointer;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  label {
  width: 24px;
  height: 15px;
  border-radius: 50px;
  background-color: #00b1d2;
  position: absolute;
  display: none;
  right: 7px;
  top: calc(50% - 7px);
  box-shadow: 0 1px 2px rgba(24, 136, 180, 0.8) inset;
  cursor: pointer;
  z-index: 1;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  label.close {
  background-color: #cccccc;
  box-shadow: 0 1px 2px rgba(150, 150, 150, 1) inset;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  label::after {
  width: 18px;
  height: 18px;
  border-radius: 100px;
  background-color: #f2f2f1;
  position: absolute;
  right: -8px;
  top: -2px;
  content: "";
  box-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
  z-index: 2;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  label.close::after {
  right: auto;
  left: -8px;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  input[type="radio"]:checked {
  display: none;
}
.player
  .mainContent
  .sideContent_right.sideContent_right_eva
  .evaInner
  .settingBlock
  .box
  .trackingControl
  .switchTrackingBlock
  .trackingSwitch
  input[type="radio"]:checked
  + label {
  display: block;
}
/*
.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox {
    padding: 25px 15px;
    font-size: 0
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedIcon {
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    margin-right: 10px;
    text-align: center
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedIcon .text {
    margin: 0 -15px;
    display: block;
    font-size: 11px;
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 50px);
    position: relative;
    height: 20px
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl #slider {
    border-color: #ccc
}
.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl #slider .ui-slider-range {
    height: 3px;
    background-color: #00b1d2;
    top: -1.5px;
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl #slider .ui-slider-handle {
    cursor: pointer;
    height: 10px;
    width: 10px;
    top: -7px;
    margin-left: -6px;
    border-radius: 100%;
    border-color: #00b1d2;
    border-width: 1.5px
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl #slider .ui-slider-handle:focus {
    outline: none
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl .speedNum {
    position: absolute;
    top: -4px
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl .speedNum:before {
    content: "";
    display: block;
    width: 2px;
    height: 10px;
    background-color: #ccc;
    margin: 0 auto 8px
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl .speedNum.speedNum1 {
    left: -2px;
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl .speedNum.speedNum2 {
    left: 50%;
    margin-left: -3px
}

.player .mainContent .sideContent_right.sideContent_right_eva .evaInner .speedBox .speedControl .speedNum.speedNum3 {
    right: -4px
}
*/
.player .filmLB {
  display: none;
}

video.testXXX {
  width: 129.5px !important;
  height: 72.5px !important;
}

#mkfilm,
#evaNameEdit {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: transparent;
}
#mkfilm::before,
#evaNameEdit::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
#mkfilm::after,
#evaNameEdit::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
#mkfilm .newlightbox,
#evaNameEdit .newlightbox {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  position: relative;
  z-index: 3;
}

#mkfilm .newlightbox{
  width: 980px;
}
#mkfilm .newlightbox .tabs-content{
  width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}
#mkfilm .newlightbox .tabs-content .tabs-block.mkfilm-normal{
  max-width: 600px;
  margin: 0 auto;
}
#mkfilm .newlightbox .radio-item{
  padding: 0;
}
#mkfilm .newlightbox .radio-item label{
  display: block;
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  padding: 10px 10px 10px 34px;
  cursor: pointer;
}
#mkfilm .newlightbox .radiobox:not(.exportbox) .radio-item label:hover{
  background-color: #F9F9F9;
}
#mkfilm .newlightbox .radio-item label::after{
  top:10px;
  left:10px;
}
#mkfilm .newlightbox .check-item label::after{
  top:2.5px;
}
#mkfilm .newlightbox .btn-question{
  vertical-align: top;
}
#mkfilm .item-row{
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
#mkfilm .item-row .name{
  width: 100%;
}
#mkfilm .item-col{
  width: calc(50% - 5px);
}
#mkfilm .exportbox{
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  gap: 0;
}
#mkfilm .exportbox.pay{
  background-color: #EEFAFF;
  border: 2px solid #00B1D2;
  margin-bottom: 10px;
}
#mkfilm .exportbox .item-col{
  width: 20%;
}
#mkfilm .exportbox .radio-item label{
  border: none;
  padding-right: 0;
}
#mkfilm .refCurrency-row{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
#mkfilm .refCurrency-row .refCurrency .tooltip{
  color:#00B1D2;
  position: relative;
  padding-left: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin-right: 10px;
  text-align: left;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1;
}
#mkfilm .refCurrency-row .refCurrency .tooltip::before {
  width: 15px;
  height: 15px;
  background: url(../../images/new_player/icon_info.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  content: "";
  left: 0;
  top: -0.15em;
}
#mkfilm .refCurrency .tooltip .tooltipInner {
  position: absolute;
  background-color: rgba(0, 0, 0, .6);
  border-radius: 5px;
  padding: 2px 10px 0;
  color: #fff;
  width: 230px;
  bottom: calc(100% + 10px);
  left: -10px;
  display: none;
  z-index: 10;
  line-height: 1.4;
}
#mkfilm .refCurrency .tooltip .tooltipInner::after {
  position: absolute;
  content: "";
  border-style: solid;
  border-color: rgba(0, 0, 0, .6) transparent transparent transparent;
  border-width: 8px;
  left: 9px;
  bottom: -16px;
}
#mkfilm .refCurrency .tooltip:hover .tooltipInner {
  display: block;
}
#mkfilm .refCurrency .ref {
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
}
#mkfilm .refPrice {
  text-align: right;
}
#mkfilm .refPrice select {
  margin-left: 5px;
}
#mkfilm .item input[type="text"]{
  border:1px solid #f4f4f4;
  margin-bottom: 8px;
}
#mkfilm .message-error{
  color:#F54336;
  font-size: 12px;
  line-height: 1.4;
  display: none;
}
#mkfilm .message-error::before{
  content: "";
  display: inline-block;
  background: url(../../images/new_player/icon_error.svg) no-repeat center center;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: top;
}
#mkfilm .item .item-col.error input[type="text"]{
  border-color: #F54336;
  color: #F54336;
}
#mkfilm .item .item-col.error .message-error{
  display: block;
}
#mkfilm .btn-block{
  border-top: none;
  padding-top: 0;
  text-align: right;
}
#mkfilm .btn-block.text-center{
  text-align: center;
}
#mkfilm .btn-block .btn{
  font-size: 16px;
  padding: 12px 15px 10px;
  border-radius: 5px;
  text-align: center;
  min-width: 190px;
  margin: 0;
  border:2px solid #00B1D2;
  line-height: 1;
  display: inline-block;
  vertical-align: top;
  width: auto;
  font-weight: bolder;
}
#mkfilm .btn-block .btn+.btn{
  margin-left: 20px;
}
#mkfilm .btn-block .btn:hover{
  opacity: 0.7;
}
#mkfilm .btn-block .btn.btn-gray{
  background-color: transparent;
  border-color: #C5C5C5;
  color:#C5C5C5;
}
#mkfilm .btn-block .btn.btn-blue{
  background-color: #00B1D2;
  color:#fff;
}
#mkfilm .btn-block .btn.btn-red{
  background-color: #F54336;
  border-color: #F54336;
  color:#fff;
}
#mkfilm .mkfilm-timeLapse .timeLapse-block .box span{
  display: inline-block;
  vertical-align: middle;
}
#mkfilm .mkfilm-timeLapse .timeLapse-block .box span:first-child{
  margin-right: 10px;
}
#mkfilm .mkfilm-timeLapse .timeLapse-block .box + .box{
  margin-top: 6px;
}
.mkfilm-timeLapse-step{
  display: none;
  width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}
.mkfilm-timeLapse-step.active{
  display: block;
}
.mkfilm-timeLapse-step .planName{
  display: none;
}
.mkfilm-timeLapse-step .planName.active{
  display: inline;
}
.mkfilm-timeLapse-step .step-block{
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: 10px auto 20px;
}
.mkfilm-timeLapse-step .step-block::before{
  content: "";
  position: absolute;
  left:10px;
  height: 10px;
  width: calc(100% - 20px);
  background-color: #c7c7c7;
  z-index: 1;
  top:50%;
  transform: translateY(-50%);
}
.mkfilm-timeLapse-step .step-block::after{
  content: "";
  position: absolute;
  left:10px;
  height: 10px;
  width: 0;
  background-color: #00b1d2;
  z-index: 2;
  top:50%;
  transform: translateY(-50%);
}
.mkfilm-timeLapse-step .step-block.step2::after{
  width: calc((100% - 20px) / 3);
}
.mkfilm-timeLapse-step .step-block.step3::after{
  width: calc((100% - 20px) * 0.67);
}
.mkfilm-timeLapse-step .step-block.step4::after{
  width: calc(100% - 20px);
}
.mkfilm-timeLapse-step .step-block .step{
  width: 36px;
  height: 36px;
  border-radius: 100%;
  border: 3px solid #00b1d2;
  background-color:#00b1d2;
  text-align: center;
  line-height: 30px;
  color:#fff;
  font-size: 20px;
  font-weight: bold;
  position: relative;
  z-index: 5;
}
.mkfilm-timeLapse-step .step-block .step.active{
  background-color: #fff;
  color:#00b1d2;
}
.mkfilm-timeLapse-step .step-block .step.active ~ .step{
  border-color: #c7c7c7;
  background-color: #fff;
  color:#c7c7c7;
}
.mkfilm-timeLapse-step b{
  font-weight: bold;
}
.mkfilm-timeLapse-step .planBox .title{
  text-align: center;
  font-size: 16px;
  margin-bottom: 20px;
  font-weight: bold;
  line-height: 1.4;
}
.mkfilm-timeLapse-step .planBox .sub-title{
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.mkfilm-timeLapse-step .plan-box .plan-name{
  font-size:16px;
  padding: 5px 20px;
  background-color: #EFFAFC;
  font-weight: bold;
  color:#000;
}
.mkfilm-timeLapse-step .plan-box .plan-content{
  padding: 12px 0 20px 20px;
  font-size: 14px;
}
.mkfilm-timeLapse-step .plan-box .plan-content p+p{
  margin-top: 10px;
}
.mkfilm-timeLapse-step .plan-box .plan-content.coupon-content{
  text-align: right;
  padding-top: 0;
}
.mkfilm-timeLapse-step .plan-box .plan-content.coupon-content a{
  color:#00B1D2;
  text-decoration: none;
}
.mkfilm-timeLapse-step .plan-box .plan-content.coupon-content a:hover{
  text-decoration: underline;
}
.mkfilm-timeLapse-step .coupon-block{
  display: none;
}
.mkfilm-timeLapse-step .coupon-block.active{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mkfilm-timeLapse-step #coupon_input {
  height: 30px;
  width: 150px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #D9D9D9;
  color: #666666;
  padding: 5px 10px;
  line-height: 19px;
}
.mkfilm-timeLapse-step .btn_coupper{
  height: 30px;
  min-width: 130px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #05b2d2;
  padding: 5px 10px;
  line-height: 19px;
  color: #05b2d2;
  text-align: center;
  margin-left: 5px;
  cursor: pointer;
}
.mkfilm-timeLapse-step .btn_coupper:hover {
  background-color: #05b2d2;
  color:#fff;
}
.mkfilm-timeLapse-step #coupon_cancel{
  height: 30px;
  min-width: 130px;
  font-size: 14px;
  border-radius: 5px;
  border: 1px solid #f48b38;
  padding: 5px 10px;
  line-height: 19px;
  color:#f48b38;
  text-align: center;
  margin-left: 5px;
  cursor: pointer;
}
.mkfilm-timeLapse-step #coupon_cancel:hover {
  background-color: #f48b38;
  color:#fff;
}
.mkfilm-timeLapse-step .coupon_msg_c {
  display:none;
  margin-right: 10px;
  color: red;
  font-size: 14px;
}
.mkfilm-timeLapse-step .btn-block {
  display: flex;
  justify-content: space-between;
}
.mkfilm-timeLapse-step .btn-block .btn{
  margin: 0!important;
}
.mkfilm-timeLapse-step .planBox .creditBox {
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  font-size: 14px;
}
.mkfilm-timeLapse-step .planBox .creditBox select,
.mkfilm-timeLapse-step .planBox .creditBox input {
  border: 1px solid #D9D9D9;
  width: 100%;
  height: 40px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 5px;
  line-height: 20px;
}
.mkfilm-timeLapse-step .planBox .creditBox select{
  padding-right: 30px !important;
  -webkit-appearance: none;
  background: #fff url(../../images/upgrade/icon_select.svg) no-repeat calc(100% - 10px) center;
  background-size: 10px auto;
}
.mkfilm-timeLapse-step .planBox .creditBox .tr {
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
}
.mkfilm-timeLapse-step .planBox .creditBox .tr .td{
  margin: 5px 0;
  width: 100%;
}
.mkfilm-timeLapse-step .planBox .creditBox .tr .td.error p{
  color: red;
}
.mkfilm-timeLapse-step .planBox .creditBox .tr .td.error input,
.mkfilm-timeLapse-step .planBox .creditBox .tr .td.error select{
  border-color: red;
}
.mkfilm-timeLapse-step .planBox .creditBox .tr .td p{
  color:#A4A4A4;
  margin-bottom: 3px;
}
.mkfilm-timeLapse-step .planBox .creditBox .tr .td.td2{
  width: calc(50% - 5px);
}

.mkfilm-timeLapse-step .planBox .creditBox .left {
  width: 50%;
  padding-right: 40px;
  border-right: 1px solid #ececec;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr2 .td #cardtype {
  display: inline-block;
  vertical-align: middle;
  width: calc(50% - 16px);
  margin-right: 14px;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr .td span {
  margin: 0 10px;
}

.mkfilm-timeLapse-step .planBox .creditBox .right {
  width: 50%;
  padding-left: 40px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.mkfilm-timeLapse-step .planBox .creditBox .right .tr {
  margin: 5px 0;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr4 .td{
  display: flex;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr4 .td .td {
  width: 63px;
  text-align: center;
  font-size: 16px;
  display: block;
  margin: 0;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr4 .td .td.td1 {
  width: 24px;
  line-height: 40px;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr4 .td .td a{
  width: 40px;
  display: block;
  margin-left: 10px;
  margin-top: 9px;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr4 .td .td a img{
  max-width: 100%;
}
.mkfilm-timeLapse-step .planBox .creditBox .left .tr.tr4 .td .td p{
  font-size: 14px;
  text-align: left;
  line-height: initial;
}
.mkfilm-timeLapse-step #third_party_verified{
  float: none;
  padding: 0;
  margin-top: -6px;
}
.mkfilm-timeLapse-step #third_party_verified a {
  width: 40px;
  height: 23px;
  margin-left: 5px;
  vertical-align: top;
}
.mkfilm-timeLapse-step .planBox .step4Box{
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.mkfilm-timeLapse-step .planBox .step4Box .image {
  width: 300px;
  margin: 20px auto 10px;
}
.mkfilm-timeLapse-step .planBox .step4Box p{
  line-height: 1.6;
}
.mkfilm-timeLapse-step .step4Box .btn-block{
  justify-content: center;
  margin-top: 30px;
}
.mkfilm-timeLapse-step .step4Box .btn-block .btn{
  width: 300px;
}
.mkfilm-timeLapse-step .stepLoading {
  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: 600px;
  margin: 0 auto;
  height: 500px;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
.mkfilm-timeLapse-step .stepLoading p{
  line-height: 1.6;
}
.mkfilm-timeLapse-step .stepLoading .loading-image {
  width: 120px;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
}
.mkfilm-timeLapse-step .stepLoading .loading-image .lock-icon {
  width: 39px;
}
.mkfilm-timeLapse-step .stepLoading .loading-image .loading-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("../../images/box_upgrade/loading.png");
  background-size: contain;
  -webkit-transform: rotate(0);
  transform: rotate(0);
  -webkit-animation: loading-bar-rotate 1.2s infinite linear;
  animation: loading-bar-rotate 1.2s infinite linear;
}
.select2-container--default .select2-selection--single{
  border: none;
  border-radius: 4px;
  border: 1px solid #808080;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border:none;
  width: 12px;
  height: 10px;
  background: url(../../images/upgrade/icon_select_arrow.svg) no-repeat center center;
  background-size: contain;
  margin-left: -6px;
  margin-top: -5px;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  transform: rotate(180deg);
  margin-top: -3px;
}
.select2-container--open .select2-dropdown--below{
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border: none;
  border-top: 3px solid #fff;
  background-color: #ededed;
}
.select2-container--default .select2-results__option--selected{
  background-color: #2ca7bf!important;
  color: #fff!important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: rgba(44, 167, 191, 0.2);
  color: inherit;
}
.select2-results__option--selectable{
  border-top: 1px solid #fff;
  padding: 8px;
}
.select2-container .select2-selection--single{
  height: 36px;
}
.select2-container .select2-selection--single .select2-selection__rendered{
  padding-right: 25px;
  font-weight: bold;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 39px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
  width: 30px;
  top:5px;
}
.select2{
  font-size: 16px;
  width: 100%!important;
}
.select2 ~ .select2 {
  margin-left: 10px;
}
.select2-results{
  max-height: 200px;
  font-size: 16px;
  font-weight: bold;
}
.select2-results .select2-results__option span{
  display: block;
}
.select2-results .select2-results__option .sm{
  font-size: 12px;
}
.select2-results .select2-results__option .txt{
  font-weight: normal;
}
.select2-results .mCSB_scrollTools .mCSB_draggerContainer{
  top:5px;
  bottom:5px;
}
.select2-results .mCSB_container{
  margin-right: 0;
}
.select2-results .mCSB_scrollTools .mCSB_draggerRail{
  background-color: transparent;
}
.select2-results .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
  background-color: #fff;
  width: 6px;
}
.country-select .select2-container .select2-selection--single{
  height: 28px;
}
.country-select .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 28px;
}
.country-select .select2-container--default .select2-selection--single .select2-selection__arrow b{
  width: 8px;
  height: 6px;
  margin-left: -4px;
  margin-top: -3px;
}
.country-select .select2-container--default .select2-selection--single .select2-selection__arrow{
  width: 26px;
}
.country-select .select2-container--default .select2-selection--single .select2-selection__arrow{
  top:1px;
}
.country-select .select2{
  font-size: 12px;
}
.country-select .select2-results{
  font-size: 12px;
}
.cvver-wrap{
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 10000001;
  display: none;
}
.cvver-wrap.active{
  display: flex;
  justify-content: center;
  align-items: center;
}
.cvver-wrap .cvver-inner{
  position: relative;
}
.cvver-wrap .cvver-inner .cvver-close{
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  background: url(../../js/fancybox_sprite.png) no-repeat center top;
}


#evaNameEdit .newlightbox {
  padding: 15px;
}
#evaNameEdit .newlightbox .video {
  height: 300px;
  background-color: #f9f9f9;
  margin-bottom: 20px;
}
#evaNameEdit .newlightbox .point-name input {
  width: 100%;
  height: 40px;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 2px;
  font-size: 16px;
}
#evaNameEdit .newlightbox .btn-block {
  margin-top: 15px;
}
#evaNameEdit .newlightbox .btn-block::after {
  content: "";
  display: block;
  clear: both;
}
#evaNameEdit .newlightbox .btn-block .btn {
  font-size: 16px;
  border-radius: 2px;
  padding: 3px 10px 0;
  min-width: 100px;
  margin-left: 15px;
  text-align: center;
  line-height: 35px;
}
#evaNameEdit .newlightbox .btn-block .btn:first-child {
  margin-left: 0;
}
#evaNameEdit .newlightbox .top-block {
  text-align: right;
  margin-bottom: 10px;
}
#evaNameEdit .newlightbox .top-block .btn-close {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
}
#evaNameEdit .newlightbox .top-block .btn-close span {
  display: block;
  height: 1px;
  width: 100%;
  background-color: #aeaeae;
  position: absolute;
  left: 0;
  top: 10px;
}
#evaNameEdit .newlightbox .top-block .btn-close span:nth-child(1) {
  transform: rotate(45deg);
  transform-origin: center center;
}
#evaNameEdit .newlightbox .top-block .btn-close span:nth-child(2) {
  transform: rotate(-45deg);
  transform-origin: center center;
}
#evaNameEdit .newlightbox .top-block .btn-close:hover span {
  background-color: #00b1d2;
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background-color: #00b1d2;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
  background-color: #00b1d2;
}

.aBN {
  box-sizing: border-box;
  padding: 10px;
  height: 120px;
}

.aBN:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.aBN#banner_solo:before {
  display: none;
}

.aBN .title {
  width: 55%;
  box-sizing: border-box;
  vertical-align: middle;
  padding: 0;
}

.aBN#banner_solo .title {
  margin-bottom: 20px;
  display: block;
  width: auto;
  margin-top: 10px;
}

.aBN .title h2 {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 5px 0;
}

.aBN .title p {
  line-height: 1.5;
}

.aBN .aBN_btn {
  width: 45%;
  position: static;
  vertical-align: middle;
  font-size: 14px;
  text-align: right;
  top: auto;
  box-sizing: border-box;
}

.aBN .aBN_btn a {
  vertical-align: middle;
  padding: 12px;
  width: 245px;
  transition: all 0.3s;
}

.aBN .aBN_btn a:hover {
  background-color: #f48b38;
  color: #fff;
}

.aBN .aBN_btn .wire_btn1 {
  border-radius: 30px;
  color: #00b1d2;
  border: 2px solid #00b1d2;
  background-color: #fff;
}
.aBN .aBN_btn .wire_btn1:hover {
  background-color: #00b1d2;
  color: #fff;
}

.aBN .aBN_btn .wire_btn2 {
  border-radius: 30px;
  color: #ffffff;
  background-color: #ff0000;
  border: 2px solid #ff0000;
}

.aBN .aBN_btn .wire_btn2:hover {
  opacity: 0.7;
  background-color: #ff0000;
}

.aBN#banner_solo .btn-google {
  display: inline-block;
  width: 132px;
  height: 42px;
  margin: 0 20px;
  background-position: 0px top;
  background-image: url(../../images/tw/home/btn_google.jpg);
}

.aBN#banner_solo .btn-apple {
  display: inline-block;
  width: 132px;
  height: 42px;
  margin: 0 20px;
  background-position: 0px top;
  background-image: url(../../images/tw/home/btn_apple.jpg);
}

.aBN#banner_solo .btn-google:hover {
  background-position: 0px bottom;
}

.aBN#banner_solo .btn-apple:hover {
  background-position: 0px bottom;
}

.btn-event {
  border: 1px solid #05b2d2;
  color: #05b2d2;
  border-radius: 20px;
  transition: 0.5s all;
}

.btn-event:hover {
  background-color: #05b2d2;
  color: #fff;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .slickSelected {
  cursor: pointer;
  display: inline-block;
  width: 26px;
  height: 22px;
  line-height: 22px;
  background-color: #fff;
  border-radius: 3px;
  text-align: center;
  border: 1px solid #ccc;
  padding: 0 20px 0 5px;
  font-size: 14px;
  position: relative;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .slickSelected::after {
  content: "";
  border-style: solid;
  border-width: 5px 4px;
  border-color: #888 transparent transparent transparent;
  position: absolute;
  right: 7px;
  top: 8px;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .slickSelected:hover {
  box-shadow: 0 0 3px #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .slickSelected:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu {
  display: none;
  position: absolute;
  top: 25px;
  left: 0;
  box-shadow: 0 0 3px #ddd;
  background-color: #fff;
  z-index: 1000;
  text-align: center;
  width: 53px;
  padding: 10px 0;
  border-radius: 5px;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu.active {
  display: block;
}

.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu
  .hr {
  width: 100%;
  height: 1px;
  background-color: #888;
  margin: 8px 0;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu
  .subLink {
  font-size: 16px;
  color: #888;
  display: block;
  white-space: nowrap;
  padding: 8px 10px;
  cursor: pointer;
  line-height: 1;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu
  .subLink:hover {
  color: #00b1d2;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu
  .subLink
  .circle {
  display: inline-block;
  vertical-align: middle;
  width: 4px;
  height: 4px;
  background-color: #888;
  border-radius: 100%;
}
.player
  .mainContent
  .middleContent
  .topBar
  .right
  .topBarBtn.dividePage
  .subMenu
  .subLink:hover
  .circle {
  background-color: #00b1d2;
}
/* time_tools */
.time_tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0px;
  right: 240px;
  padding: 4px;
  width: 324px;
}
.time_tools.capsule {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  padding: 10px 20px;
  right: calc(50% - 130px);
  bottom: 40px;
  box-sizing: border-box;
  top: auto;
  width: 260px;
}

.time_tools .time_tools__item {
  margin: 0 5px;
  width: 22px;
  text-align: center;
}
.time_tools .time_tools__item#pbspeed {
  width: auto;
}
.time_tools .time_tools__item .icon {
  cursor: pointer;
  width: auto;
  position: relative;
  height: 22px;
}
.time_tools .time_tools__item .icon .time_tools_tips {
  position: absolute;
  top: 30px;
  line-height: 1.2;
  padding: 3px 5px;
  border-radius: 3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  display: none;
  left: 50%;
  white-space: nowrap;
}
.time_tools .time_tools__item .icon svg * {
  transition: fill 0.3s;
}
.time_tools .time_tools__item .icon.icon__arrow svg {
  margin-top: 3px;
}
.time_tools .time_tools__item .icon.icon__turn svg {
  height: 22px;
}
.time_tools .time_tools__item .icon svg .st0,
.time_tools .time_tools__item .icon:hover svg .st0 {
  fill: #888;
}
.time_tools .time_tools__item .icon svg .st1,
.time_tools.capsule .time_tools__item .icon svg .st1 {
  fill: #00b1d2;
}
.time_tools
  .time_tools__item
  .icon.icon__turn:not(.icon__turn--disabled):hover
  svg
  .st1,
.time_tools.capsule
  .time_tools__item
  .icon.icon__turn:not(.icon__turn--disabled):hover
  svg
  .st1,
.time_tools
  .time_tools__item
  .icon.icon__turn:not(.icon__turn--disabled):hover
  svg
  .st0,
.time_tools.capsule
  .time_tools__item
  .icon.icon__turn:not(.icon__turn--disabled):hover
  svg
  .st0 {
  fill: #00b1d2;
}
.time_tools .time_tools__item .icon__turn--disabled svg,
.time_tools .time_tools__item .icon__arrow--disabled svg,
.time_tools .time_tools__item .icon__turn--disabled svg .st1,
.time_tools .time_tools__item .icon__arrow--disabled svg .st1,
.time_tools .time_tools__item .icon__turn--disabled svg .st0,
.time_tools .time_tools__item .icon__arrow--disabled svg .st0,
.time_tools.capsule .time_tools__item .icon__turn--disabled svg,
.time_tools.capsule .time_tools__item .icon__arrow--disabled svg,
.time_tools.capsule .time_tools__item .icon__turn--disabled svg .st1,
.time_tools.capsule .time_tools__item .icon__arrow--disabled svg .st1,
.time_tools.capsule .time_tools__item .icon__turn--disabled svg .st0,
.time_tools.capsule .time_tools__item .icon__arrow--disabled svg .st0 {
  fill: #C8C8C8!important;
}
.time_tools .time_tools__item .icon.icon__arrow svg {
  height: 16px;
}
.time_tools .time_tools__item .icon.icon__arrow.icon__arrow--reverse {
  transform: rotate(180deg);
}
.time_tools .time_tools__item .icon.icon__arrow:hover svg .st1,
.time_tools.capsule .time_tools__item .icon.icon__arrow:hover svg .st1,
.time_tools .time_tools__item .icon.icon__arrow:hover svg .st0,
.time_tools.capsule .time_tools__item .icon.icon__arrow:hover svg .st0 {
  fill: #00b1d2;
}

.time_tools .time_tools__item .speed_value {
  width: 50px;
  line-height: 20px;
  background-color: #00b1d2;
  font-size: 14px;
  border-radius: 2px;
  color: #fff;
  text-align: center;
}

.time_tools.capsule .time_tools__item .icon.icon__arrow svg .st0, 
.time_tools.capsule .time_tools__item .icon.icon__turn svg .st0 {
  fill: #888;
}
.time_tools.capsule .time_tools__item .icon.icon__arrow svg .st1,
.time_tools.capsule .time_tools__item .icon.icon__turn svg .st1 {
  fill: #00b1d2;
}
.time_tools .time_tools__item .icon:hover .time_tools_tips {
  display: block;
}
.time_tools .time_tools__item .icon.icon__arrow--reverse .time_tools_tips {
  transform: rotate(180deg);
  bottom: auto;
  top: -30px;
}

.time_tools .time_tools__item .icon[class*="--disabled"] .time_tools_tips {
  display: none !important;
}

.zoomBox .icon{
  cursor: pointer;
  position: relative;
}
.zoomBox .icon .zoom_tools_tips {
  position: absolute;
  top: 30px;
  line-height: 1.2;
  padding: 3px 5px;
  border-radius: 3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
  display: none;
  left: 50%;
  white-space: nowrap;
}
.filmBottom .zoomBox .icon.iconZoomin .zoom_tools_tips {
    left: auto;
    right: -12px;
}
.zoomBox .icon:not(.icon-disabled):hover .zoom_tools_tips{
  display: block;
}
.zoomBox .icon.icon-disabled{
  cursor: not-allowed!important;
}
.zoomBox .icon.icon-disabled svg,
.zoomBox .icon.icon-disabled .st0,
.zoomBox .icon.icon-disabled .st1{
  fill: #C8C8C8!important;
}
.divideBlock .zoomBox .icon.icon-disabled svg,
.divideBlock .zoomBox .icon.icon-disabled .st0,
.divideBlock .zoomBox .icon.icon-disabled .st1{
  fill: #888!important;
}
/* playbar */

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock
  .playbar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  padding: 10px 20px;
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: 0.5s opacity;
}
.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide.divide12
  .divideBlock
  .playbar {
  padding: 10px;
}

.player
  .mainContent
  .middleContent
  .film
  .filmContent
  .divide
  .divideBlock.active
  .playbar {
  opacity: 1;
  pointer-events: auto;
}
.playbar .playbar__item {
  cursor: pointer;
  padding: 0 5px;
  margin: 0 5px;
}
.playbar .playbar__item.playbar__item--next {
  transform: rotate(180deg);
}
.playbar .playbar__item .icon__turn svg {
  height: 22px;
}

.playbar .playbar__item .icon__turn svg .cls-1 {
  fill: #eee;
}
.playbar .playbar__item .icon__turn svg .cls-2 {
  fill: rgba(0, 0, 0, 0.5);
}
.playbar .playbar__item .icon__arrow svg {
  height: 16px;
}
.playbar .playbar__item .icon__arrow svg .cls-1 {
  fill: none;
  stroke: #eee;
}
.playbar .playbar__item .icon__play svg {
  width: 20px;
  height: 22px;
}
.playbar .playbar__item .icon__play svg .cls-1 {
  fill: none;
  stroke: #eee;
}
.playbar .playbar__item .icon {
  width: auto;
}
.playbar .playbar__item:not(.playbar__item--disabled) .icon:hover svg .cls-1,
.playbar .playbar__item:not(.playbar__item--disabled) .icon:hover svg .cls-2 {
  fill: #00b1d2;
}
.playbar
  .playbar__item:not(.playbar__item--disabled)
  .icon__arrow:hover
  svg
  .cls-1 {
  stroke: #00b1d2;
}
.playbar
  .playbar__item:not(.playbar__item--disabled)
  .icon__play:hover
  svg
  .cls-1 {
  stroke: #00b1d2;
}
.playbar .playbar__item--disabled {
  cursor: not-allowed;
}
.playbar .playbar__item--disabled .icon__turn svg .cls-1 {
  fill: #888;
}
.playbar .playbar__item--disabled .icon__arrow svg .cls-1 {
  stroke: #888;
}

.alert-wrap .adbox{
  width: 620px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgb(5 27 44 / 6%), 0 2px 32px rgb(5 27 44 / 16%);
  margin: 15px auto 0;
  position: relative;
}
.alert-wrap .adbox .img img{
  width: 100%;
}
.alert-wrap .adbox .btn-block {
  margin: 0;
  width: 120px;
  padding: 20px;
  position: absolute;
  right:0;
  bottom:0;
}
.alert-wrap .adbox .btn{
  display: block;
  border-radius: 50px;
  padding: 1px 10px 1px 31px;
  color: #fff;
  text-decoration: none;
  position: relative;
  height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 11px;
  width: 100%;
  box-sizing: border-box;
  transition: opacity 0.3s;
}
.alert-wrap .adbox .btn:hover{
  opacity: 0.7;
}
.alert-wrap .adbox .btnUpgrade{
  color:#fff;
  background-color: #f48b38;
}
.alert-wrap .adbox .btn-block .btn .icon {
  width: 21px;
  height: 21px;
  position: absolute;
  left: 2px;
  top: 2px;
  display: block;
}


@-webkit-keyframes loading-bar-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes loading-bar-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}