@charset "utf-8";


/* cont1Inner */
.cont1Inner { display:flex; justify-content:space-between; gap:5rem; }

@media (min-width:1025px) and (max-width:1400px){
	.cont1Inner { gap:4rem; }
}

@media (min-width:769px) and (max-width:1024px){
	.cont1Inner { flex-wrap:wrap; gap:4rem; }
}

@media (max-width:768px){
	.cont1Inner { flex-wrap:wrap; }
}





/* 방송플레이어 */
.vodPlayer { position:relative; width:900px; height:fit-content; border-radius:2rem; box-shadow:0.4rem 0.4rem 0.8rem rgba(0,0,0,0.3); }
.vodPlayer .titlearea { width:100%; height:5rem; line-height:5rem; padding:0 1.6rem; border-radius:2rem 2rem 0 0; background:#16989a; color:#fff; font-weight:700; font-size:2.0rem; display:flex; justify-content:center; align-items:center; gap:1.2rem; }
.vodPlayer .titlearea span { width:auto; text-align:center; display:inline-block; }
.vodPlayer .titlearea i { position:relative; width:8rem; height:3rem; line-height:3rem; border-radius:1.5rem; background:#00479d; color:#fff; font-weight:500; font-size:1.5rem; font-style:italic; text-align:center; display:inline-block; }
.vodPlayer .titlearea i.on { background:#da131a; }

.vodPlayer .video-container { width:100%; border-radius:0 0 2rem 2rem; background:#333; overflow:hidden; aspect-ratio: 16 / 9; }
.vodPlayer .video-container video { width:100%; height:100%; }
.vodPlayer .video-container #xmcaster { width:100%; height:100%; }


@media (max-width:1024px){
	.vodPlayer { width:100%; }
}

@media (max-width:768px){
	.vodPlayer .titlearea span { width:calc(100% - 8rem - 1.2rem); text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.7rem; display:inline-block; }
	.vodPlayer .titlearea i { font-size:1.4rem; }

}



/* cont1Right*/
.cont1Right { width:45rem; }


@media (min-width:769px) and (max-width:1024px){
	.cont1Right { width:100%; }
}

@media (max-width:768px){
	.cont1Right { width:100%; }
}




/* 생방송 채널선택 */
.todayOnair { position:relative; width:100%; height:fit-content; border-radius:2rem; overflow:hidden; box-shadow:0.4rem 0.4rem 0.8rem rgba(0,0,0,0.1); margin-bottom:2.0rem; }

.todayOnair .toTop { width:100%; height:9.5rem; padding:2rem 2.4rem 0 2.4rem; background:#00479d; color:#fff; font-size:1.5rem; }
.todayOnair .toTop h2 { font-size:2.3rem; font-weight:600; margin-bottom:0.4rem; }
.todayOnair .toTop h2 strong { padding:0.2rem 0.4rem; border-radius:0.4rem; background:#ffcc00; color:#113d8e; font-weight:700; display:inline-block; }

.todayOnair ul { width:100%; padding:2rem 3rem 2.5rem 3rem; border-radius:0 0 2rem 2rem; background:#fff; display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between; overflow:visible; }
.todayOnair ul li { width:100%; padding:0.5rem 1rem; border-bottom:1px solid #ddd; }
.todayOnair ul li:first-child { border-top:1px solid #ddd; }
.todayOnair ul li .btn { width:9rem; height:3rem; line-height:3rem; border-radius:0.4rem; background:#ddd; color:#888; font-weight:500; text-align:center; display:inline-block; margin-right:1.6rem;  }
.todayOnair ul li .btn.on { background:#da131a; color:#fff; }
.todayOnair ul li .btn.ready { background:#444; color:#fff; }

.todayOnair ul li > span { color:#333; font-weight:700; }
.todayOnair ul li > span.on { color:#113d8e; } 

.todayOnair ul li i { position:relative; top:-2px; width:4rem; height:2rem; line-height:2rem; border-radius:0.4rem; background:#f36700; color:#fff; text-align:center; font-size:1.3rem; display:inline-block; margin-left:0.4rem; }



@media (min-width:1025px) and (max-width:1280px){
	.todayOnair .toTop { height:auto; padding:2rem 1.6rem 1.5rem 1.6rem; }
	.todayOnair .toTop h2 { font-size:2.1rem; }

	.todayOnair ul { padding:2rem 1.6rem 2.5rem; }
	.todayOnair ul li .btn { width:8rem; margin-right:1.2rem; }
}

@media (min-width:769px) and (max-width:1024px){
	.todayOnair { float:left; width:calc(50% - 1.6rem); margin:0 1.6rem 0 0; }

	.todayOnair .toTop { height:auto; padding:2rem 1.6rem 1.5rem 1.6rem; }
	.todayOnair .toTop h2 { font-size:2.1rem; }

	.todayOnair ul { padding:2rem 1.6rem 2.5rem; }
	.todayOnair ul li .btn { width:8rem; margin-right:1.2rem; }
}

@media (max-width:768px){
	.todayOnair { width:100%; margin:0 0 4rem 0; }

	.todayOnair .toTop { height:auto; padding:2rem 1.6rem 1.5rem 1.6rem; }
	.todayOnair .toTop h2 { font-size:2.1rem; }

	.todayOnair ul { padding:2rem 1.6rem 2.5rem; }
	.todayOnair ul li .btn { width:8rem; margin-right:1.2rem; }
}





/* 영상검색 */
.mSearch { width:100%; padding:1.7rem 2.4rem 3.0rem 2.4rem; border-radius:2rem; background:#fff; overflow:hidden; box-shadow:0.4rem 0.4rem 0.8rem rgba(0,0,0,0.1); }
.mSearch h2 { float:left; font-size:2.3rem; font-weight:600; margin:0 1.6rem 1.5rem 0; }
.mSearch p { position:relative; top:0.4rem; float:left; font-size:1.6rem; }
.mSearch form { clear:both; }
.mSearch .select_kind { float:left; width:calc(50% - 0.6rem); height:4.4rem; border:1px solid #ddd; border-radius:0.4rem; margin:0 1.2rem 1.2rem 0; }
.mSearch .text_text { float:right; width:calc(50% - 0.6rem); height:4.4rem; border:1px solid #ddd; border-radius:0.4rem; }
.mSearch .submit_search { clear:both; width:100%; height:4.4rem; border-radius:0.4rem; background:#0c295f; color:#fff; font-weight:700; }

@media (min-width:1025px) and (max-width:1280px){
	.mSearch { padding:1.7rem 1.6rem 3.0rem; }
	.mSearch h2 { width:100%; margin:0 0 0.0rem 0; }
	.mSearch p { position:static; margin-bottom:0.8rem; }
}

@media (min-width:769px) and (max-width:1024px){
	.mSearch { float:right; width:calc(50% - 1.6rem); margin-left:1.6rem; }

	.mSearch { padding:1.7rem 1.6rem 3.0rem; }
	.mSearch h2 { width:100%; margin:0 0 0.0rem 0; }
	.mSearch p { position:static; margin-bottom:0.8rem; }
}

@media (max-width:768px){
	.mSearch { padding:1.7rem 1.6rem 3.0rem; }
}

@media (max-width:410px){	
	.mSearch h2 { width:100%; margin:0 0 0.0rem 0; }
	.mSearch p { position:static; margin-bottom:0.8rem; }

	.mSearch .select_kind { width:100%; margin:0 0 0.8rem 0; }
	.mSearch .text_text { width:100%; margin:0 0 0.8rem 0; }
}










/* cont2Inner */
.cont2Inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5rem; }

@media (min-width:1025px) and (max-width:1280px){
	.cont2Inner { gap:4rem; }
}

@media (max-width:1024px){
	.cont2Inner { flex-wrap:wrap; gap:4rem; }
}



/* 최근 영상 */
.mVod { float:left; position:relative; width:calc(68% - 5rem); }
.mVod .vodTop { width:100%; text-align:center; margin-bottom:2.4rem; }
.mVod .vodTop  h2 { width:100%; color:#111; font-size:3.3rem; font-weight:800; margin-bottom:1.7rem; }
.mVod .vodTop .tabmenuUl { width:100%; display:flex; justify-content:center; gap:1.2rem; }
.mVod .vodTop .tabmenuUl li { }
.mVod .vodTop .tabmenuUl li a:link,
.mVod .vodTop .tabmenuUl li a:visited { width:11.2rem; height:5rem; line-height:5rem; border-radius:2.5rem; background:#cfcfcf; color:#444; font-size:1.8rem; font-weight:700; text-align:center; display:inline-block; transition:0.3s; }
.mVod .vodTop .tabmenuUl li a:active,
.mVod .vodTop .tabmenuUl li a:focus,
.mVod .vodTop .tabmenuUl li a:hover,
.mVod .vodTop .tabmenuUl li a.select { background:#002f5d; color:#fff;  }

.mVod .vodList { width:100%; }
.mVod .vodList .conList { position:relative; width:100%; display:none; }
.mVod .vodList .conList ul { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:3rem; }
.mVod .vodList .conList ul li { width:calc(33.333% - 2rem); }
.mVod .vodList .conList ul li a:link,
.mVod .vodList .conList ul li a:visited { width:100%; /*height:286px;*/ border-radius:2rem; background:#fff; box-shadow:0 0.4rem 1rem rgba(216,222,226,1); overflow:hidden; transition:0.3s;  } 
.mVod .vodList .conList ul li a:active,
.mVod .vodList .conList ul li a:focus,
.mVod .vodList .conList ul li a:ahover { }


.mVod .vodList .conList li a .picArea { position:relative; width:100%; overflow:hidden; transition:0.3s; }
.mVod .vodList .conList li a .picArea span { position:absolute; left:2rem; bottom:2rem; }

.mVod .vodList .conList li a:link .picArea .pic,
.mVod .vodList .conList 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; }
.mVod .vodList .conList li a:active .picArea .pic,
.mVod .vodList .conList li a:focus .picArea .pic,
.mVod .vodList .conList li a:hover .picArea .pic { transform:scale(110%); }

.mVod .vodList .conList li a .picArea .pic img { width:100%; }


.mVod .vodList .conList li a .bar { width:100%; min-height:14.6rem; padding:2.4rem 2rem 0 2rem;  }
.mVod .vodList .conList li a .bar i { height:2.8rem; line-height:2.8rem !important; padding:0 1.2rem; border-radius:1.4rem; color:#fff; text-align:center; font-size:1.5rem; display:inline-block; margin-bottom:1.0rem; }
.mVod .vodList .conList li a .bar i.type1 { background:#00479d; } /* 본회의 */
.mVod .vodList .conList li a .bar i.type2 { background:#16989a; } /* 상임위원회 */
.mVod .vodList .conList li a .bar i.type3 { background:#166e9a; } /* 특별위 */

.mVod .vodList .conList li a .bar p { width:100%; color:#111; font-weight:700; font-size:1.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; margin-bottom:0.1rem; }

.mVod .vodList .conList li a .bar span { width:100%; color:#777; font-size:1.6rem; font-weight:500; display:block; }

.mVod .vodList .conList li a .bar p.none { width:100%; color:#777; text-align:center; margin-top:30px; }

.mVod .vodList .conList a.more:link,
.mVod .vodList .conList a.more:visited { position:absolute; left:calc(50% + 19.2rem); top:-7.4rem; width:5rem; height:5rem; border-radius:2.5rem; background:#cfcfcf; display:flex; justify-content:center; align-items:center; transition:0.3s; }
.mVod .vodList .conList a.more:active, 
.mVod .vodList .conList a.more:focus,
.mVod .vodList .conList a.more:hover { background:#b5e0f8; }



@media (min-width:1025px) and (max-width:1280px){
	.mVod { width:calc(68% - 4rem); }

	.mVod .vodList .conList li a .bar { padding:2.4rem 1.6rem 0;  }
}


@media (min-width:769px) and (max-width:1024px){
	.mVod { width:100%; }
}


@media (max-width:768px){
	.mVod { width:100%; }
	
	.mVod .vodTop .tabmenuUl li a:link,
	.mVod .vodTop .tabmenuUl li a:visited { width:10rem; }

	.mVod .vodList .conList { overflow:auto; }
	.mVod .vodList .conList ul { width:81rem; }
	.mVod .vodList .conList ul li { width:25rem; }
}








/* cont2right */
#cont2right { width:/*440px*/32%; max-width:440px; }

@media (min-width:1025px) and (max-width:1280px){
	#cont2right { }
}

@media (min-width:769px) and (max-width:1024px){
	#cont2right { width:100%; max-width:100%; display:flex; align-items:flex-end; }
}

@media (max-width:768px){
	#cont2right { width:100%; max-width:100%; }
}





/* 생방송일정 */
.mSchedule { position:relative; width:100%; margin-bottom:4rem; }
.mSchedule h2 { position:relative; color:#111; font-size:3.3rem; font-weight:800; margin-bottom:1.7rem; }

.calDate { float:left; display:flex; justify-content:flex-start; gap:0.8rem; margin-bottom:2.4rem; } 
.calDate .date { width:16rem; height:5rem; line-height:5rem; border-radius:2.5rem; background:#1065cc; color:#fff; font-weight:700; text-align:center; display:inline-block; }
.calDate .calBtn:link,
.calDate .calBtn:visited { width:5rem; height:5rem; line-height:5rem; border-radius:2.5rem; background:#cfcfcf; display:flex; justify-content:center; align-items:center;  transition:0.3s; }
.calDate .calBtn:active,
.calDate .calBtn:focus,
.calDate .calBtn:hover { background:#b5e0f8; }

.mSchedule a.more:link,
.mSchedule a.more:visited { position:absolute; right:0; top:5.7rem; width:5rem; height:5rem; border-radius:2.5rem; background:#cfcfcf; display:flex; justify-content:center; align-items:center; transition:0.3s;  }
.mSchedule a.more:active, 
.mSchedule a.more:focus,
.mSchedule a.more:hover { background:#b5e0f8; }


.calBox { clear:both; position:relative; width:100%; height:40.7rem; padding:2.4rem 2rem 0 2rem; border-radius:20px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); }

			/* 달력 */
.calBox table { border-top:1px solid #ddd; border-right:1px solid #ddd; font-weight:500; }
.calBox table th,
.calBox table td { border-bottom:1px solid #ddd; border-left:1px solid #ddd; }
.calBox table th { width:14.2%; height:40px; line-height:40px; background:#e3f2f3; color:#333; }
.calBox table th.sun,
.calBox table th.sat { width:14.5%; }
.calBox table td { height:52px; height:52px; padding:6px; background:#fff; color:#777; text-align: center;}
.calBox table td.prevD span { color:#888 !important; } 

.calBox table .sun { color:#da131a;}
.calBox table .sat { color:#1757b7;}
.calBox table .today { position:relative; }
.calBox table .today:after { content:''; position:absolute; left:50%; bottom:-0.4rem; width:2rem; height:0.4rem; background:orange; display:block; transform:translate(-50%, 0);}


.calBox table td a:link,
.calBox table td a:visited { max-width:40px; width:100%; height:100%; line-height:36px; border-radius:4px; background:#16989a; color:#fff; display:block; margin:0 auto; }
.calBox table td a:active,
.calBox table td a:focus,
.calBox table td a:hover { box-shadow: 2px 2px 5px rgba(6,103,104,0.5);}


@media (min-width:1281px) and (max-width:1400px){	
	.calBox { height:auto; padding:2.4rem 2rem 2.8rem 2rem; }
}

@media (min-width:1025px) and (max-width:1280px){
	.mSchedule { margin-bottom:2.8rem; }
	.calBox { height:auto; padding:2.4rem 2rem 2.8rem 2rem; }
	.calDate .date { width:12rem; }
}

@media (min-width:769px) and (max-width:1024px){
	.mSchedule { float:left; width:calc(60% - 1.6rem); margin:0 1.6rem 0 0; }
	.calBox { height:auto; padding:2.4rem 2rem 2.8rem 2rem; }
}

@media (max-width:768px){
	.calBox { height:auto; padding:2.4rem 1.6rem 2.8rem; }
	.calDate .date { width:12rem; }
}



/* 메인배너 */
.mBanner { width:100%; }
.mBanner ul { display:flex; justify-content:space-between; gap:2rem; }
.mBanner ul li { position:relative; width:50%; height:19.7rem; }

.mBanner ul li a:link,
.mBanner ul li a:visited { position:relative; width:100%; height:100%; padding-top:3.2rem; border:1px solid #ddd; border-radius:2rem; color:#555; font-size:1.9rem; font-weight:700; text-align:center; box-shadow:0 0 10px rgba(0,0,0,0.1); transition:0.3s; }
.mBanner ul li a:active,
.mBanner ul li a:focus,
.mBanner ul li a:hover { border:1px solid #16989a; color:#002f5d; }

.mBanner ul li a:after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:2rem; background:url(/broadcast/images/main/banner_bg.gif); opacity:0; transition:opacity 0.5s ease; z-index:-1; }
.mBanner ul li a:hover::after { opacity:1; }

.mBanner ul li a img { display:block; margin:0 auto 1rem; }


@media (min-width:1025px) and (max-width:1280px){
	.mBanner ul li { height:auto;  }
	.mBanner ul li a:link,
	.mBanner ul li a:visited { padding:1.6rem; }
	.mBanner ul li a img { height:8rem; }
}

@media (min-width:769px) and (max-width:1024px){
	.mBanner { float:right; width:calc(40% - 1.6rem); margin:0 0 0 1.6rem; }
	.mBanner ul { flex-wrap:wrap; }
	.mBanner ul li { width:100%; height:19.7rem; }
}

@media (max-width:768px){
	.mBanner ul li { height:auto; }
	.mBanner ul li a:link,
	.mBanner ul li a:visited { padding:1.6rem; }
	.mBanner ul li a img { height:8rem; }
}