@charset "UTF-8";

#video {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 200;
  overflow-x: hidden;
  overflow-y: auto;
}
#video:before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 200;
  background: #fff;
}
#video .icon.rd-close {
  overflow: hidden;
  position: absolute;
  right: -40px;
  top: 0;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: #fff;
  white-space: nowrap;
  /* text-indent: 200%; */
  border: 0;
  z-index: 202;
  cursor: pointer;
}
#video .icon.rd-close:before {
  transform: rotate(45deg);
}
#video .icon.rd-close:after {
  transform: rotate(-45deg);
}
#video .icon.rd-close:before {
  background-image: url(/lg5-common/images/icons/btn-close-48-white.svg);
  display: inline-block;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 1px);
  width: 2px;
  height: 24px;
  background-color: #111;
  content: "";
}
#video .icon.rd-close:after {
  display: inline-block;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 1px);
  width: 2px;
  height: 24px;
  background-color: #111;
  content: "";
}
#video .icon.rd-close:before {
  font-size: 32px;
  color: #fff;
}
#video .videoCont {
  position: relative;
  z-index: 201;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;
  margin: 0 auto;  
  top: 50%;
  transform: translateY(-50%);
}
#video .vidoTxt {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0;
  z-index: 101;
}
#video .vidoTxt h1 {
  font-size: 24px;
  font-weight: 600;
}
#video .vidoTxt p {
  padding-top: 20px;
  font-size: 14px;
  color: #666666;
}
/* #video:has(.video-caption.active) {margin-top:-316px;} */
.banner-live-highlight {
  overflow: hidden;
  max-width: 1380px;
  margin: 0 auto;
  padding: 60px 0;
  text-align: center;
}
.banner-live-highlight a {display:block;}

/* 비디오 자막 설명 */
[data-caption].video-item.videoCont{position: relative; max-width: none;}
[data-caption].video-item.videoCont .video{position: relative;}
[data-caption].video-item.videoCont video{ width: 100%; border-radius: 0;}
[data-caption].video-item.videoCont .video-ctr-button{display: none;}
[data-caption].video-item.videoCont.active .video-ctr-button{display: block;}
[data-caption].video-item.videoCont .video-ctr-button .left{right: 24px; bottom: 24px;}
[data-caption].video-item.videoCont .video-ctr-button .right{left: 24px; bottom: 24px;}
[data-caption].video-item.videoCont .video-ctr-button .play-ctr-button,
[data-caption].video-item.videoCont .video-ctr-button .sound-ctr-button{position: absolute; width: 32px; height: 32px; pointer-events: all; z-index: 2;}
[data-caption].video-item.videoCont .video-ctr-button .play-ctr-button.pause{background: no-repeat center/contain url(https://brand.lge.co.kr/lg5-common/images/GRS/ic_pause_52.svg);}
[data-caption].video-item.videoCont .video-ctr-button .play-ctr-button{background: no-repeat center/contain url(https://brand.lge.co.kr/lg5-common/images/GRS/ic_play_52.svg);}
[data-caption].video-item.videoCont .video-ctr-button .sound-ctr-button.muted{background:no-repeat center/contain url(https://brand.lge.co.kr/lg5-common/images/GRS/ic_sound_off_52.svg);}
[data-caption].video-item.videoCont .video-ctr-button .sound-ctr-button{background: no-repeat center/contain url(https://brand.lge.co.kr/lg5-common/images/GRS/ic_sound_on_52.svg);}
[data-caption="false"].video-item.videoCont .video-caption-button,
[data-caption="false"].video-item.videoCont .video-caption{display: none;}
[data-caption="true"].video-item.videoCont .video-caption-button{position: absolute; top: 16px; right: 20px;}
[data-caption="true"].video-item.videoCont .caption-btn{padding: 3px 8px;min-width: 46px;font-size: 13px;font-weight: 400;line-height: 20px;border: 1px solid #fff;border-radius: 16px;background: rgba(0, 0, 0, .5);color: #fff;}
[data-caption="true"].video-item.videoCont .video-caption{display: none;position: relative; width: 100%;max-width: 1000px;margin:0 auto;padding: 24px;border: 1px solid #ddd; border-radius: 0;/*border: 1px solid #ddd;border-radius: 8px;*/background: #fff;}
[data-caption="true"].video-item.videoCont .video-caption.active{display: block;}
[data-caption="true"].video-item.videoCont .caption-title{padding-right: 32px;font-size: 15px;line-height: 22px;font-weight: 700;text-align: left;}
[data-caption="true"].video-item.videoCont .caption-text{margin-top: 10px;height: 72px;max-height: 72px;font-size: 14px;line-height: 24px;text-align: left;white-space: normal;width: 100%;overflow-y: auto;}
[data-caption="true"].video-item.videoCont .caption-close-btn{display: block;position: absolute;top: 20px;right: 20px;width: 16px;height: 16px;background: url(/kr/images/common/pdp_rentalcare/images/common//btn-close-24-black.svg) no-repeat;background-size: 100% 100%;}
[data-caption="true"].video-item.videoCont:has(.caption-text:empty) .video-caption-button {display:none;}

html.hidden-lock, body.hidden-lock {overflow:hidden;}

@media only screen and (max-width: 767px) {
  #video {
    /* width: 100%;
    margin: 0 auto; */
    padding: 0 16px;
    /* top: 25%;
    left: 0; */
  }
  #video video {
      width: 100%;
  }
  #video .videoCont {
    min-height: 100%;
    top: auto;
    transform: none;
    padding: 13.88vw 0;
  }
  #video .icon.rd-close {
      position: absolute;
      top: 20px;
      right: 0;
  }
  #video .vidoTxt {
      width: 100%;
  }
  #video .vidoTxt h1 {
      font-size: 14px;
      line-height: 24px;
  }
  #video .vidoTxt h1 span {
      display: block;
      padding-left: 15px;
  }
  #video .vidoTxt p {
      padding-top: 12px;
      font-size: 12px;
      line-height: 16px;
  }

  /* #video:has(.video-caption.active) {top:calc(25% - 58px);margin-top:0;} */

  .banner-live-highlight {
    width: 100%;
    padding: 30px 16px;
  }
  .banner-live-highlight img {
      width: 100%;
      max-width: 100%;
  }
  
  
  /* 비디오 자막 설명 */
  [data-caption].video-item.videoCont{margin-top: 30px;}
  [data-caption="true"].video-item.videoCont .video-caption-button{top: 16px;right: 16px;}
  [data-caption="true"].video-item.videoCont .video-title-info{font-size: 12px; line-height: 19px; letter-spacing: -.4; bottom: 0;left: 0;text-align: left; margin-top: 8px;position: relative;}
  [data-caption="true"].video-item.videoCont .video-caption{margin-top: 0;padding: 20px 12px 12px; /*border-radius: 12px;*/}
  [data-caption="true"].video-item.videoCont .caption-text{margin-top: 6px;height: 84px;max-height: 84px;font-size: 12px;line-height: 20px;}
  [data-caption="true"].video-item.videoCont .caption-close-btn{top:8px;right:12px;}
  [data-caption].video-item.videoCont .video-ctr-button .play-ctr-button,
  [data-caption].video-item.videoCont .video-ctr-button .sound-ctr-button{width: 24px; height: 24px;}  
  [data-caption].video-item.videoCont .video-ctr-button .left{right: 16px; bottom: 16px;}
  [data-caption].video-item.videoCont .video-ctr-button .right{left: 16px; bottom: 16px;}
}