* {margin:0; padding:0; border:0; font-family: 'NanumGothic'; }
body {background-color:#fff; font-family: 'NanumGothic'; }
#wrap {width:100%; margin:0 auto;}
img {-ms-interpolation-mode:bicubic;} /*doesn't work*/

@font-face {font-family: 'NanumGothicBold';  src: url('../fonts/NanumGothicBold.ttf') format('truetype');}
@font-face {font-family: 'NanumGothicBold';  src: url('../fonts/NanumGothicBold.otf') format('otf');}
@font-face {font-family: 'NanumGothicBold';  src: url('../fonts/NanumGothicBold.woff') format('woff');}

@font-face {font-family: 'NanumGothic';  src: url('../fonts/NanumGothic.ttf') format('truetype');}
@font-face {font-family: 'NanumGothic';  src: url('../fonts/NanumGothic.otf') format('otf');}
@font-face {font-family: 'NanumGothic';  src: url('../fonts/NanumGothic.woff') format('woff');}

@font-face {font-family: 'NBG';  src: url('../fonts/NanumGothicBold.ttf') format('truetype');}
@font-face {font-family: 'NBG';  src: url('../fonts/NanumGothicBold.otf') format('otf');}
@font-face {font-family: 'NBG';  src: url('../fonts/NanumGothicBold.woff') format('woff');}


/************************************************************************************/
@media all and (max-width:480px) {

/******* common *******/
.add_txt {font:bold 12px 'corbel'; font-weight:bold; float:right; margin-top:10px;}
.add_txt a {color:#d65c6f;}
.add_txt a:hover {color:#000;}
.add_txt a:visited {color:#555;}

#bt_top a {text-decoration:none; position:fixed; color:#333; font-size:14px; bottom:10%; right:4%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:6px; display:block;
border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;
box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;}

/******* Header Start *******/
		#top {width:100%; overflow:hidden; border-bottom:1px solid #fff; z-index:100;
			 box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc;
			  }/*to set the logo and top texts*/
				/*#top h1 {width:90%; font:bold 28px 'consolas'; float:left; letter-spacing:-0.8pt; line-height:28px; color:#333;}
				#top h1 span {width:100%; text-align:center; color:#d77a54;}*/
				#top h1 img {width:23%; margin:3% 0 0 3%; z-index:2;}/*logo*/
				#top h2 {font-size:11px; font-weight:bold; color:#666; position:absolute; top:3%; left:27.5%;} /*tecarto*/
				#top h3 {font:bold 11px 'consolas'; line-height:11px; font-weight:normal; letter-spacing:-1pt; color:#ccc; position:absolute; top:7%; left:27.5%;}		
				#top h3 p {font-size:11px; color:#ccc; line-height:11px; position:relative; top:0; left:0;}/*text: technical art organization*/
/******* Header End *******/

		/******* GNB-NAV Start *******/
		#gnb {width:100%;}
		/******* GNB-NAV End *******/

/******* Icon part *******/
#icon_part {width:90%; overflow:hidden; margin:0 auto;}/*in mobile the px's area-definition is narrower*/
		#icon_part dl {list-style:none; text-align:center;  margin:0 auto;}
		#icon_part dl:last-child {list-style:none; text-align:center;  margin:0 auto;}							
				#icon_part dt {width:100%; height:50%; margin:0 auto; overflow:hidden;}
						#icon_part dt h1 {font-size:14px; font-weight:700; color:#444; text-align:center;}
								#icon_part dt h1:first-child {margin-top:5px;}
						#icon_part dt span {font-size:11px; line-height:12px; display:block; font-weight:normal; text-align:center; margin:0 auto; color:#666;}
						#icon_part dd img {width:28%; margin-top:5px;}
								/*#icon_part dd:last-child {margin-bottom:15px; border:1px solid #333;}Why doesn't this work????*/
								#icon_part dd.icon_last {margin-bottom:15px;}



/******* Contents *******/
		/******* JQ: Slide down Start *******/
		#slidedown {height:100%; overflow:hidden; z-index:1;}
				#slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;}

				#section_a, #section_c {background-color:#d9dbdb; width:100%; height:100%; margin:0 auto; display:block;}
				#section_b, #section_d {background-color:#fff; width:100%; height:100%; margin:0 auto; display:block;}

						#slidedown .content {width:90%; margin:0 auto;}
								#section_a h1, #section_c h1 {font:700 17px 'Open Sans'; letter-spacing:-0.2pt; color:#fff; padding-bottom:7px; padding-top:10px;}/*margin doesn't work here*/
								#section_b h1, #section_d h1 {font:700 17px 'Open Sans'; letter-spacing:-0.2pt; color:#d9dbdb; padding-bottom:7px; padding-top:8px;}/*margin doesn't work here*/

								#slidedown dl section span {width:90%; width:100%; /*font:normal 15px 'NanumGothicBold',나눔고딕;*/ font-size:15px; font-weight:normal; color:#fff; background-color:#555; display:block; letter-spacing:-0.5pt; margin-bottom:5px; padding-left:10px;}
								#slidedown dl section h3 {width:95%; /*font:normal 12px 'NanumGothic',나눔고딕;*/ font-size:12px; font-weight:normal; line-height:13px; overflow:hidden; margin:5px 0 0 5px;}
								#slidedown dl section p.eng_txt {width:100%; /*font:normal 12px 'NanumGothic',나눔고딕;*/ font-size:12px; font-weight:normal; line-height:13px; margin:0 auto;}
								#slidedown dl section .image img {width:60%; border:1px solid #B7B7B7; margin:2% 19%;}
								#slidedown dl section .image_1 img {width:60%; border:1px solid #B7B7B7; margin:2% 18% 2% 23%;}
						
				/*** More Button ***/
				#slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;}
				#slidedown dl dt.more {font:bold 14px 'corbel'; margin:0 0 10px 15px;}
				#slidedown dl dt.more a {color:#d65c6f; text-decoration:none;}
				#slidedown dl dt.more a:hover {color:#000;}
				#slidedown dl dt.no_more {font:bold 14px 'corbel'; margin:0 0 10px 15px; color:#d9dbdb;}
				/***  ***/

				/*** Open Area ***/
				#slidedown dl dd {height:90%; display:none; overflow:hidden; padding-bottom:30px;}
						#slidedown dl dd p {width:90%; margin:0 auto;}
						#slidedown dl dd p:first-child {width:90%; margin:0 auto; border-top:1px dashed #999; padding-top:20px;}
						#slidedown dl dd p img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;}	
				/***  ***/
		/******* JQ: Slide down End *******/


				#music {width:100%; border-top:1px solid #ddd; background-color:#ddd; display:inline-block; text-align:center;}
						#music h1 {font:bold 23px 'corbel'; margin-top:10px; letter-spacing:-0.5;}
								#music h1 a {color:#333; text-decoration:none;}
								#music h1 a:click {color:#d3445a;}						
						#music h2 span {/*font:normal 12px 'NanumGothic';*/ font-size:12px; font-weight:normal; line-height:14px; color:#666;}
						#music h2 {width:90%; /*font:700 12px 'NanumGothic';*/ font-size:12px; font-weight:normal; color:#222;
						           line-height:10px;/*if the line-height tag or padding doesn't work*/
								   display:block; color:#666; text-align:center; margin:0 auto; padding-top:-8px;}

				
				/******* Footer *******/
				footer {width:100%; height:74px;}
						footer div {width:90%; margin:0 auto;}
										footer address {float:left; font-size:11px; line-height:12px; margin-top:5px;}
								footer p {margin:-10px 0 10px 3px; float:right;}
										footer p a {float:left; width:36px;}
										footer p img {width:25px; float:right;}/*margin, padding aren't worked*/
}



/************************************************************************************/
@media all and (min-width:481px) and (max-width:767px) {

/******* common *******/
.add_txt {font:bold 12px 'corbel'; font-weight:bold; float:right; margin-top:10px;}
.add_txt a {color:#d65c6f;}
.add_txt a:hover {color:#000;}
.add_txt a:visited {color:#555;}


#bt_top a {text-decoration:none; position:fixed; color:#333; font-size:15px; bottom:3%; left:4%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:8px; display:block;
border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;
box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;}		

/******* Header *******/


		/******* GNB-NAV Start *******/
		#gnb {width:98%; background-color:#ddd; padding-left:2%;}
		/******* GNB-NAV End *******/

		#top {width:100%; height:85px; overflow:hidden; border-bottom:1px solid #fff; position:relative; z-index:100;
			  box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc;
			  }/*to set the logo and top texts*/
				#top h1 img {width:18%; margin:2%; float:left; z-index:2;/*without this other parts' position don't work*/}/*logo*/
				#top h2 {font-size:13px; font-weight:bold; color:#666; position:absolute; top:28%; left:22%; float:left;}
				#top h3 {font:bold 13px 'consolas'; font-weight:normal; letter-spacing:-0.5pt; color:#ccc; float:right; margin:3% 10% 0 2%;}
				
				nav img {width:200%;}

					   /******* Icon part *******/
					   #icon_part {width:98%; overflow:hidden; background-color:#fff; margin-left:2%;}
									#icon_part dl {width:48%; float:left; list-style:none; text-align:center;}							
											#icon_part dt {width:100%; height:50%; margin:0 auto; overflow:hidden;}/*long texts*/
													#icon_part dt h1 {font-size:18px; font-weight:700; color:#888; text-align:center; letter-spacing:-0.8pt; margin:12px 0 5px 0;}
													#icon_part dt span {font-size:13px; text-align:center;}
													#icon_part dd img {width:40%; margin:10px;}												
					
/******* Contents Start *******/
		/******* JQ: Slide down Start *******/
		#slidedown {height:100%; overflow:hidden; z-index:1;}
				#slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;}

				#section_a, #section_c {background-color:#d9dbdb; width:100%; height:100%; margin:0 auto; display:block;}
				#section_b, #section_d {background-color:#fff; width:100%; height:100%; margin:0 auto; display:block;}

						#slidedown .content {width:90%; margin:0 auto;}
								#section_a h1, #section_c h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; color:#fff; padding-bottom:17px; padding-top:10px;}/*margin doesn't work here*/
								#section_b h1, #section_d h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; color:#d9dbdb; padding-bottom:17px; padding-top:10px;}/*margin doesn't work here*/

								#slidedown dl section span {width:100%; font:normal 16px 'NanumGothicBold',나눔고딕; color:#fff; background-color:#555; display:block; letter-spacing:-0.5pt; margin:-13px 0 5px 0;}
								#slidedown dl section h3 {width:90%; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; overflow:hidden; margin:5px;}
								#slidedown dl section p.eng_txt {width:100%; font:normal 13px 'NanumGothic',나눔고딕; line-height:14px; margin:0 auto;}

								#slidedown dl section .image img {width:60%; border:1px solid #B7B7B7; margin:2% 19%;}
								#slidedown dl section .image_1 img {width:63%; border:1px solid #B7B7B7; margin:2% 18% 2% 23%;}

				/*** More Button ***/
				#slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;}
				#slidedown dl dt.more {font:bold 14px 'corbel'; margin:0 0 10px 15px;}
				#slidedown dl dt.more a {color:#d65c6f; text-decoration:none;}
				#slidedown dl dt.more a:hover {color:#000;}
				#slidedown dl dt.no_more {font:bold 14px 'corbel'; margin:0 0 10px 15px; color:#d9dbdb;}
				/***  ***/

				/*** Open Area ***/
				#slidedown dl dd {height:90%; display:none; overflow:hidden; padding-bottom:30px;}
						#slidedown dl dd p {width:90%; margin:0 auto;}
						#slidedown dl dd p:first-child {width:90%; margin:0 auto; border-top:1px dashed #999; padding-top:20px;}
						#slidedown dl dd p img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;}	
				/***  ***/
		/******* JQ: Slide down End *******/
/*** Contents End ***/

				#music {width:100%; border-top:1px solid #ddd; background-color:#ddd; display:inline-block; text-align:center;}
						#music h1 {font:bold 40px 'corbel'; margin:10px auto;}
								#music h1 a {color:#333; text-decoration:none;}
								#music h1 a:click {color:#d3445a;}

						#music h2 {width:90%; font:800 13px 'NanumGothic'; color:#222; text-align:center; margin:0 auto; letter-spacing:-0.2pt;}
								#music h2 span {font:normal 13px 'NanumGothic'; letter-spacing:-0.2pt;}

				
				/******* Footer *******/
				footer {width:100%; height:70px;}
						footer div {width:90%; margin:0 auto;}
										footer address {float:left; font-size:12px; margin-top:10px;}
								footer p {margin:10px 0 0 5px; float:right;}
										footer p a{float:left; width:36px;}
										footer p img {width:35px; padding:0 5px 5px 0;}

				#extra_deco {width:100%; height:10px; margin-top:10px; background-color:#ddd;
				/** background pattern sample start
				background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(102, 102, 102);		
				
				-webkit-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-ms-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-moz-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-o-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-pie-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;
				
				behavior:url(../js/pie/ie-css3.htc);**/
				}

}


/************************************************************************************/
@media all and (min-width:768px) and (max-width:979px) {

/******* Common *******/
.add_txt {font:bold 12px 'corbel'; font-weight:bold; float:right; margin-top:10px;}
.add_txt a {color:#d65c6f;}
.add_txt a:hover {color:#000;}
.add_txt a:visited {color:#555;}

nav {padding-left:4.5%; margin-top:-10px;}/*the res_toggle>styles 's "margin:0 auto" shold be cross out to make this work.*/

#bt_top a {text-decoration:none; position:fixed; color:#333; font-size:15px; bottom:6%; right:4%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:10px; display:block;
border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;
box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;}

#bt_top a:hover {text-decoration:none; position:fixed; color:#fff; font-size:15px; bottom:3%; right:4%; font-weight:bold; z-index:100; background-color:#ddd; padding:10px; display:block;
border:2px solid #ddd; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;
box-shadow:1px 1px 3px #333; -webkit-box-shadow:1px 1px 3px #333; -ms-box-shadow:1px 1px 3px #333; -moz-box-shadow:1px 1px 3px #333; -o-box-shadow:1px 1px 3px #333;}
		

/******* Header Start *******/

		/******* GNB-NAV Start *******/
		#gnb {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-left:10px;}
		/******* GNB-NAV End *******/
		
		#top {width:100%; overflow:hidden; background-color:#fff; border-bottom:1px solid #fff; position:relative; z-index:100;
		box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc;}/*to set the logo and top texts*/
				#top h1 img {width:14%; margin:15px; float:left; z-index:2;/*without this other parts' position don't work*/}/*logo*/
				#top h2 {font-size:13px; font-weight:bold; color:#666; position:absolute; top:35%; left:18%; float:left;}
				#top h3 {font:bold 13px 'consolas'; font-weight:normal; letter-spacing:-0.5pt; color:#ccc; float:right; margin:3.5% 1.5% 0 0;}		

					   /******* Icon part *******/
					   #icon_part {width:98%; overflow:hidden; background-color:#fff; margin-left:1.3%;}
									#icon_part dl {width:49%; float:left; list-style:none; text-align:center;}							
											#icon_part dt {width:95%; height:50%; margin:0 auto; overflow:hidden;}/*long texts*/
													#icon_part dt h1 {font-size:18px; font-weight:700; color:#888; text-align:center; letter-spacing:-0.8pt; margin:12px 0 5px 0;}
													#icon_part dt span {font-size:13px; text-align:center;}
													#icon_part dd img {width:35%; margin:10px;}												
			
/******* Contents Start *******/
		/******* JQ: Slide down Start *******/
		#slidedown {position:relative; height:100%; overflow:hidden;}
		#slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;}

				#slidedown dl section {width:100%; height:100%; margin:0 auto; display:block; overflow:hidden;}
					#section_a, #section_c {background-color:#d9dbdb;}
					#section_b, #section_d {background-color:#fff;}
							#slidedown .content {width:98%; margin:0 auto; padding-left:4.5%;}
									#section_a h1, #section_c h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#fff;}
									#section_b h1, #section_d h1 {font:700 18px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#d9dbdb;}						

									#slidedown dl section span {width:23%; font:normal 14px 'NanumGothicBold',나눔고딕; color:#fff; background-color:#555; padding:1px; display:block; letter-spacing:-0.5pt; margin-right:1%;}
									#slidedown dl section h3 {width:23%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:16px; overflow:hidden; margin-top:10px;}
									#slidedown dl section p.eng_txt {width:100%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; overflow:hidden;}
									
									#slidedown dl section .image img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:-3% 0 0 3.2%;}
									#slidedown dl section .image_1 img {width:21%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0.5% -1% 0 4.1%;}
									#slidedown dl section .image_1 img:last-child {margin-bottom:45px;}

				/*** More Button ***/
				#slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;}
				#slidedown dl dt.more {font:bold 17px 'corbel'; margin:10px 0 20px 20px;}
				#slidedown dl dt.more a {color:#d65c6f; text-decoration:none;}
				#slidedown dl dt.more a:hover {color:#000;}
				#slidedown dl dt.no_more {font:bold 17px 'corbel'; margin:10px 0 20px 20px; color:#d9dbdb;}
				/***  ***/

				/*** Open Area ***/
				#slidedown dl dd {height:90%; display:none; overflow:hidden; padding-bottom:30px;}
						#slidedown dl dd p {width:90%; margin:0 auto;}
						#slidedown dl dd p:first-child {width:90%; margin:0 auto; border-top:1px dashed #999; padding-top:20px;}
						#slidedown dl dd p img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;}	
				/***  ***/
		/******* JQ: Slide down End *******/

				#music {width:100%; border-top:1px solid #ddd; background-color:#ddd; display:inline-block; text-align:center;}
						#music h1 {font:bold 40px 'corbel'; margin:10px auto;}
								#music h1 a {color:#333; text-decoration:none;}
								#music h1 a:hover {color:#d3445a;}

						#music h2 {width:90%; font:800 13px 'NanumGothic'; color:#222; text-align:center; margin:0 auto;}
								#music h2 span {font:normal 13px 'NanumGothic';}
/*** Contents End ***/

				
/******* Footer Start *******/
				footer {width:100%; height:74px;}
						footer div {width:90%; margin:0 auto;}
										footer address {float:left; font-size:12px; margin-top:10px;}
								footer p {margin:10px 0 0 5px; float:right;}
										footer p a{float:left; width:36px;}
										footer p img {width:35px; padding:0 5px 5px 0;}
/******* Footer End *******/

				#extra_deco {width:100%; height:10px; margin-top:10px; background-color:#ddd;
				/** background pattern sample start 
				background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(102, 102, 102);		
				
				-webkit-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-ms-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-moz-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-o-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;

				-pie-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;
				
				behavior:url(../js/pie/ie-css3.htc);**/
				}

}


/************************************************************************************/
@media all and (min-width: 980px){/******* All Common Start *******/

.add_txt {font:bold 13px 'corbel'; font-weight:bold; float:right; margin-top:10px;}
.add_txt a {color:#d65c6f;}
.add_txt a:hover {color:#000;}
.add_txt a:visited {color:#555;}

#bt_top a {position:fixed; color:#333; font-size:16px; bottom:3%; right:2%; font-weight:bold; z-index:100; background-color:#F4F4F4; padding:10px; display:block;
border:2px solid #ddd; text-decoration:none; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;
box-shadow:1px 1px 5px #333; -webkit-box-shadow:1px 1px 5px #333; -ms-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; -o-box-shadow:1px 1px 5px #333;}
		#bt_top a:hover {position:fixed; color:#fff; font-size:16px; bottom:3%; right:2%; font-weight:bold; z-index:100; background-color:#999; padding:10px; display:block;
border:2px solid #ddd; text-decoration:none; border-radius:100px; -webkit-border-radius:100px; -ms-border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px;
box-shadow:1px 1px 5px #333; -webkit-box-shadow:1px 1px 5px #333; -ms-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; -o-box-shadow:1px 1px 5px #333;}
/******* All Common End *******/

/******* Header Start *******/
			/******* GNB-NAV Start *******/
			#gnb {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
			/******* GNB-NAV End *******/

			#top {width:100%; overflow:hidden; background-color:#fff; border-bottom:1px solid #fff; position:relative; z-index:100;
			box-shadow:0 3px 5px #ccc; -webkit-box-shadow:0 3px 5px #ccc; -ms-box-shadow:0 3px 5px #ccc; -moz-box-shadow:0 3px 5px #ccc; -o-box-shadow:0 3px 5px #ccc;}/*to set the logo and top texts*/
					#top h1 img {width:8%; margin:15px 0 5px 15px; float:left; z-index:2;/*without this other parts' position don't work*/}/*logo*/
					#top h2 {font-size:15px; font-weight:bold; color:#666; position:absolute; top:34%; left:11%; float:left;}
					#top h3 {font-size:14px; font-weight:normal; color:#ccc; float:right; margin:2% 2% 0 0;}		

						   /******* Icon part Start*******/
						   #icon_part {width:96.5%; height:auto; overflow:hidden; margin-left:3.5%;}/*careful for width*/
										#icon_part dl {width:24%; height:auto; float:left; list-style:none; text-align:center; border-right:1px dashed #c9c9c9;}
										#icon_part dl:last-child {border:none;}
										#icon_part dl.border_none {border-right:none;}								
												#icon_part dt {width:96%; margin:0 auto; overflow:hidden; min-height:110px;}
														#icon_part dt h1 {font-size:21px; font-weight:700; color:#888; text-align:center; margin:15px 0 10px 0;}
														#icon_part dt span {font-size:13px !important; font-weight:normal; line-height:14px; text-align:center;}/*better no-margin definition on span tag, instead, can leave on bigger tags such ass h1, dd etc...*/
														#icon_part dd img {margin:15px 0 25px 0;}												
																#icon_part dd a img {width:36%; transition: all 1s; transform:scale(1); -webkit-transition: all 1s; -ms-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transform:scale(1); -ms-transform:scale(1); -moz-transform:scale(1); -o-transform:scale(1);}
																#icon_part dd a img:hover {transform:scale(1.1); -webkit-transform:scale(1.1); -ms-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1);}
																#icon_part dd a img:visited {width:36%;}

														.ani_over {width:95px; background-color:red;}
																.ani_over a {width:95px; background-color:red;}
																.ani_over a:hover {width:95px; background-color:red;}
			   /******* Icon part End*******/
/******* Header End *******/

			
/******* Contents Start *******/
		/**** JQ: Main Dropdown Start ****/
		#slidedown {position:relative; height:100%; overflow:hidden;}
		#slidedown dl, #slidedown dt, #slidedown dd, #slidedown li {margin:0; padding:0; list-style:none;}

				#slidedown dl section {width:100%; height:100%; margin:0 auto; display:block; overflow:hidden;}
					#section_a, #section_c {background-color:#d9dbdb;}
					#section_b, #section_d {background-color:#fff;}
							#slidedown .content {width:98%; margin:0 auto; padding-left:4.5%;}
									#section_a h1, #section_c h1 {font:700 20px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#fff;}
									#section_b h1, #section_d h1 {font:700 20px 'Open Sans'; letter-spacing:-0.2pt; margin:15px 0 8px 0; color:#d9dbdb;}

									#slidedown dl section span {width:23%; font:normal 16px 'NanumGothicBold',나눔고딕; color:#fff; background-color:#555; padding:1px; display:block; letter-spacing:-0.5pt; margin-right:1%;}
									#slidedown dl section h3 {width:23%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:16px; overflow:hidden; margin-top:10px;}
									#slidedown dl section p.eng_txt {width:100%; float:left; font:normal 13px 'NanumGothic',나눔고딕; line-height:15px; overflow:hidden;}
									
									#slidedown dl section .image img {width:20%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:-3% 0 0 3.2%;}
									#slidedown dl section .image_1 img {width:21%; border:1px solid #B7B7B7; overflow:hidden; float:left; margin:0.5% -1% 0 4.1%;}
									#slidedown dl section .image_1 img:last-child {margin-bottom:45px;}
		/*** More Button ***/
		#slidedown dl dt {width:95%; margin:0 auto; height:100%; overflow:hidden;}
				#slidedown dl dt.more {font:bold 16px 'corbel'; margin:20px 0 20px 40px;}
				#slidedown dl dt.more a {color:#d65c6f; text-decoration:none;}
				#slidedown dl dt.more a:hover {color:#000;}
				#slidedown dl dt.no_more {font:bold 16px 'corbel'; margin-bottom:20px; color:#d9dbdb;}
		/***  ***/

		#slidedown dl dd {width:95%; margin:0 auto;}
				#slidedown dl dd img {width:22%; float:right; margin-top:15px; margin-left:20px; border:2px solid #ccc;}
		/**** JQ: Main Dropdown End ****/

		
		/**** Music Start ****/
		#music {width:100%; margin:0 auto; border-top:1px solid #ddd; text-align:center; background-color:#ccc;}
				#music h1 {font:normal 140px 'corbel'; display:block; margin-top:-15px; letter-spacing:-0.8pt;}
						#music h1 a {color:#333; text-decoration:none;}
						#music h1 a:hover {color:#d3445a;}
						#music h2 {font:800 13px 'NanumGothic'; color:#222; margin:-20px 0 30px 0; text-align:center;}
								#music h2 span {font:normal 13px 'NanumGothic';}
		/**** Music End ****/
/******* Contents End *******/

				
/******* Footer Start *******/
		footer {width:100%; height:65px;}
				footer div {width:90%; margin:0 auto; /*border-top:1px solid #ddd; When another section portfolio added, this should be appeard back*/}
				footer address {float:left; font-size:13px; margin-top:10px;}
						footer p {margin:10px 0 0 5px; float:right;}
						footer p a{float:left; width:36px;}
						footer p img {width:32px; /*clear:both; padding:0 5px 5px 0;*/}
								footer p a img {opacity:0.8; -webkit-opacity:0.8; -ms-opacity:0.8; -moz-opacity:0.8; -o-opacity:0.8;}										
								footer p a img:hover {opacity:1; -webkit-opacity:1; -ms-opacity:1; -moz-opacity:1; -o-opacity:1;}
/******* Footer End *******/

				
/******* Extra *******/
#extra_deco {width:100%; height:20px; margin-top:20px; background-color:#ddd;
		/** background pattern sample start
		background-position: 0px 10px, 0% 0%, 0% 0%; background-image: radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none; background-attachment: scroll, scroll, scroll; background-repeat: repeat, repeat, repeat; background-size: 20px 20px; background-origin: padding-box, padding-box, padding-box; background-clip: border-box, border-box, border-box; background-color: rgb(102, 102, 102);		
		-webkit-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;
		-ms-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;
		-moz-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;
		-o-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;
		-pie-radial-gradient(circle at 0% 50%, rgba(102, 102, 102, 102) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), radial-gradient(at 100% 100%, rgba(102, 102, 102, 0) 9px, rgb(255, 255, 255) 10px, rgba(255, 255, 255, 0) 11px), none;		
		behavior:url(../js/pie/ie-css3.htc);/*구형 익스플로러를 위한 스크립트 핵- 프리픽스 코드들 뒤, radius, box-shadow, text-shadow 에 추가 적용**/
		}
}

