@charset "UTF-8";
@keyframes lineLight {
  0% {
    outline: 0rem solid rgba(63, 107, 255, 0.2);
  }
  100% {
    outline: 0.7rem solid rgba(63, 107, 255, 0.2);
  }
}
/* ------------------------
           비디오
----------------------- */
.videoControlBar {
  position: absolute;
  bottom: 0;
  padding: 2vw 6vw;
  padding-top: 5vw;
  width: 100%;
  isolation: isolate;
  transition: opacity 300ms ease;
}
.videoControlBar::before {
  content: "";
  position: absolute;
  background: linear-gradient(0deg, black -10%, transparent -50%);
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
  transition: opacity 500ms;
  opacity: 0;
}
.videoControlBar:hover::before, .videoControlBar:active::before {
  opacity: 1;
  background: linear-gradient(0deg, black 24%, transparent 99%);
  pointer-events: none;
}
.videoControlBar:hover .ctr-state .set-seekBar .mov-gauge p, .videoControlBar:active .ctr-state .set-seekBar .mov-gauge p {
  height: 7px;
}
.videoControlBar.hidden {
  opacity: 0;
  pointer-events: none;
}
.videoControlBar .ctr-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.videoControlBar .ctr-state .sta-left, .videoControlBar .ctr-state .sta-right {
  display: flex;
  align-items: center;
  gap: 3vw;
}
.videoControlBar .ctr-state .set-seekBar {
  position: absolute;
  left: 0;
  bottom: calc(100% - 2vw);
  width: 100%;
}
.videoControlBar .ctr-state .set-seekBar .mov-gauge {
  z-index: 3;
  width: 100%;
  border-radius: 5rem;
}
.videoControlBar .ctr-state .set-seekBar .mov-gauge p {
  width: 98%;
  position: relative;
  height: 3px;
  transition: height 500ms ease;
}
.videoControlBar .ctr-state .set-seekBar .mov-gauge span {
  display: block;
  height: 100%;
  position: absolute;
  height: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50rem;
}
.videoControlBar .ctr-state .set-seekBar .mov-gauge span.mov-here {
  background: #ffffff;
  z-index: 1;
}
.videoControlBar .ctr-state .set-seekBar .mov-gauge span.mov-here::after {
  content: "";
  width: min(5vw, 2rem);
  aspect-ratio: 1/1;
  border-radius: 100rem;
  background: #3F6BFF;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
}
.videoControlBar .ctr-state .set-seekBar .mov-gauge span.mov-total {
  background: rgba(255, 255, 255, 0.9058823529);
  width: 100%;
}
.videoControlBar .ctr-state .set-sound {
  position: relative;
}
.videoControlBar .ctr-state .set-sound .vol-gauge {
  z-index: 3;
  position: absolute;
  background: rgba(0, 0, 0, 0.7411764706);
  width: 30vw;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 2vw);
  border-radius: 5rem;
  padding: 3.6vw;
  display: none;
}
.videoControlBar .ctr-state .set-sound .vol-gauge.on {
  display: block;
}
.videoControlBar .ctr-state .set-sound .vol-gauge p {
  width: 98%;
  position: relative;
}
.videoControlBar .ctr-state .set-sound .vol-gauge span {
  display: block;
  height: 100%;
  position: absolute;
  height: 5px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50rem;
}
.videoControlBar .ctr-state .set-sound .vol-gauge span.vol-here {
  background: #ffffff;
  z-index: 1;
}
.videoControlBar .ctr-state .set-sound .vol-gauge span.vol-here::after {
  content: "";
  width: min(5vw, 2rem);
  aspect-ratio: 1/1;
  border-radius: 100rem;
  background: #3F6BFF;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  pointer-events: none;
}
.videoControlBar .ctr-state .set-sound .vol-gauge span.vol-total {
  background: rgba(255, 255, 255, 0.6901960784);
  width: 100%;
}
.videoControlBar .ctr-state .set-from {
  position: relative;
  width: 5vw;
  aspect-ratio: 1/1;
}
.videoControlBar .ctr-state .set-from button {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
}
.videoControlBar .ctr-state .set-from button.on {
  display: block;
}
.videoControlBar .ctr-state .set-timer {
  color: #ffffff;
  font-size: 4vw;
  font-weight: 300;
}
.videoControlBar .ctr-state .ctr-play, .videoControlBar .ctr-state .ctr-pause, .videoControlBar .ctr-state .ctr-volume, .videoControlBar .ctr-state .ctr-fullscreen {
  width: 5vw;
  aspect-ratio: 1/1;
  background: url() no-repeat center center/contain;
  display: block;
  text-indent: -9999px;
}
.videoControlBar .ctr-state .ctr-play {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='16' viewBox='0 0 13 16' fill='none'%3E%3Cpath d='M12.75 7.86122L-6.43538e-07 15.2224L0 0.499999L12.75 7.86122Z' fill='white'/%3E%3C/svg%3E");
}
.videoControlBar .ctr-state .ctr-pause {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Crect width='2' height='14' fill='white'/%3E%3Crect x='6' width='2' height='14' fill='white'/%3E%3C/svg%3E");
}
.videoControlBar .ctr-state .ctr-volume {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15' fill='none'%3E%3Cpath d='M9 15L4.7334 11H0V5H3.66699L9 0V15ZM11 1.17676C13.8664 1.85415 16 4.42664 16 7.5C16 10.5734 13.8664 13.1458 11 13.8232V13.0791C13.4634 12.4185 15.2773 10.172 15.2773 7.5C15.2773 4.8279 13.4636 2.5804 11 1.91992V1.17676ZM11 4.33594C12.1827 4.8976 13 6.10367 13 7.5C13 8.89618 12.1825 10.1013 11 10.6631V4.33594Z' fill='white'/%3E%3C/svg%3E");
}
.videoControlBar .ctr-state .ctr-volume.ctr-mute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'%3E%3Cpath d='M14.001 0.625977L4.00098 16.626L3 16L13 0L14.001 0.625977ZM9 16L6.81641 13.9531L9 10.46V16ZM13.4492 3.33984C14.9997 4.52703 16 6.39596 16 8.5C16 11.5734 13.8664 14.1458 11 14.8232V14.0791C13.4634 13.4185 15.2773 11.172 15.2773 8.5C15.2773 6.65456 14.4123 5.01158 13.0654 3.9541L13.4492 3.33984ZM9 4.7998L4.5 12H0V6H3.66699L9 1V4.7998ZM11.8467 5.9043C12.5545 6.54495 13 7.4702 13 8.5C13 9.89618 12.1825 11.1013 11 11.6631V7.25977L11.8467 5.9043Z' fill='white'/%3E%3C/svg%3E");
}
.videoControlBar .ctr-state .ctr-fullscreen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2 12.5V18H7V20H0V12.5H2ZM20 20H13V18H18V12.5H20V20ZM20 6.5H18V2H13V0H20V6.5ZM7 2H2V6.5H0V0H7V2Z' fill='white'/%3E%3C/svg%3E");
}
.videoControlBar .ctr-state .set-sound {
  position: relative;
}