@CHARSET "UTF-8";

body { font-family:'SCDream4'; }

#usm-wrap-id { width:100%; height:auto; position:relative; }
#usm-wrap-id h2.hidden { position: absolute; top:-999px; left:-9999px; }
#usm-wrap-id h3 { font-size:16px; }

	#usm-top-id { width: 100%; height: 100px; }

		#usm-menu-id { width: 100%; height: 100px; transition: top .5s ease-out; position: relative; border-bottom: 1px solid #ccc; }

		#usm-util-wrap-id { clear: both; width: 100%; height: 29px; border-bottom: 1px solid #ccc; }
		#usm-util-wrap-id ul { width: 100%; text-align: right; font-size: 0; }
		#usm-util-wrap-id li { font-weight: bold; background-color: #62728c; display: inline-block; font-size: 13px; }
		#usm-util-wrap-id li:nth-child(even) { background-color: #25314b; }
		#usm-util-wrap-id li a { color: #fff; display: inline-block; padding: 5px 10px 6px 10px; }
		#usm-util-wrap-id li button { color: #fff; font-family:'SCDream4'; display: inline-block; padding: 5px 10px 6px 10px; font-size: 13px; }

		#usm-logo-wrap-id a { display: block; width: 200px; height: 70px; margin: 0 auto; }
		#usm-logo-wrap-id img { width:100%; height:100%; }

		.usm-favorite { top: 31px; }

		.spinner-master { height: 30px; width: 40px; position: absolute; z-index: 3; right: 10px; top: 50px; border: 1px solid #2c53b0; }
		.spinner-master input[type=checkbox] { display: none; }
		.spinner-master .spinner { background-color: #2c53b0; border: 1px solid #2c53b0; }
		.spinner-master .spinner-spin { padding: 5px; top: 0; }
		.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 { margin-top: 8px; }

		#usm-sub-bg-id { display: none; }

		#usm-left-id { display: none; }

		#usm-center-id { width:100%; }
			#usm-content-top-nav-id { padding: 15px; border-bottom:1px solid #ccc; box-sizing: border-box; }
			.usm-menuNavigation-id { margin: 0 0 10px 0; }
			.usm-menuNavigation-id span.usm-mdl-admin { display: none; }
			#usm-content-top-nav-id h4 { font-size:20px; color:#1e1e1e; }
		
		#usm-content-id { width: 100%; padding: 0 0 40px 0; }
			#usm-content-head-id { clear:both; padding: 10px 0; }
			#usm-content-body-id { }

		.usm-gov-link { clear: both; float: left; width: 100%; margin: 25px 0 0 0; }

			#s_site { position: relative; }
			#s_site .siteicon { clear: both; padding: 0; margin: 0; font-size: 0; }
			#s_site .siteicon a { clear: both; width: 100%; box-sizing: border-box; padding: 14px 20px; display: inline-block; font-size: 15px; color: #fff; background-color: #25314b; border-bottom: 1px solid #44526c; }
			#s_site .siteicon a:after { content: '\2227'; color: #fff; float: right; }
		 	#cwrap1 { position: absolute; overflow: hidden; left: 0; bottom: 200px; background-color: #fff; border:1px solid #5A5A5A; width: 100%; padding: 10px; opacity: 0.95; box-sizing: border-box; }
		 	#cwrap2 { position: absolute; overflow: hidden; left: 0; bottom: 150px; background-color: #fff; border:1px solid #5A5A5A; width: 100%; padding: 10px; opacity: 0.95; box-sizing: border-box; }
		 	#cwrap3 { position: absolute; overflow: hidden; left: 0; bottom: 100px; background-color: #fff; border:1px solid #5A5A5A; width: 100%; padding: 10px; opacity: 0.95; box-sizing: border-box; }
		 	#cwrap4 { position: absolute; overflow: hidden; left: 0; bottom: 50px; background-color: #fff; border:1px solid #5A5A5A; width: 100%; padding: 10px; opacity: 0.95; box-sizing: border-box; }
	
				#cwrap01_1 { clear: both; float: left; width: 100%; }
					#cwrap01_1 li { float:left; width: 50%; padding: 10px; box-sizing: border-box; }
					#cwrap01_1 li a { color:#5A5A5A; }
					#cwrap01_1 li a:hover { text-decoration:none; color:#0868D8; }
				
				#cwrap02_1 { clear: both; float: left; width: 100%; }
					#cwrap02_1 li { float:left; width: 50%; padding: 10px; box-sizing: border-box; }
					#cwrap02_1 li a { color:#5A5A5A; }
					#cwrap02_1 li a:hover { text-decoration:none; color:#0868D8; }
					
				#cwrap03_1 { clear: both; float: left; width: 100%; }
					#cwrap03_1 li { float:left; width: 50%; padding: 10px; box-sizing: border-box; }
					#cwrap03_1 li a { color:#5A5A5A; }
					#cwrap03_1 li a:hover { text-decoration:none; color:#0868D8; }
					
				#cwrap04_1 { clear: both; float: left; width: 100%; }
					#cwrap04_1 li { float:left; width: 50%; padding: 10px; box-sizing: border-box; }
					#cwrap04_1 li a { color:#5A5A5A; }
					#cwrap04_1 li a:hover { text-decoration:none; color:#0868D8; }

					.cwrap03 a { font-size: 15px; font-weight: bold; padding:0; margin:0; position: absolute; top: 10px; right: 10px; color: red; }

		#usm-bottomWrap-id { clear: both; width:100%; }
			#usm-bottom-id { padding: 20px 0; }
			#usm-copyright-id a.privacy { color: red; font-weight: bold; }
/* 모바일 메뉴는 skin/style.css 에서 제어함 */

@media (min-width:768px) and (max-width:1023px){
	#usm-middle-id { background: none; }
	#usm-left-id { display: none; }
	#usm-center-id { width: 100%; }
	#cwrap01_1 li { float:left; width: 33.333333%; }
	#cwrap02_1 li { float:left; width: 33.333333%; }
	#cwrap03_1 li { float:left; width: 33.333333%; }
	#cwrap04_1 li { float:left; width: 33.333333%; }
}

/* PC용 CSS */
@media all and (min-width:1024px){

	body { background: url('../images/sub_menu_bg.gif') repeat-x; }

	#usm-wrap-id { }

		#usm-top-id { width: 1200px; margin: 0 auto; height: 140px; height: auto; position: relative; }

		#usm-menu-id { width: 1200px; height: 140px; margin: 0 auto; border-bottom: none; }

			#usm-util-wrap-id { border-bottom: none; position: absolute; top: 41px; right: 0; }

			#usm-logo-wrap-id { position: static; transform: none; clear: both; padding: 0; margin: 0 0 0 0; }

			.spinner-master { display: none; }

			#usm-menu-wrap-id { display:block; clear: both; float: none; width: 1200px; height: 70px; z-index:10; }
			#usm-menu-wrap-id > ul > li > a { padding: 21px 50px; }

		#usm-centerWrap-id { width: 100%; min-height: 600px; padding: 20px 0 0 0; position: relative; background: url('../images/sub_bg.jpg') top center no-repeat; }

			#usm-middle-id { width: 1200px; margin: 0 auto; }

				#usm-left-id { display: block; float: left; width: 260px; min-height: 600px; margin: 0 40px 40px 0; }

					#usm-subTitle-id { width: 260px; height: 105px; margin: 0; padding:0; background: url('../images/left_top.jpg') no-repeat; }
					#usm-subTitle-id h3 { font-size: 26px; width: 260px; height: 105px; vertical-align: middle; text-align:center; display: table-cell; }
					#usm-subTitle-id a { display: block; color:#fff; }
						
					#usm-subMenuListTop-id { }
					#usm-subMenuListBg-id { }
					#usm-subMenuListBtm-id { }
					
					#usm-subMenuListBg-id a { color:#000; display:block; }
					#usm-subMenuListBg-id a.selectMenu { font-weight: bold; }

					#usm-subMenuListBg-id > ul > li { border-bottom: 1px solid #ccc; }
					#usm-subMenuListBg-id > ul > li > a { width: 260px; height: 55px; line-height: 55px; padding: 0 15px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; box-sizing: border-box; font-size: 16px; }
					#usm-subMenuListBg-id > ul > li > a.selectMenu { color: #fff; font-size: 16px; background-color: #2c53b0; border-left: 1px solid #2c53b0; border-right: 1px solid #2c53b0; }
					#usm-subMenuListBg-id > ul > li > a.selectMenu:after { content: '\2014'; float: right; margin: -3px 0 0 0; }
					#usm-subMenuListBg-id > ul > li > ul { padding: 20px 0; background-color: #f6f7fb; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; box-sizing: border-box; }
					#usm-subMenuListBg-id > ul > li > ul > li > a { width: 260px; height: 30px; line-height: 30px; padding: 0 0 0 20px; box-sizing: border-box; font-size: 14px; }
					#usm-subMenuListBg-id > ul > li > ul > li > a:before { content: '\25B8'; padding: 0 5px 0 0; color: #000; font-size: 20px; }
					#usm-subMenuListBg-id > ul > li > ul > li > a.selectMenu { color: #2c53b0; }
					#usm-subMenuListBg-id > ul > li > ul > li > a.selectMenu:before { color: #2c53b0; }
					#usm-subMenuListBg-id > ul > li > ul > li > ul { background-color: #f7f7f7; }
					#usm-subMenuListBg-id > ul > li > ul > li > ul > li > a { width: 260px; height: 30px; line-height: 30px; box-sizing: border-box; padding: 0 0 0 35px; font-size: 13px; }
					#usm-subMenuListBg-id > ul > li > ul > li > ul > li > a:before { content: '\00B7'; padding: 0 5px 0 0; font-weight: bold; color: #000; }
					#usm-subMenuListBg-id > ul > li > ul > li > ul > li > a.selectMenu { color: #000; }

				#usm-center-id { float: left; width: 900px; padding: 0; margin: 0; }

					#usm-content-top-nav-id { width: 100%; padding: 0 0 20px 0; }
					.usm-menuNavigation-id { margin: 0 0 28px 0; }
					.usm-menuNavigation-id span.usm-mdl-admin { display: inline-block; width: 16px; height: 16px; position: relative; top: 3px; }
					#usm-content-top-nav-id h4 { font-size: 28px; }

					#usm-content-id { width: 100%; padding: 0 0 40px 0; }
					#usm-content-footer-id { clear: both; width: 100%; }

	.usm-gov-link { width: 100%; margin: 0; background-color: #25314b; }
	.usm-gov-link #s_site { width: 1200px; margin: 0 auto; }
	.usm-gov-link #s_site .siteicon a { clear: none; float: left; width: 25%; border-right: 1px solid #62728c; }
	.usm-gov-link #s_site .siteicon a:first-child { border-left: 1px solid #62728c; }
	#cwrap1 { bottom: 0; }
	#cwrap01_1 li { width: 20%; }
	#cwrap2 { bottom: 0; }
	#cwrap02_1 li { width: 20%; }
	#cwrap3 { bottom: 0; }
	#cwrap03_1 li { width: 20%; }
	#cwrap4 { bottom: 0; }
	#cwrap04_1 li { width: 20%; }

	#usm-bottomWrap-id { clear: both; }
		#usm-bottom-id { width:1200px; margin:0 auto; }
			#usm-copyright-id { width:100%; padding:0; line-height:130%; text-align:center; }
}