@charset "utf-8";

#vod_pro_home{position: relative;background: #404349;}

/* visual */
.program_visaul_poster { max-height: 266px; overflow:hidden; display: flex; display: -ms-flexbox;  justify-content: center; align-items: center; }
.program_visaul_poster .program_visaul_poster--img { /*width: 100%; vertical-align: top; height: 300px;*/ }

/* video area */
.video_info { background-color: #152235; color: #fff; }

/* program title */
.video_info_inner_title { position: relative; padding: 20px 0px; display: none; }
.title-left { padding-bottom: 18px; }
.title-left .l-inner { display: flex; justify-content: space-between; align-itmes: flex-start; }
.title-left-desc { width: 100%; color: #969ca6; margin-top: 12px; font-size: 14px; }
.title-left h3 { font-size: 22px; font-weight: 700;	display: flex; align-items: center; flex-wrap: wrap; }
.title-left h3 b{ margin-right:15px; line-height: 1.3; }
.title-left h3 span{ display: flex; align-items: center; justify-content: center; width: 53px; height: 26px; font-size:13px; font-weight:700; }
.title-left h3 span.pink{border:1px solid #ff207a; color: #ff1f7a; margin-right: 9px; }
.title-left h3 span.purple{ border:1px solid #66f; }
.title-desc-wrapper { border-top: 1px solid #323e50; padding-top: 16px; }
.title-desc{font-size:14px; white-space:pre-wrap; color: #cee8ed; }

/* share */
.video_share_img_wrapper { display: inline-block; height: 23px; line-height: 23px; }
.video_share { flex-shrink: 0; }
.video_share_area .video_share_item { margin: 0 0 0 22px; }
.video_share_area .video_share_item img { height: 100%; }
.video_share_area .video_share_desc { text-align: center; line-height: 1; font-size: 14px; letter-spacing: -0.1em; color: #fff; font-weight: bold; margin-top: 3px; }
.video_share_area .video_share_item:not(:last-child) { margin-right: inherit; }
.video_share_desc { display: inline; }
.share-tooltip{ top: 50px; right: 0; height: auto; }
.share-tooltip ul >li >a { width: 36px; font-size: 10px; font-weight: bold; letter-spacing: -1px; color: #090909; padding: 0 0 17px 0;}
.share-tooltip ul >li:hover a {color: #090909;}

.broad_wrap { height: 17px; line-height: 17px; height: 17px; line-height: 17px; position: relative; text-align: center; display: inline-block; cursor: default; }
.video_share_item .broad { border-right: 1px solid #fff; padding-right: 20px; }

.doReport { display: inline-block; width: 120px; height: 32px; margin-left: 59px; background-color: rgba(184, 201, 227, 0.26); font-size: 14px; font-weight: bold; color: #ffffff; }
.doReport:hover { color: #a8d2fc; }
.doReport:before { content: url(/images/icn-newsreport-n.svg); display: inline-block; width: 20px; height: 18px; margin-right: 4px; vertical-align: middle; }
.doReport:hover:before { content: url(/images/icn-newsreport-hp.svg); }

.vod_info_tab { position: relative; margin-top: -50px; z-index: 10; text-align: center; height: 50px; box-shadow: 1.9px 2.3px 5px 0 #9da3af; background-color: rgb(0,0,0, 0.7); font-size: 15px; color: #b6b6b6; }
.vod_info_tab .video_share { display: inline-block; position: absolute; right: 5.3%; line-height: 50px; }
.vod_info_tab ul { display: inline-block;}
.vod_info_tab li { display: inline-block; margin:0 0 0 64px; }
.vod_info_tab li.selected a { color: #fff !important; }
.vod_info_tab li:hover a { color: #fff; }

.vod_info_tab a { font-size: 15px; font-weight: bold; letter-spacing: -0.75px; color: #b6b6b6; position: relative; display: block; padding: 15px 0; }
.vod_info_tab li:hover a::after,
.vod_info_tab .selected a::after { content: ''; position: absolute; bottom: -1px; left: 0; display: block; width: 100%; height: 4px; background-color: #7d9bd5; }

.video_share_area .video_share_item a {display: inline-block; padding: 0;}
.video_share_area li:hover a::after, .video_share_area .selected a::after {display: none;}
.share-tooltip ul { display: inline-flex;}
.share-tooltip ul li { margin: 0 0 0 5px;}
.share-tooltip>button { position: absolute; top: 14px; right: 14px;}

.vod_info_panel{background-color: #f5f5f6; }
.panel1 { display: block; padding: 20px 0 36px; }
.panel2 { display: none; padding: 20px 0 99px; }

.panel1 .btn_area { display: flex; justify-content: space-between; }
.panel1 .keep_playing{ width:104px;height:36px;line-height:36px;text-align:center;border:1px solid #c3c3c3;margin-bottom: 10px; background-color: #fff;}
.panel1 .keep_playing a{ display:block;font-weight: bold;size:16px;color: #000;}

/* --- sort 영역 --- */
.list_option .sort_list{display: flex;}
/* Normal 상태 */
.sort_list li{width:100px; height:36px; border: 1px solid #b3b5ba; background-color:#fff;}
.sort_list li:nth-child(n+2){margin-left: -1px;}
.sort_list li:nth-child(3){width: 86px;}
.sort_list li a{display:block; line-height: 34px; font-size: 15px; color: #999; text-align:center;}
/* Hover 시 */
.sort_list li:hover{position:relative; border: 1px solid #a3a7ae; box-shadow: 0 3px 7px 0 rgba(0,0,0,0.23);}
.sort_list li:hover a{font-weight:bold;}
/* Selected 시 */
.sort_list li:active,
.sort_list .selected{position:relative; border:1px solid #666; box-shadow: 0 3px 7px 0 rgba(0,0,0,0.23);}
.sort_list li:active a,
.sort_list .selected a{font-weight:bold; color:#141414;}

/* 기존 sort
.panel1 .sort select { 
	border-radius: 0; width:156px; height:40px; line-height:40px; 
	text-indent:5px;font-size:16px; 
}*/
.panel1 .normal_vod_list {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
}
.panel1 .normal_vod_listItem {
	width: 16.666666667%;
	padding: 0 5px;
}
.panel2 .vod_comment_text{
	color: #000;
}
.panel2 .comment_list .comment_list_title p {
	color: #fff;
}
.panel2 .comment_desc {
	color: #000;
}
.panel1 .btn_area {    display: flex;    justify-content: flex-end;    margin-bottom: 10px;}