@charset "utf-8";


/* 레이아웃 */

#gaonwrap { min-width:1440px; width:100%; }

#top { position:relative; min-width:140rem; width:100%; height:14.1rem; border-bottom:1px solid #ddd; z-index:100; }
	#toparea { position:relative; width:140rem; margin:0 auto; }

.inner { position:relative; width:140rem; margin:0 auto;  }

#container { position:relative; min-width:100%; width:100%; z-index:1; }	
    #cont1 { position:relative; width:100%; padding:7.2rem 0; background:#f0f1f6; }
    #cont2 { position:relative; width:100%; padding:6.7rem 0 10rem 0; }			
	
#bottom { position:relative; width:100%; background:#444c57; color:#ccc; z-index:2; }	


@media (min-width:1281px) and (max-width:1400px){
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:14.1rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; margin:0 auto; }

    .inner { position:relative; width:100%; padding:0 2.8rem; margin:0 auto; }
	
	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        #cont1 { position:relative; width:100%; padding:7.2rem 0; }			
		#cont2 { position:relative; width:100%; padding:6.7rem 0 10rem 0; }

	#bottom { position:relative; width:100%; background:#444c57; color:#ccc; z-index:2; }
}


@media (min-width:1025px) and (max-width:1280px){
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:14.1rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; padding:0 2rem; margin:0 auto; }
	
	.inner { position:relative; width:100%;  padding:0 2.8rem; margin:0 auto; }

	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        #cont1 { position:relative; width:100%; padding:7.2rem 0; }			
		#cont2 { position:relative; width:100%; padding:6.7rem 0 10rem 0; }
			
	#bottom { position:relative; width:100%; background:#444c57; color:#ccc; z-index:2; }
}


@media (min-width:769px) and (max-width:1024px){
	html, body, #gaonwrap { min-width:100%; width:100%; }
		
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:11.5rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; margin:0 auto; }
	
	.inner { position:relative; width:100%;  padding:0 2.4rem; margin:0 auto; }

	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        #cont1 { position:relative; width:100%; padding:6rem 0; }			
		#cont2 { position:relative; width:100%; padding:6rem 0 8.4rem 0; }
			
	#bottom { position:relative; width:100%; background:#444c57; color:#ccc; z-index:2; }
}


@media (max-width:768px){
	html, body, #gaonwrap { min-width:100%; width:100%; }
		
	#gaonwrap { min-width:100%; width:100%; }

	#top { position:relative; min-width:100%; width:100%; height:10.5rem; border-bottom:1px solid #ddd; z-index:100; }
		#toparea { position:relative; width:100%; margin:0 auto; }
	
	.inner { position:relative; width:100%; padding:0 1.6rem; margin:0 auto; }

	#container { position:relative; min-width:100%; width:100%; z-index:1; }
        #cont1 { position:relative; width:100%; padding:5.2rem 0; }			
		#cont2 { position:relative; width:100%; padding:5.2rem 0 7.2rem 0; }
			
	#bottom { position:relative; width:100%; background:#444c57; color:#ccc; z-index:2; }
}





/* 상단배너 */
#top-ban { width:100%; height:5rem; line-height:5rem; background:#006066;  }
#top-ban .nuri { padding-left:3.2rem; background:url(/broadcast/images/common/icon_taegeukgi.gif) no-repeat 0 50%; color:#fff; font-size:1.6rem; }

#top-ban > .inner { display:flex; justify-content:space-between; align-items:center; }

@media (max-width:1024px){
	#top-ban { height:3.2rem; line-height:3.2rem; }
	#top-ban .nuri { padding-left:3.2rem; font-size:1.4rem; }

}






/* 모바일용 상단 버튼 */
.mobileTopBtn { display:none; width:0; height:0; overflow:hidden;  }

@media (min-width:769px) and (max-width:1024px){
	.mobileTopBtn { display:block; }
	.mobileTopBtn li.mobileTopBtn1 { position:absolute; right:3rem; top:4.4rem; display:block; }

	.mobileTopBtn li.mobileTopBtn1 a { text-align:center; font-size:1.5rem; display:flex; flex-direction:column; justify-content:center; align-items:center; }
	.mobileTopBtn li.mobileTopBtn1 a img { width:3.4rem; display:block; margin-bottom:0; }
}


@media (max-width:768px){
	.mobileTopBtn { display:block; }
	.mobileTopBtn li.mobileTopBtn1 { position:absolute; right:1.2rem; top:4.7rem; display:block; }

	.mobileTopBtn li.mobileTopBtn1 a { text-align:center; font-size:1.4rem; display:flex; flex-direction:column; justify-content:center; align-items:center; }
	.mobileTopBtn li.mobileTopBtn1 a img { width:2.2rem; display:block; margin-bottom:-2px; }
}




/* 외부 링크 */
.underLink { position:relative; float:right; z-index:100; display:flex; gap:2rem; margin-top:0.6rem; }

.underLink > ul { display:flex; justify-content:space-between; }
.underLink > ul > li { position:relative; width:12rem;  }

.underLink > ul > li > a:link,
.underLink > ul > li > a:visited { width:100%; height:4.4rem; line-height:4.4rem; color:#ccc; font-size:1.6rem; font-weight:500; display:block; }
.underLink > ul > li > a:active,
.underLink > ul > li > a:focus,
.underLink > ul > li > a:hover { color:#fff; }
.underLink > ul > li > a.select { border-radius:0.4rem 0.4rem 0 0; background:#fff; color:#004b4c; text-align:center; }


/* 폰트크기 */
.fontSetting { position:relative; margin-top:0.4rem;  }
.fontSetting ul {display:flex; justify-content:flex-end; gap:0.5rem; }
.fontSetting li { width:3rem; }
.fontSetting li a:link,
.fontSetting li a:visited { width:3rem; height:3rem; line-height:3rem; border-radius:0.4rem;  background:#009d7a; transition:0.3s; display:flex; justify-content:center; align-items:center; }
.fontSetting li a:active,
.fontSetting li a:focus,
.fontSetting li a:hover { background:#36a6a8; }


@media (max-width:1024px){
	.underLink { display:none; }
}







/* 사이드메뉴 */
.sidemenu { float:right; display:none; }

.sidemenu ul { float:left; position:relative; width:auto; margin-top:10px; }
.sidemenu ul li { position:relative; float:left; margin-left:4px;}

.sidemenu ul li a:link,
.sidemenu ul li a:visited { width:30px; height:30px; line-height:28px; border: 1px solid #999; border-radius: 5px; text-align:center; display:block; }
.sidemenu ul li a:active,
.sidemenu ul li a:focus,
.sidemenu ul li a:hover { border-color: #9baee4; background:#9baee4; }


@media (min-width:1025px) and (max-width:1400px){
	.sidemenu { margin-right:15px; }	
}

@media (max-width:1024px){
	.sidemenu { display:none; } 	 	
}






/* 타이틀 */
#top h1.title { position:absolute; left:0; top:2rem; }
#top h1.title a { width:100%; height:5rem; padding:0 0 0 6.2rem; background:url(/broadcast/images/common/mark.png) no-repeat; background-size:auto 5rem; display:inline-block; }
#top h1.title a strong { position:relative; top:-0.2rem; color:#000; font-size:2.8rem; font-weight:800; letter-spacing:-1px; }
#top h1.title a span { color:#666; font-size:1.1rem; font-weight:700; letter-spacing:0; display:block; margin-top:-1px; }

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

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

@media (max-width:768px){
	#top h1.title { left:1.6rem; top:1.6rem; }
	#top h1.title a { height:4rem; padding:0 0 0 4.8rem; background-size:auto 4rem; }
	#top h1.title a strong { top:-0.8rem; font-size:2.4rem; }
	#top h1.title a span { font-size:0.94rem; margin-top:-8px;  }
}







/* 메인 메뉴 */
#menu { position:absolute; right:0px; top:0; z-index:99; }
#topMenu { position:relative; overflow:visible !important; }

#topMenu > li { position:relative; float:left; text-align:center; display:inline-block; }

#topMenu > li > a:link,
#topMenu > li > a:visited { position:relative; vertical-align:middle; line-height:9rem; padding:0 6rem; color:#111; font-size:2.2rem; font-weight:700; letter-spacing:-1px; display:block; }
#topMenu > li > a:active,
#topMenu > li > a:focus,
#topMenu > li > a:hover,
#topMenu > li > a.select { color:#115fae;  }

#topMenu > li > a:link::before,
#topMenu > li > a:visited::before { position:absolute; left:50%; bottom:0px; content:''; width:0; border-bottom:3px solid #115fae; text-align:center; transition:0.3s; transform:translate(-50%, 0); display:block; z-index:100; }
#topMenu > li > a:active::before,
#topMenu > li > a:focus::before,
#topMenu > li > a:hover::before { width:100%; }


@media (min-width:1025px) and (max-width:1280px){
	#topMenu > li > a:link,
	#topMenu > li > a:visited { padding:0 30px; }
}



@media (max-width:1024px){
	#menu { display:none; } 
}


/* 서브메뉴 표시 */
#topMenu > li:hover > ul { background:#fafafa; }
#topMenu > li > ul { position:absolute; left:0; top:9rem; width:100%; height:13rem; padding:1rem 0 0 0; border-top:1px solid #ddd; border-left:1px solid #eee; background:#fff; display:none; clear:both; z-index:1003;   }
#topMenu > li > ul > li { position:relative; width:100%; padding:0.3rem 1rem 0.4rem 1rem; text-align:left; display:block; }
#topMenu > li > ul.end { border-right:1px solid #eee; }

#topMenu > li > ul > li > a:link,
#topMenu > li > ul > li > a:visited { width:100%; height:auto; padding:0; background:none; color:#333; border:0; line-height:1.3; text-decoration:none; font-size:1.6rem; margin:0; letter-spacing:-1px;  }
#topMenu > li > ul > li > a:active,
#topMenu > li > ul > li > a:hover,
#topMenu > li > ul > li > a:focus,
#topMenu > li > ul > li > a.select { clear:both; color:#2d7f39; }

#topMenu > li > ul > li > ul.mdepth3 { width:0; height:0; font-size:0; display:none; }

.submenu { display:none; overflow:hidden; }

.menubox { position:absolute; left:0; top:14rem; width:100%; height:13.3rem; border-top:1px solid #ddd; border-bottom:3px solid #2d7f39; background:#fff; display:none; z-index:10; }


@media (max-width:1024px){
	.topMenu,
	.menubox { display:none; } 	
	.menubox { width:0; height:0; border:0; line-height:0; }
}	
	













/* 하단 */
#bottom > .inner { padding:5rem 0 8.5rem; }

#bottom .f-logo { width:100%; height:5rem; padding:0 0 0 6.2rem; background:url(/broadcast/images/common/mark.png) no-repeat; background-size:auto 5rem; display:inline-block; margin-bottom:3rem; }
#bottom .f-logo strong { position:relative; top:-0.8rem; color:#cccccc; font-size:2.8rem; font-weight:800; letter-spacing:-1px; }
#bottom .f-logo span { color:#cccccc; font-size:1.1rem; font-weight:700; letter-spacing:0; display:block; margin-top:-0.8rem; }


#bottom .f-cnts { display:flex; align-items:flex-start; justify-content:space-between; font-size:1.6rem; margin-bottom:4rem;}
#bottom .f-cnts address { display:flex; flex-direction:column; gap:1rem;}
#bottom .f-cnts address dl { }
#bottom .f-cnts address dl dt { float:left; width:5.4rem; font-weight:700; }
#bottom .f-cnts address dl dd { margin-left:5.4rem; width:calc(100% - 5.4rem); }


#bottom .f-btm { display:flex; justify-content:flex-start; padding-top:4rem; border-top:1px solid #757a80; }
#bottom .f-btm .copy { font-size:1.6rem; }
#bottom .f-btm .topBtn { position:absolute; right:0; bottom:0; }



@media (max-width: 1440px) {
	#bottom > .inner { padding:5rem 2.4rem 8.5rem 2.4rem; }
}


@media (max-width: 1024px) {

}

@media (max-width: 768px) {
	#bottom > .inner { padding:5rem 1.6rem 8.5rem 1.6rem;}

	#bottom .f-logo { height:4rem; padding:0 0 0 4.8rem; background-size:auto 4rem; }
	#bottom .f-logo strong { top:-0.8rem; color:#cccccc; font-size:2.4rem; }
	#bottom .f-logo span { font-size:0.94rem; margin-top:-0.8rem; }
}








/* 서브레이아웃 */
#scontainer { width:100%; background:linear-gradient(180deg, rgba(247, 255, 251, 0.8) 0%, rgba(255, 255, 255, 0.4) 200px); margin:0 auto 100px; }
#scontainer > .inner { padding:0; }
	#sleft { float:left; width:280px; margin-right:60px; }
	#sright { float:left; position:relative; width:calc(100% - 340px); }
		#content { width:100%; }


@media (min-width:1281px) and (max-width:1400px){
	#scontainer { width:100%; padding:0 24px; background:linear-gradient(180deg, rgba(247, 255, 251, 0.8) 0%, rgba(255, 255, 255, 0.4) 60%); margin:0 auto 100px; }				
	#scontainer > .inner { padding:0; }

		#sleft { float:left; width:250px; margin-right:50px; }
		#sright { float:left; position:relative; width:calc(100% - 300px); }
			#content { width:100%; }
}


@media (min-width:1025px) and (max-width:1280px){
	#scontainer { width:100%; padding:0 24px; background:linear-gradient(180deg, rgba(247, 255, 251, 0.8) 0%, rgba(255, 255, 255, 0.4) 60%); margin:0 auto 100px; }		
	#scontainer > .inner { padding:0; }

		#sleft { float:left; width:220px; margin-right:30px; }
		#sright { float:left; position:relative; width:calc(100% - 250px); }
			#content { width:100%; }
}



@media (min-width:769px) and (max-width:1024px){
	#scontainer { width:100%; background:none; margin:0 auto 75px; }		
	#scontainer > .inner { padding:0; }

		#sleft { display:none; }
		#sright { float:none; position:relative; width:100%; padding:0 24px; }
			#content { width:100%; }
}


@media (max-width:768px){
	#scontainer { width:100%; background:none; margin:0 auto 50px; }
	#scontainer > .inner { padding:0; }

		#sleft { display:none; }
		#sright { float:none; position:relative; width:100%;  }
			#content { width:100%; padding:0 16px; }
}







/* 좌측메뉴 */
.leftmenu > ul > li { display:none; }
.leftmenu > ul > li > a { display:none !important; }


.leftmenu { position:relative; width:100%; margin:30px 0 30px; border-radius:20px; overflow:hidden; box-shadow:5px 5px 10px rgba(0,0,0,0.07); }
.leftmenu h2 { position:relative; height:110px; padding-top:22px; border-radius:20px 20px 0 0; background:linear-gradient(120deg, #4562b3 , #3280a9, #1f9ea0); background-size:200%; color:#fff; text-align:center; font-size:2.8rem; font-family:pgovb; overflow:hidden; 
	animation : leftmenu 10s ease-in-out infinite;
}
.leftmenu h2:after { content:'사상구의회'; color:#ddd; font-size:1.7rem; display:block; margin-top:7px; }


.leftmenu > ul > li > ul { width:100%; border:1px solid #ddd; border-top:none; border-radius:0 0 20px 20px; overflow:hidden;  }
.leftmenu > ul > li > ul > li { width:100%; border-bottom:1px solid #ddd; }
.leftmenu > ul > li > ul > li:last-child { border-bottom:none; }
.leftmenu > ul > li > ul > li > a:link,
.leftmenu > ul > li > ul > li > a:visited { width:100%; height:50px; line-height:50px; padding-left:15px; box-sizing:border-box; background:url(/broadcast/images/common/leftmenu_blt1_off.gif) no-repeat right 20px top 50%; font-size:105%; display:block; }
.leftmenu > ul > li > ul > li > a:active,
.leftmenu > ul > li > ul > li > a:focus,
.leftmenu > ul > li > ul > li > a:hover { font-weight:bold; background:#f3f6fa url(/broadcast/images/common/leftmenu_blt1_on.gif) no-repeat right 20px top 50%; color:#205dad; }
.leftmenu > ul > li > ul > li > a.select { background:#f3f6fa url(/broadcast/images/common/leftmenu_blt1_on.gif) no-repeat right 20px top 50%; color:#205dad; }




@keyframes leftmenu {
	0% { background-position:0 50%; }
	50% { background-position:100% 50%; }
	100% { background-position:0 50%; }
}