/* 오늘의 생방송 */
.todayOnair { position:relative; width:100%; height:70px; padding:10px 30px 10px 30px; border-radius:10px; background:#fff; overflow:hidden; box-shadow:3px 3px 6px rgba(0,0,0,0.1); margin-bottom:40px; }

.todayOnair h1 { float:left; width:155px; line-height:50px; font-weight:700; font-size:150%; color:#000; letter-spacing:-1px; }

.todayOnair .today { float:left; width:251px; height:50px; border-right:1px solid #ddd; font-size:120%; font-weight:700; }
.todayOnair .today span { width:50px; height:50px; line-height:50px !important; border-radius:10px; background:#415984; color:#fff; font-weight:700; font-size:160%; text-align:center; display:inline-block; margin:0 5px 0 10px; }
.todayOnair .today span:first-child { margin:0 5px 0 0; }

.todayOnair .todayOnairList { float:left; width:calc(100% - 155px - 251px - 150px); height:50px; line-height:50px; padding:0 15px; }

.todayOnair .todayOnairList .slick-list { z-index:100; }

.todayOnair .todayOnairList .list { position:relative; float:left; height:100%; color:#888; font-size:110%; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.todayOnair .todayOnairList .list a { width:100%; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }


.todayOnair .slick-prev,
.todayOnair .slick-next { position:absolute; bottom:10px; width:30px; height:30px; line-height:30px; border:none; font-size:0; cursor:pointer; display:block; z-index:1003; }

.todayOnair .slick-prev { right:-45px; background:url(/images/common/slick_btn_prev.png) no-repeat; }
.todayOnair .slick-next { right:-115px; background:url(/images/common/slick_btn_next.png) no-repeat; }

			/*자동실행버튼(재생,일시정지)*/
.todayOnair .btn_play { position:absolute; right:100px; bottom:20px; width:30px; height:30px; line-height:30px; border:0; background:url(/images/common/slick_btn_pause.png) no-repeat; text-indent:-9999px; z-index:101; }
.todayOnair .btn_play.on { background:url(/images/common/slick_btn_play.png) no-repeat;  }
		

.todayOnair .more { position:absolute; right:30px; top:20px;  }



@media (min-width:769px) and (max-width:1024px){
	.todayOnair { height:auto; padding:20px 20px 20px 20px;  }
	.todayOnair .today { border-right:none; }
	.todayOnair .todayOnairList { clear:both; width:calc(100% - 150px); background:#f4f4f4; margin-top:10px; }
	.todayOnair .btn_play { right:90px; bottom:30px; }
	.todayOnair .more { right:20px; top:90px; }
}

@media (max-width:768px){
	.todayOnair { height:auto; padding:10px 15px 20px 15px;  }
	.todayOnair .today { clear:both; width:100%; border-right:none; }
	.todayOnair .todayOnairList { clear:both; width:100%; background:#f4f4f4; margin-top:10px; }

	.todayOnair .slick-prev,
	.todayOnair .slick-next { bottom:120px; }
	.todayOnair .slick-prev { right:105px; }
	.todayOnair .slick-next { right:35px; }


	.todayOnair .btn_play { right:85px; bottom:140px; }
	.todayOnair .more { right:15px; top:20px; }
}












/* mVodArea */

#mVodArea { width:100%; display:flex; flex-wrap:nowrap;  justify-content:space-between; }

@media (max-width:1400px){
	#mVodArea {  display:block; }
}



/* 메인영상플레이어 */
.mPlayer { position:relative; float:left; width:calc(100% - 500px); border-radius:20px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.1); margin-right:50px; }
.mPlayer h1 { width:100%; height:50px; line-height:50px; padding:0 15px; border-radius:20px 20px 0 0; background:#0c295f; font-size:130%; color:#fff; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.mPlayer h1 span { width:80px; height:30px; line-height:30px; border-radius:15px; background:#00479d; color:#fff; font-size:75%; font-style:italic; display:inline-block; margin-left:15px; }
.mPlayer h1 span.offair { background:#00479d; }
.mPlayer h1 span.onair { background:#da131a; }


.mPlayer .video-container {width:100%;  }
.mPlayer .video-container video {  width:100%; height:auto;  }
.video-js { width:100%; height:100%; aspect-ratio:16/9;}





@media (min-width:1025px) and (max-width:1280px){
	.mPlayer { width:calc(100% - 440px); margin-right:40px; }
}

@media (min-width:769px) and (max-width:1024px){
	.mPlayer { width:calc(100% - 380px); margin-right:30px; }
}

@media (max-width:768px){
	.mPlayer { width:100%; margin:0 0 30px 0; } 
	.mPlayer h1 { font-size:110%; }
}





/* 생방송 채널선택 */
.mChannel { float:right; width:450px; border-radius:20px; background:#fff url(/images/onair/channel_icon.png) no-repeat 50% 100%; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.1);  }
.mChannel .channelTop { width:100%; height:96px; padding:22px 30px 0 30px; background:#f36700; color:#fff; }
.mChannel .channelTop h1 { font-weight:700; font-size:145%; margin-bottom:6px; }
.mChannel .channelTop p { font-size:95%; }

.mChannel .channelBody { width:100%; height:auto; padding:25px 30px 0 30px; }
.mChannel .channelBody ul { border-top:1px solid #ddd; }
.mChannel .channelBody li { width:100%; height:41px; line-height:40px; padding-left:10px; border-bottom:1px solid #ddd; display:block; }
.mChannel .channelBody li span { width:90px; height:30px; line-height:30px; border-radius:5px; background:#ddd; color:#888; text-align:center; display:inline-block; margin-right:15px; }
.mChannel .channelBody li span.onair { background:#da131a; color:#fff; }

.mChannel .channelBody li a.select { color:#113d8e; font-weight:700; }
.mChannel .channelBody li b { position:relative; top:-2px; width:40px; height:20px; line-height:20px; border-radius:3px; background:#f36700; color:#fff; font-weight:normal; font-size:75%; text-align:center; display:inline-block; margin-left:10px; }

@media (min-width:1281px) and (max-width:1400px){
	.mChannel { background:#fff; }
	.mChannel .channelBody { padding:25px 30px 30px 30px; }
}


@media (min-width:1025px) and (max-width:1280px){
	.mChannel { width:400px;  background:#fff; }
	.mChannel .channelBody { padding:25px 30px 30px 30px; }
}

@media (min-width:769px) and (max-width:1024px){
	.mChannel { width:350px; background:#fff; }
	.mChannel .channelTop { padding:22px 20px 0 20px; }
	.mChannel .channelTop p { font-size:85%; }

	.mChannel .channelBody { padding:25px 20px 25px 20px; }
}

@media (max-width:768px){
	.mChannel { width:100%; background:#fff; }
	.mChannel .channelTop { height:auto; padding:22px 15px 20px 15px; }
	.mChannel .channelTop p { font-size:85%; }

	.mChannel .channelBody { padding:25px 15px 25px 15px; }
}



/* 최근동영상 */
.mNewVod { position:relative; width:100%; }
.mNewVod h1 { font-weight:700; font-size:205%; color:#000; text-align:center; margin-bottom:20px; }

.mNewVod ul { display:block; }
.mNewVod li { float:left; width:calc(25% - 27px); height:316px; margin:0 36px 36px 0; }
.mNewVod li:nth-child(4n) { margin:0 0 36px 0; } 
.mNewVod li:nth-child(n + 5) { margin-bottom:0; }

.mNewVod ul li a:link,
.mNewVod ul li a:visited { width:100%; height:100%;border-radius:30px;  background:#fff;  overflow:hidden; display:block; box-shadow:3px 3px 8px rgba(0,0,0,0.1); transition:0.3s; }
.mNewVod ul li a:active,
.mNewVod ul li a:focus,
.mNewVod ul li a:hover { box-shadow:5px 5px 8px rgba(0,0,0,0.1), 2px 2px 5px rgba(0,0,0,0.05); }

.mNewVod ul li a .picArea { position:relative; width:100%; overflow:hidden; transition:0.3s; }
.mNewVod ul li a .picArea span { position:absolute; left:15px; bottom:15px; }

.mNewVod ul li a:link .picArea .pic,
.mNewVod ul li a:visited .picArea .pic { width:100%; height:0; padding-top:calc(90 / 160 * 100%);  /* calc(이미지 높이 ÷ 이미지 가로 × 100%) */ background-size:cover !important; overflow:hidden;  display:block; transition:0.3s !important; }
.mNewVod ul li a:active .picArea .pic,
.mNewVod ul li a:focus .picArea .pic,
.mNewVod ul li a:hover .picArea .pic { transform:scale(110%); }

.mNewVod ul li a .picArea .pic img { width:100%; }


.mNewVod ul li a .bar { width:100%; padding:20px 20px 0 20px; background:#fff; text-align:left; }
.mNewVod ul li a .bar i { height:26px; line-height:26px !important; padding:0 15px; border-radius:15px; background:#f36700; color:#fff; font-size:90%; font-style:normal; display:inline-block; margin-bottom:12px; }
.mNewVod ul li a:link .bar p,
.mNewVod ul li a:visited .bar p { width:100%; line-height:1.3; color:#111; font-weight:700; font-size:115%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; margin-bottom:3px; }
.mNewVod ul li a:active .bar p,
.mNewVod ul li a:focus .bar p,
.mNewVod ul li a:hover .bar p { color:#113d8e; }

.mNewVod ul li a .bar span { color:#888; font-size:95%; }




@media (max-width:1400px){

}



@media (max-width:1024px){
	.mNewVod li { height:auto; }
	.mNewVod li { width:calc(33.333% - 24px); height:auto; }
	.mNewVod li:nth-child(4n) { margin:0 36px 36px 0; } 
	.mNewVod li:nth-child(3n) { margin:0 0 36px 0; } 
	.mNewVod li:nth-child(n + 5) { margin-bottom:36px; }
	.mNewVod li:nth-child(n + 7) { margin-bottom:0px; }

	.mNewVod ul li a .bar { min-height:134px; padding:20px 20px 30px 20px; }
}


@media (max-width:768px){	
	.mNewVod ul li a .bar { padding:20px 15px 30px 15px; }
	
}


@media (max-width:670px){
	.mNewVod li { width:calc(50% - 10px); margin:0 10px 20px 0; }
	.mNewVod li:nth-child(4n) { margin:0 10px 20px 0; } 
	.mNewVod li:nth-child(3n) { margin:0 10px 20px 0; } 
	.mNewVod li:nth-child(even) { margin:0 0 20px 10px; } 
	.mNewVod li:nth-child(n + 5) { margin-bottom:20px; }
	.mNewVod li:nth-child(n + 7) { margin-bottom:0px; }
	
}