@charset "utf-8";


/* 메인 콘텐츠 배경 */
.bg .bg1 { position:absolute; left:0; top:0; width:260px; height:260px; background:url(/broadcast/images/main/bg1.png) no-repeat;  }
.bg .bg2 { position:absolute; left:0; top:0; width:134px; height:751px; background:url(/broadcast/images/main/bg2.png) no-repeat;  }
.bg .bg3 { position:absolute; left:0; bottom:0; width:445px; height:744px; background:url(/broadcast/images/main/bg3.png) no-repeat;  }
.bg .bg4 { position:absolute; right:0; top:0; width:361px; height:896px; background:url(/broadcast/images/main/bg4.png) no-repeat;  }

.bg .bg5 { position:absolute; left:calc(50% + 739px); top:0; width:20px; padding-top:160px; color:#A6ABBD; letter-spacing:0px; writing-mode:vertical-rl; }
.bg .bg5:before { content:''; position:absolute; left:6px; top:0; width:1px; height:150px; background:#a5aabd; display:block; }
.bg .bg6 { position:absolute; left:calc(50% - 70px); bottom:0; width:607px; height:304px; background:url(/broadcast/images/main/bg6.png) no-repeat;  }
.bg .bg7 { position:absolute; right:10px; bottom:-121px; width:242px; height:242px; background:url(/broadcast/images/main/bg7.png) no-repeat; transition:0.3s; 
			animation-name:bg7ac;
			animation-duration:20.0s; /* 걸리는 시간 */
			animation-fill-mode:forwards;
			animation-delay:0;
			animation-timing-function:linear;
			animation-iteration-count:infinite; /* 반복횟수 */
			animation-direction:normal; /* 진행방향 alternate : 순방향 -> 역방향*/ 
}

@keyframes bg7ac {
	0% { transform:rotate(364deg); }
	100% { transform:rotate(0deg); }
}








/* 타이틀 */
#top h1.title { position:absolute; left:0; top:54px; }
#top h1.title a { width:100%; height:52px; padding:0px 0 0 65px; background:url(/broadcast/images/common/mark.png) no-repeat; background-size:auto 52px; color:#000; font-weight:800; display:inline-block; }
#top h1.title a span { color:#6A6A6A; font-size:1.2rem; font-weight:500;  letter-spacing:-0.5px; display:block; margin-top:1px; }

@media (min-width:1025px) and (max-width:1400px){
	#top h1.title { left:16px; }
}

@media (min-width:769px) and (max-width:1024px){
	#top h1.title { left:16px; top:15px; }

	.sidenav h1 { width:220px; height:70px; padding:15px 0 0 50px; background:url(/broadcast/images/common/mark.png) no-repeat 0 15px; background-size:auto 40px; color:#fff; font-weight:800; font-size:1.7rem; display:block; margin-left:16px; }
	.sidenav h1 i { display:block; }
}

@media (max-width:768px){
	#top h1.title { left:16px; top:15px; height:40px; }
	#top h1.title a { height:40px; padding:0 0 0 50px; background-size:auto 40px; font-size:1.7rem; }
	#top h1.title a i { display:block; }
	#top h1.title a span { display:none; }

	.sidenav h1 { width:220px; height:70px; padding:15px 0 0 50px; background:url(/broadcast/images/common/mark.png) no-repeat 0 15px; background-size:auto 40px; color:#fff; font-weight:800; font-size:1.7rem; display:block; margin-left:16px; }
	.sidenav h1 i { display:block; }
}








/* 생방송영역 */
.mOnairArea { display:flex; justify-content:space-between; gap:40px; }

@media (max-width:1024px){
	.mOnairArea { flex-wrap:wrap; }
}



/* 오늘의 생방송 */
.todayOnair { position:relative; width:440px; }
.todayOnair .toTop { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:26px; }
.todayOnair .toTop h2 { font-size:3.3rem; font-weight:800;  }
.todayOnair .toTop .date { position:relative; top:5px; width:212px; height:32px; line-height:32px; border-radius:3px; background:#fff; color:#031539; font-weight:700; text-align:center; display:inline-block; box-shadow:0 0 4px rgba(59,75,103,0.25); }
.todayOnair ul { display:flex; flex-wrap:wrap; flex-direction:row; justify-content:space-between; overflow:visible; }
.todayOnair ul li { width:100%; margin-bottom:11px; }
.todayOnair ul li:last-child { margin-bottom:0px; }
.todayOnair ul li a:link,
.todayOnair ul li a:visited { width:100%; padding:10px 14px; border:2px solid #445aa0; border-radius:16px; background:#fff; box-shadow:0 0 4px rgba(41,48,96, 0.1); }
.todayOnair ul li a:active, 
.todayOnair ul li a:focus, 
.todayOnair ul li a:hover,
.todayOnair ul li a.onair { border:2px solid #233570; }


.todayOnair ul li:nth-child(2) a:link,
.todayOnair ul li:nth-child(2) a:visited { border:2px solid #49ab58;  }
.todayOnair ul li:nth-child(2) a:active, 
.todayOnair ul li:nth-child(2) a:focus, 
.todayOnair ul li:nth-child(2) a:hover,
.todayOnair ul li:nth-child(2) a.onair { border:2px solid #21772e;  }

.todayOnair ul li:nth-child(3) a:link,
.todayOnair ul li:nth-child(3) a:visited { border:2px solid #49ab58; }
.todayOnair ul li:nth-child(3) a:active, 
.todayOnair ul li:nth-child(3) a:focus, 
.todayOnair ul li:nth-child(3) a:hover,
.todayOnair ul li:nth-child(3) a.onair { border:2px solid #21772e;  }

.todayOnair ul li:nth-child(4) a:link,
.todayOnair ul li:nth-child(4) a:visited { border:2px solid #983aab; }
.todayOnair ul li:nth-child(4) a:active, 
.todayOnair ul li:nth-child(4) a:focus, 
.todayOnair ul li:nth-child(4) a:hover,
.todayOnair ul li:nth-child(4) a.onair { border:2px solid #701f80; }




.todayOnair ul li dl dt { float:left; width:137px; border-radius:8px; overflow:hidden; display:flex; justify-content:center; margin-right:15px; }
.todayOnair ul li dl dt img { filter: grayscale(100%); transition:0.3s; }

.todayOnair ul li dl dd { margin-left:152px; width:calc(100% - 152px);  }
.todayOnair ul li dl dd b { height:23px; line-height:23px; padding:0 8px; border-radius:3px; font-size:1.5rem; margin-bottom:8px;  }
.todayOnair ul li dl dd b.type1 { background:#EFF1F9; color:#353D96; } 
.todayOnair ul li dl dd b.type2 { background:#EFF9F1; color:#21772E; } 
.todayOnair ul li dl dd b.type3 { background:#F6EFF9; color:#701F80; } 
.todayOnair ul li dl dd p { color:#262626; font-weight:500; margin-bottom:6px;}
.todayOnair ul li dl dd > div { display:flex; justify-content:space-between; }
.todayOnair ul li dl dd > div.reload { justify-content:flex-end; }
.todayOnair ul li dl dd span { color:#666; font-size:1.5rem; }
.todayOnair ul li dl dd strong { height:24px; line-height:24px; padding:0 4px; border-radius:3px; font-weight:500; font-size:1.5rem; display:inline-block; }
.todayOnair ul li dl dd strong.onair { background:#e84848; color:#fff; }
.todayOnair ul li dl dd strong.offair { background:#f0f0f0; color:#323232; }
.todayOnair ul li dl dd strong.reload { background:#f0f1f5; color:#245FA3; }

.todayOnair ul li a.onair dl dt img { filter: grayscale(0); }



.todayOnair ul li dl.none { width:100%; padding:10px 14px; border-radius:16px; background:#fff; box-shadow:0 0 4px rgba(41,48,96, 0.1); overflow:hidden; }
.todayOnair ul li dl.none p { color:#777; font-size:1.8rem; text-align:center; margin:4px 0 0 0; }

.todayOnair ul li:nth-child(1) dl.none { border:2px solid #233570;  }
.todayOnair ul li:nth-child(2) dl.none { border:2px solid #21772e;  }
.todayOnair ul li:nth-child(3) dl.none { border:2px solid #21772e;  }
.todayOnair ul li:nth-child(4) dl.none { border:2px solid #701f80; }





@media (min-width:1025px) and (max-width:1400px){
	.todayOnair .toTop .date { top:0; width:100%; margin-top:12px; }

	.todayOnair ul li dl dt { width:78px; }
	.todayOnair ul li dl dd { margin-left:93px; width:calc(100% - 93px);  }
}

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

@media (max-width:768px){
	.todayOnair { width:100%; order:2; }
	
	.todayOnair .toTop .date { top:0; width:100%; margin-top:12px; }

	.todayOnair ul li dl dt { width:78px; }
	.todayOnair ul li dl dd { margin-left:93px; width:calc(100% - 93px);  }
}







/* 방송플레이어 */
.vodPlayer { position:relative; width:920px;  }
.vodPlayer .video-container { width:100%; border-radius:20px; background:#333; overflow:hidden; aspect-ratio: 16 / 9; }
.vodPlayer .video-container video { width:100%; height:100%; object-fit:cover; }
.vodPlayer .video-container #xmcaster { width:100%; height:100%; object-fit:cover; }
.vodPlayer .titlearea { position:absolute; left:0; top:0; width:100%; height:100px; padding:14px 24px 0 24px; border-radius:20px 20px 0 0; background:linear-gradient(180deg, #000 0%, transparent 65%); color:#fff; font-weight:700; font-size:3.2rem; overflow:hidden; }
.vodPlayer .titlearea i { position:relative; top:-5px; height:28px; line-height:28px; padding:0 8px; border-radius:3px; background:#113d8e; color:#fff; font-weight:500; font-size:1.5rem;  display:inline-block;}
.vodPlayer .titlearea i:before { content:''; position:relative; top:-2px; width:8px; height:8px; border-radius:50%; background:#fff; box-sizing:border-box; display:inline-block; margin-right:7px;}
.vodPlayer .titlearea i.on { background:#f83435; }


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

	.vodPlayer .titlearea { position:static; width:100%; height:auto; padding:0; border-radius:0; background:none; color:#222; overflow:visible; margin-top:20px; }
}

@media (max-width:768px){
	.vodPlayer .titlearea { font-size:2.6rem; letter-spacing:-1px;  }
	.vodPlayer .titlearea i { position:static; width:80px; text-align:center; display:block; margin-bottom:2px; }
}




/* 최근 영상 */
.mVod { float:left; position:relative; width:/*920px*/calc(68% - 32px); }
.mVod .vodTop { width:100%; display:flex; justify-content:space-between; margin-bottom:25px; }
.mVod .vodTop  h2 { position: relative;  font-size:3.3rem; font-weight:800; }
.mVod .vodTop .tabmenuUl { margin-right:67px; display:flex; justify-content:flex-end; }
.mVod .vodTop .tabmenuUl li { margin-left:12px; }
.mVod .vodTop .tabmenuUl li a:link,
.mVod .vodTop .tabmenuUl li a:visited { height:40px; line-height:40px; padding:0 12px; border-radius:20px; background:#fff; color:#052B57; font-weight:700; 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:#063a74; color:#fff; border:none; }

.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:19px 16px; }
.mVod .vodList .conList ul li { width:calc(33.333% - 10.666px); }
.mVod .vodList .conList ul li a:link,
.mVod .vodList .conList ul li a:visited { width:100%; /*height:286px;*/ border-radius:0 20px 0 20px; background:#fff; box-shadow:0 4px 10px 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 { transform:translateY(-20px); }


.mVod .vodList .conList li a .picArea { position:relative; width:100%; overflow:hidden; transition:0.3s; }
.mVod .vodList .conList li a .picArea:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:180px; display:block;  }

.mVod .vodList .conList li a .picArea span { position:absolute; left:15px; bottom:15px; }

.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:12rem; padding:12px 16px 0 16px;  }
.mVod .vodList .conList li a .bar i { height:23px; line-height:23px !important; padding:0 8px; border-radius:4px; text-align:center; font-size:1.5rem; display:inline-block; margin-bottom:7px; }
.mVod .vodList .conList li a .bar i.type1 { background:#f0f0fa; color:#353c97; } /* 본회의 */
.mVod .vodList .conList li a .bar i.type2 { background:#eff9f0; color:#21772e; } /* 상임위원회 */
.mVod .vodList .conList li a .bar i.type3 { background:#f6eef9; color:#701e80; } /* 특별위원회 */
.mVod .vodList .conList li a .bar i.type4 { background:#2d4ab2; color:#353c97; } /* 5분자유발언 */
.mVod .vodList .conList li a .bar i.type5 { background:#2d4ab2; color:#353c97; } /* 군정질문 */

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

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

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

.mVod .vodList .conList > a:link,
.mVod .vodList .conList > a:visited { position:absolute; right:0; top:-65px; transition:0.3s; }
.mVod .vodList .conList > a:active, 
.mVod .vodList .conList > a:focus,
.mVod .vodList .conList > a:hover { transform:rotate(-45deg);}



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


@media (max-width:768px){
	.mVod { width:100%; margin-bottom:40px; }

	.mVod .vodTop { display:block; }
	.mVod .vodTop  h2 { margin-bottom:12px; }
	.mVod .vodTop .tabmenuUl { margin-right:0; justify-content:flex-start; }
	.mVod .vodTop .tabmenuUl li:first-child { margin-left:0px; }

	.mVod .vodTop .tabmenuUl li { margin-left:10px; }
	.mVod .vodTop .tabmenuUl li a:link,
	.mVod .vodTop .tabmenuUl li a:visited { padding:0 11px; }

	.mVod .vodList .conList { position:relative; width:100%; display:none; overflow:auto; }
	.mVod .vodList .conList ul { width:782px; }
	.mVod .vodList .conList ul li { width:250px; }

	.mVod .vodList .conList > a:link,
	.mVod .vodList .conList > a:visited { top:-116px; display:none; }
}





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

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







/* 생방송일정 */
.mSchedule { position:relative; width:100%; margin-bottom:40px; }
.mSchedule h2 { position: relative;  font-size:3.3rem; font-weight:800; margin-bottom:26px; }
.mSchedule a.more:link,
.mSchedule a.more:visited { position:absolute; right:0; top:0px; transition:0.3s; }
.mSchedule a.more:active, 
.mSchedule a.more:focus,
.mSchedule a.more:hover { transform:rotate(-45deg);}

.calBox { position:relative; width:100%; height:478px; padding:21px 24px 0 24px; border-radius:20px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); }

.calBox .calDate { display:flex; justify-content:flex-end; gap:8px; margin-bottom:20px; } 
.calBox .calDate .date { height:32px; line-height:32px; color:#111; font-weight:700; font-size:2.2rem; display:inline-block; margin-right:auto; }
.calBox .calDate .calBtn:link,
.calBox .calDate .calBtn:visited { width:77px; height:32px; line-height:32px; padding:0 12px; border-radius:4px; background:#f4f5f7; font-size:1.5rem; display:inline-block; }
.calBox .calDate .calBtn:active,
.calBox .calDate .calBtn:focus,
.calBox .calDate .calBtn:hover { background:#e6ebef; }


			/* 달력 */
.calBox table { font-weight:500; }
.calBox table thead { border-bottom:1px solid #ddd; }
.calBox table th { width:14.2%; height:40px; line-height:40px; 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:#333; text-align: center;}
.calBox table td.prevD span { color:#888 !important; } 

.calBox table .sun { color:#da131a;}
.calBox table .sat { color:#1757b7;}
.calBox table .today { max-width:40px; width:100%; height:100%; line-height:38px; border-radius:4px; background:#073a73; color:#fff; display:block; margin:0 auto; }


.calBox table td a:link,
.calBox table td a:visited { max-width:40px; width:100%; height:100%; line-height:36px; border:1px solid #8A949E; border-radius:4px; color:#333; 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(0,0,0,0.15);}


@media (min-width:1281px) and (max-width:1400px){
	.calBox { height:auto; padding:21px 24px 24px 24px; }
}

@media (min-width:1025px) and (max-width:1280px){
	.calBox { height:auto; padding:21px 24px 24px 24px; }
	.calBox .calDate .calBtn:link,
	.calBox .calDate .calBtn:visited { width:auto; }
	.calBox .calDate .calBtn span { display:none; }
}

@media (min-width:769px) and (max-width:1024px){
	.calBox { height:auto; padding:21px 24px 24px 24px; }
	.calBox .calDate .calBtn:link,
	.calBox .calDate .calBtn:visited { width:auto; }
	.calBox .calDate .calBtn span { display:none; }
}


@media (max-width:768px){
	.calBox { height:auto; padding:21px 16px 24px 16px; }

	.calBox .calDate .calBtn:link,
	.calBox .calDate .calBtn:visited { width:auto; }
	.calBox .calDate .calBtn span { display:none; }


	.calBox table td { height:44px; height:44px; padding:2px; }
}



/* 메인배너 */
.mBanner { width:100%; }
.mBanner ul { display:flex; justify-content:space-between; gap:20px; }
.mBanner ul li { position:relative; width:50%; height:80px; }
.mBanner ul li:nth-child(1) { border-radius:20px; background:#fff3db; }
.mBanner ul li:nth-child(1)::before { content:''; position:absolute; right:18px; top:16px; width:48px; height:48px; border-radius:50%; background:#fff url(/broadcast/images/main/banner_icon1.png) no-repeat 50% 50%; display:block; }
.mBanner ul li:nth-child(2) { border-radius:20px; background:#eef7f2; }
.mBanner ul li:nth-child(2)::before { content:''; position:absolute; right:18px; top:16px; width:48px; height:48px; border-radius:50%; background:#fff url(/broadcast/images/main/banner_icon2.png) no-repeat 50% 50%; display:block; }
.mBanner ul li a { width:100%; height:100%; line-height:80px; padding-left:20px; color:#333; font-weight:700; font-size:2.0rem; transition:0.3s; }
.mBanner ul li a:link span, 
.mBanner ul li a:visited span { position:relative; top:-2px; width:24px; height:24px; line-height:24px; border-radius:50%; color:#333; font-size:1.6rem; text-align:center; display:inline-block; transition:0.3s; margin-left:10px; }
.mBanner ul li a:active span, 
.mBanner ul li a:focus span,
.mBanner ul li a:hover span { background:#333; color:#fff; transform:rotate(-45deg); }


@media (min-width:1025px) and (max-width:1280px){
	.mBanner ul li:nth-child(1)::before { right:12px; }
	.mBanner ul li:nth-child(2)::before { right:12px; }
	.mBanner ul li a { padding-left:15px; }
	.mBanner ul li a:link span, 
	.mBanner ul li a:visited span { margin-left:0px; }
}

@media (max-width:480px){
	.mBanner ul { gap:12px; }
	.mBanner ul li:nth-child(1)::before { right:12px; }
	.mBanner ul li:nth-child(2)::before { right:12px; }
	.mBanner ul li a { padding-left:15px; }
	.mBanner ul li a:link span, 
	.mBanner ul li a:visited span { margin-left:0px; }
}