/* 슬라이드 배너 */

/* 비디오 컨테이너: 뷰포트 전체를 덮음 */
#{
  position:relative;
  width:100%;
  height:100vh; /* 화면 전체 */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

#wrap > #wrap_banner{
	position:relative;
}

/* 비디오 컨테이너: 뷰포트 전체를 덮음 */
#wrap > #wrap_banner > #wrap_banner_content{
	position:relative;
	width:100%;
	height:100vh; /* 화면 전체 */
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

/* 배경 비디오: 화면을 가득 채우도록 cover 처리 */
#wrap > #wrap_banner > #wrap_banner_content .video_box{
  position:absolute;
  inset:0; /* top:0; right:0; bottom:0; left:0 */
  width:100%;
  height:100%;
  object-fit:cover; /* 중요: 비디오 비율 유지하면서 가득 채움 */
  object-position:center center;
  z-index:0;
  /* 성능을 위해 하드웨어 가속을 유도할 수 있습니다 */
  transform:translateZ(0);
}

/* 비디오 포스터(이미지) 대체용: 비디오가 없을 때 보일 배경색/이미지 */
#wrap > #wrap_banner > #wrap_banner_content::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.35));
  z-index:1; /* 비디오 위에 오버레이 적용 */
  pointer-events:none;
}

/* 영상 제어 버튼 (간단하게) */
.video-controls{
  position:absolute;
  right:1rem;
  bottom:1rem;
  z-index:3;
  display:flex;
  gap:.5rem;
}
.video-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:8px;border:0;
  background:rgba(0, 0, 0, 0.35);
  color:#fff;
  font-size:1rem;cursor:pointer;
  backdrop-filter:blur(4px);
}

#wrap > #wrap_banner .text{
	position:absolute;
	top:50%;
	width:100%;
	transform:translateY(-50%);
	color:#fff;
	font-family:Noto Sans KR,Nanum Gothic,Helvetica,sans-serif;
	text-align:center;
	padding:40px 0px;
	z-index:2;
}
#wrap > #wrap_banner .text > p:nth-child(2){
	font-size:55px;
	font-weight:600;
	text-shadow:0 8px 30px rgba(0, 0, 0, 0.6);
}
#wrap > #wrap_banner .text > p:nth-child(3){
	font-size:25px;
	font-weight:400;
	margin-top:10px;
	text-shadow:0 8px 30px rgba(0, 0, 0, 0.6);
}

/* 하단 스크롤 알림 */
#wrap > #wrap_banner > #slide_popup{
	position:absolute;
	left:50%;
	margin-left:-43px;
	bottom:0;
	z-index:2;
}
#wrap > #wrap_banner > #slide_popup a{
	position:relative;
	display:block;
	color:#fff;
	font-size:15px;
	letter-spacing:0.3pt;
	text-align:center;
	line-height:120%;
	padding:0 0 80px;
}
#wrap > #wrap_banner > #slide_popup a:before{
	position: absolute;
	left: 50%;
	bottom:0;
	display:block;
	width:1px;
	height:70px;
	background-color:rgba(255, 255, 255, 0.5);
	content:'';
}
#wrap > #wrap_banner > #slide_popup a:after{
	position: absolute;
	left: 50%;
	margin-left: -3px;
	bottom:65px;
	display:block;
	width:7px;
	height:7px;
	background-color: #fff;
	animation:scroll 1.5s linear infinite;
	content:'';
}
@keyframes scroll{
	from { transform:translateY(0); opacity: 1;}
	to { transform:translateY(50px); opacity: 0;}
}

/* 반응형, 작은 화면에서 컨트롤 크기 조정 */
@media (max-width:800px){
  .video-controls{right:.5rem;bottom:.5rem}
  .video-btn{width:40px;height:40px}
	#wrap > #wrap_banner .text > p:nth-child(2){
		font-size:30px;
	}
	#wrap > #wrap_banner .text > p:nth-child(3){
		font-size:17px;
	}
}