@charset "utf-8";
/* video_player — 공통(css/board.css)에 없는, 이 스킨만의 규칙 */


.chk_box input[type="checkbox"]:checked + label span {background:url(./img/chk.png) no-repeat 50% 50% var(--blue-61);border-color:var(--blue-52);border-radius:3px}

#bo_gall .gall_img {position:relative; border-bottom:1px solid var(--gray-93);text-align:center; /*max-height:200px;*/overflow:hidden}

#bo_gall .gall_img img:hover {/* transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); */}

#bo_gall .gall_img video:hover {/* transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); */}

.playbt{display:block; width:100%; height:50%; position:absolute; top:0;  left:0; margin-top:20%; font-size:2em; z-index:99; border:0px solid red;}

.playbt i{font-size:2em; transition: 0.5s all ease; -webkit-transition: 0.5s all ease; -moz-transition: 0.5s all ease; -ms-transition: 0.5s all ease; -o-transition: 0.5s all ease;}

#bo_gall .gall_img a:hover .playbt i{color:var(--red-50);}

@media screen and (max-width: 480px) {	
	.playbt{font-size:1.3em; margin-top:27%;}
}


#bo_gall .gall_text_href {margin:0px 0; padding:10px; background-color:var(--gray-96)}

#bo_gall .gall_text_href a {font-weight:bold}

#bo_gall .bo_tit .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:var(--purple-65);background:none;text-align:center; border-radius:2px;margin-left:5px;vertical-align:middle; margin-top:3px;}

#bo_v_file li {padding:15px;position:relative;margin:10px 0;border:1px solid var(--gray-87);border-radius:5px;
-webkit-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
-moz-box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%);
box-shadow:1px 1px 5px 0px hsl(232, 36%, 96%)}

#bo_v_file li i {float:left;color:var(--gray-70);font-size:2.35em;margin-right:20px}


#bo_v_img {width:100%;overflow:hidden;zoom:1}

#bo_v_img img {margin-bottom:20px;max-width:100%;height:auto}

#bo_vc article .cm_wrap {float:left;max-width:100%;width:90%;}

/* ------------------------------------------------------------------
   영상 보기 — 왼쪽 영상, 오른쪽 제목·정보·본문

   예전에는 제목, 작성정보, 영상, 본문이 위에서 아래로 줄줄이 놓여
   1600px 폭에서 영상만 900px 높이를 차지하고 본문은 한참 아래로 밀렸다.
   비율은 new.hudmedia.kr 아카이브 화면을 따랐다.

   두 칸은 각자 흰 바탕과 여백을 갖는다. #bo_v 가 통째로 흰 바탕이면
   둘이 한 덩어리로 보이므로 이 스킨에서는 그 바탕을 걷어낸다.
   (#bo_v 안에는 이 두 칸과 목록 버튼줄뿐이다)
   ------------------------------------------------------------------ */
/* 영상 칸과 글 칸이 한 흰 바탕을 함께 쓴다.
   칸마다 바탕을 주면 사이가 어둡게 갈라져 보인다. */
#bo_v {
	background: var(--gray-100);
	border-radius: 4px;
}

#bo_v .v_split {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

#bo_v .v_media,
#bo_v .v_side {
	/* 바탕은 #bo_v 가 가진다. 여백만 남겨 지금 간격을 지킨다. */
	padding: 24px;
}

#bo_v .v_media {
	flex: 0 0 61%;
	min-width: 0;
	position: sticky;          /* 본문이 길어도 영상이 따라온다 */
	top: 20px;
}
#bo_v .v_media video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--gray-0);
}

#bo_v .v_side {
	flex: 1 1 auto;
	min-width: 0;              /* 긴 낱말이 칸을 밀어내지 않게 한다 */
}

/* 오른쪽 칸 안쪽 — 카드가 여백을 가지므로 블록은 여백을 비운다 */
/* 제목과 조회수·날짜를 한 줄에 세운다.
   글자 밑선(baseline)을 맞춰야 크기가 달라도 나란히 보인다. */
#bo_v .v_side header {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--gray-93);
}
#bo_v .v_side #bo_v_title {
	/* board.css 가 제목에 회색 띠(#f7f7f7)를 깔아 둔다.
	   카드 안에서는 띠가 도리어 거슬려 걷어낸다. */
	background: transparent;
	padding: 0;
	margin: 0;
	font-size: 1.9em;
	line-height: 1.35;
	font-weight: 700;
	border: 0;
}
#bo_v .v_side .v_meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.95em;
	color: var(--gray-53);
	white-space: nowrap;
}
#bo_v .v_side .v_meta_sep {
	color: var(--gray-80);
}
/* 관리자 버튼만 남은 칸 — 제목 줄이 경계선을 가지므로 여백만 둔다 */
#bo_v .v_side #bo_v_info {
	padding: 0;
	margin-bottom: 20px;
	border: 0;
}
#bo_v .v_side #bo_v_atc {
	min-height: 0;
	padding: 0;
}
#bo_v .v_side #bo_v_con {
	padding: 0;
	line-height: 1.8;
	word-break: break-word;
}

/* 좁은 화면에서는 위아래로 쌓는다 */
@media (max-width: 1100px) {
	#bo_v .v_split {
		display: block;
	}
	#bo_v .v_media {
		position: static;
		margin-bottom: 16px;
	}
	#bo_v .v_side #bo_v_title {
		font-size: 1.6em;
	}
}

@media (max-width: 768px) {
	#bo_v .v_media,
	#bo_v .v_side {
		padding: 16px;
	}
}