#video-sf {
  display: flex;
  height: auto; }
  #video-sf.active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #222; }
  #video-sf .video-sf-main {
    position: relative;
    margin: 0px auto;
    width: 800px;
    height: auto; }
    #video-sf .video-sf-main .video-sf-player {
      width: 100%;
      height: 100%;
      background: #000; }
      #video-sf .video-sf-main .video-sf-player video {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        display: none; }
      #video-sf .video-sf-main .video-sf-player .frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; }
        #video-sf .video-sf-main .video-sf-player .frame.active {
          background: none; }
          #video-sf .video-sf-main .video-sf-player .frame.active .play {
            display: none; }
          #video-sf .video-sf-main .video-sf-player .frame.active .frame-paly {
            display: flex;
            animation: fade 0.6s 1;
            animation-fill-mode: forwards;
            animation-timing-function: ease-out; }
          #video-sf .video-sf-main .video-sf-player .frame.active .frame-pause {
            display: none; }
        #video-sf .video-sf-main .video-sf-player .frame .frame-paly {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
          width: 100%;
          height: 100%;
          align-items: center;
          justify-content: center;
          pointer-events: none; }
          #video-sf .video-sf-main .video-sf-player .frame .frame-paly span {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 25px 0 25px 40px;
            border-color: transparent transparent transparent #fff; }
        #video-sf .video-sf-main .video-sf-player .frame .frame-pause {
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          animation: fade 0.6s 1;
          animation-fill-mode: forwards;
          animation-timing-function: ease-out;
          width: 100%;
          height: 100%;
          align-items: center;
          justify-content: center;
          pointer-events: none; }
          #video-sf .video-sf-main .video-sf-player .frame .frame-pause span {
            display: flex; }
            #video-sf .video-sf-main .video-sf-player .frame .frame-pause span::after {
              display: flex;
              content: "";
              width: 8px;
              height: 40px;
              background: #fff;
              transform: translateX(7px); }
            #video-sf .video-sf-main .video-sf-player .frame .frame-pause span::before {
              display: flex;
              content: "";
              width: 8px;
              height: 40px;
              background: #fff;
              transform: translateX(-7px); }

@keyframes fade {
  0% {
    opacity: 0;
    transform: scale(0.5); }
  50% {
    opacity: 1;
    transform: scale(0.75); }
  100% {
    opacity: 0;
    transform: scale(1); } }
        #video-sf .video-sf-main .video-sf-player .frame .back {
          position: absolute;
          top: 10px;
          right: 10px;
          z-index: 100;
          background: rgba(0, 0, 0, 0.6);
          padding: 5px 10px;
          border-radius: 5px;
          color: #fff;
          box-sizing: border-box;
          font-size: 14px;
          cursor: pointer;
          pointer-events: auto;
          display: none; }
          #video-sf .video-sf-main .video-sf-player .frame .back.active {
            display: block; }
          #video-sf .video-sf-main .video-sf-player .frame .back:hover {
            opacity: 0.7; }
        #video-sf .video-sf-main .video-sf-player .frame .return {
          position: absolute;
          z-index: 100;
          color: #fff;
          cursor: pointer;
          pointer-events: auto;
          font-size: 28px;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.6);
          display: none;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%; }
          #video-sf .video-sf-main .video-sf-player .frame .return span {
            display: inline-block;
            margin-left: 5px;
            font-size: 30px; }
          #video-sf .video-sf-main .video-sf-player .frame .return.active {
            display: flex; }
          #video-sf .video-sf-main .video-sf-player .frame .return:hover {
            opacity: 0.7; }
    #video-sf .video-sf-main .select {
      position: relative;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      justify-content: space-between; }
      #video-sf .video-sf-main .select span {
        pointer-events: auto;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 0%;
        height: 0%;
        top: 0%;
        left: 0%;
        cursor: pointer;
        box-sizing: border-box;
        user-select: none; }
    #video-sf .video-sf-main #player-status {
      position: absolute;
      bottom: 0px;
      left: 0px;
      color: #fff;
      display: flex;
      width: calc(100% - 20px);
      height: 46px;
      background: rgba(0, 0, 0, 0.4);
      padding: 6px 10px 0 10px;
      align-items: center;
      pointer-events: auto; }
      @media screen and (max-width: 768px) {
        #video-sf .video-sf-main #player-status {
          width: 100%; } }
      #video-sf .video-sf-main #player-status .play-stop {
        width: 26px;
        margin-right: 5px;
        font-size: 12px;
        pointer-events: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        cursor: pointer; }
        #video-sf .video-sf-main #player-status .play-stop i {
          pointer-events: none; }
        #video-sf .video-sf-main #player-status .play-stop i:nth-child(1) {
          display: block; }
        #video-sf .video-sf-main #player-status .play-stop i:nth-child(2) {
          display: none; }
        #video-sf .video-sf-main #player-status .play-stop.active i:nth-child(1) {
          display: none; }
        #video-sf .video-sf-main #player-status .play-stop.active i:nth-child(2) {
          display: block; }
      #video-sf .video-sf-main #player-status .volume {
        width: 20px;
        pointer-events: auto;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20px;
        margin-right: 12px; }
        #video-sf .video-sf-main #player-status .volume i {
          pointer-events: none; }
        #video-sf .video-sf-main #player-status .volume i:nth-child(1) {
          display: block; }
        #video-sf .video-sf-main #player-status .volume i:nth-child(2) {
          display: none; }
        #video-sf .video-sf-main #player-status .volume.active i:nth-child(1) {
          display: none; }
        #video-sf .video-sf-main #player-status .volume.active i:nth-child(2) {
          display: block; }
      #video-sf .video-sf-main #player-status .gauge {
        position: relative;
        width: 60px;
        height: 20px;
        pointer-events: auto;
        cursor: pointer; }
        #video-sf .video-sf-main #player-status .gauge .gauge-bg {
          position: absolute;
          top: 8px;
          width: 100%;
          height: 5px;
          background: #222;
          border-radius: 2.5px;
          pointer-events: none; }
        #video-sf .video-sf-main #player-status .gauge .gauge-color {
          position: absolute;
          top: 8px;
          width: 0;
          height: 5px;
          background: #fff;
          border-radius: 2.5px;
          pointer-events: none; }
        #video-sf .video-sf-main #player-status .gauge .gauge-button {
          position: absolute;
          top: 4px;
          left: -6px;
          width: 12px;
          height: 12px;
          background: #fff;
          border-radius: 6px;
          pointer-events: none;
          will-change: transform; }
      #video-sf .video-sf-main #player-status .time {
        color: #fff;
        font-size: 12px;
        margin-left: 10px;
        user-select: none; }
      #video-sf .video-sf-main #player-status .fullscreen {
        margin-left: auto;
        padding: 3px;
        margin-right: 1px;
        cursor: pointer;
        pointer-events: auto; }
        #video-sf .video-sf-main #player-status .fullscreen i {
          pointer-events: none; }
        #video-sf .video-sf-main #player-status .fullscreen i:nth-child(1) {
          display: block; }
        #video-sf .video-sf-main #player-status .fullscreen i:nth-child(2) {
          display: none; }
        #video-sf .video-sf-main #player-status .fullscreen.active i:nth-child(1) {
          display: none; }
        #video-sf .video-sf-main #player-status .fullscreen.active i:nth-child(2) {
          display: block; }
    #video-sf .video-sf-main #progress-bar {
      position: absolute;
      bottom: 32px;
      left: 0;
      width: calc(100% - 30px);
      height: 10px;
      z-index: 1;
      margin: 0 15px;
      box-sizing: border-box;
      pointer-events: auto;
      cursor: pointer; }
      #video-sf .video-sf-main #progress-bar .background {
        position: absolute;
        top: 3px;
        width: 100%;
        height: 4px;
        background: rgba(255, 255, 255, 0.4);
        cursor: pointer;
        pointer-events: none; }
      #video-sf .video-sf-main #progress-bar .load {
        position: absolute;
        top: 3px;
        width: 0;
        height: 4px;
        background: rgba(255, 255, 255, 0.4);
        pointer-events: none; }
      #video-sf .video-sf-main #progress-bar .color {
        position: absolute;
        top: 3px;
        width: 0;
        height: 4px;
        background: #d41c1c;
        pointer-events: none; }
      #video-sf .video-sf-main #progress-bar .button {
        position: absolute;
        top: 0px;
        left: -5px;
        width: 10px;
        height: 10px;
        background: #d41c1c;
        border-radius: 5px;
        pointer-events: none;
        will-change: transform; }
      #video-sf .video-sf-main #progress-bar .seek {
        position: absolute;
        width: 100%;
        height: 4px;
        top: 3px; }
        #video-sf .video-sf-main #progress-bar .seek span {
          position: absolute;
          left: 0%;
          display: block;
          background: #d41c1c;
          width: 4px;
          height: 4px;
          border-radius: 2px; }
  #video-sf video::-webkit-media-controls {
    display: none !important; }
  #video-sf video::-webkit-media-controls-enclosure {
    display: none !important; }