@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css);
html { height:100%; width:100%; display:block;}
body {position:relative; width:100%; height:100%;  margin:0 auto; padding:0; font-family: 'Malgun Gothic', 'fontawesome'; font-size:14px; line-height:18px; color:#787878;}
/* 글리피콘 미리 세팅하기 */
[class^="icon-"]::before, [class*=" icon-"]::before, [class^="icon-"]::after, [class*=" icon-"]::after {
    font-family: FontAwesome;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* 이렇게 미리 세팅해놓으면 나중에 어떤 클래스가 됐던간에 상관없이 클래스 명이 calss="icon-thing" 이렇게 썼을때 저 클래스의 ::before 나 ::after 의 contetn:"글리피콘 유니코드"; 하면 바로 이쁘게 출력
class="class icon-thing" 띄어쓰기도 가능
*/
img { border:none; }
div, p, table, tr, td,  hr, legend, input, select, textarea, form {
padding:0; margin:0; font-family: "Malgun Gothic"; font-size:14px; line-height:20px; color:#5f5f5f;}
textarea {border:1px solid #c9c9c9; }
h1, h2, h3, h4, h5, h6 {padding:0; margin:0;/* font-family:Dotum; */color:#656565;}
dl, dt, dd, fieldset {padding:0; margin:0;/* font-family:Dotum;*/ font-size:14px; line-height:18px; color:#656565;}
fieldset { border:none;}
ul, ol { list-style:none; padding:0; margin:0;}
caption  { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }

a { text-decoration:none; color:#787878;}
a:hover, a:focus { color:#f05223; text-decoration:none;}

a.noUnderline{ text-decoration:none; color:#656565;}
a:noUnderline.hover, a:noUnderline.focus { text-decoration:none; color:#f05223;}

a.weatherlink{ text-decoration:none; }
a:weatherlink.hover, a:weatherlink.focus { text-decoration:none; }

.input {border:1px solid #c9c9c9;line-height:20px; height:20px; padding:2px 5px; margin:1px;  vertical-align:middle;}
.input:hover, .input:focus {border:2px solid #f05223;padding:1px 4px;}

.select {border:1px solid #c9c9c9;line-height:18px; padding:3px; height:25px; vertical-align:middle;}
.select:hover, .select:focus {border:2px solid #f05223;}
.btn_search { padding:3px; height:25px;}

.input_file {}

textarea {border:1px solid #c9c9c9;line-height:20px; height:20px; padding:2px 5px;}
textarea:hover, textarea:focus {border:2px solid #f05223;padding:1px 4px; }

h1 img { width:120px; height:54px;}
#btn_nav img { width:24px; height:18px;}

/* 전제 사용되는 클래스 */
.floatLeft { float:left;}
.floatRight { float:right;}
.alignCenter { text-align:center;}
.alignRight { text-align:right !important;}
.inline { display:inline;}
.clear { clear:both; height:0; line-height:0 !important; margin:0 !important; padding:0; vertical-align:top;}
*+html body .clear { margin-top:-3px !important;} * html .clear { margin-top:-3px !important;}
.vertical_top { vertical-align:top}
.vertical_middle { vertical-align:middle}
.bold { font-weight:bold;}
.noScript { font-family:Dotum; font-size:0.9em; letter-spacing:-0.1em; line-height:15px;}
.height3 { height:3px; line-height:3px; margin:0 !important; padding:0;}
* html .img_ie {margin-bottom:-4px;} *+html body .img_ie { margin-bottom:-4px;}
.checkbox { margin:4px 3px 3px 3px; vertical-align:baseline;}
* html .checkbox { margin:0 !important; vertical-align:baseline;}
*+html body .checkbox { margin:0 !important; vertical-align:baseline;}
.font11 { font-family:Dotum; font-size:11px;; letter-spacing:-0.05em; line-height:15px;}
.fontRed { color:#FF0000;}
.descriptions { color:#666666;}
.underline { text-decoration:underline;}
.selector { position:absolute; width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden; }
*html .iePngFix {behavior:url(../images/common/iepngfix.htc);}
.strongColor { color:#005fc2;}
.btnArea { padding:30px 0;}
.noContents { margin:0 20px; padding:35px 0;}


.mainText_560_02 { display:none !important;}
#nasaro_info { margin:50px 0 30px !important;}
#nasaro_info { margin:100px 0 30px; width: 100%; background-color: #F5F4F2;}
#nasaro_info>p{font-size: 17px; font-weight: bold; padding: 10px; border-bottom: 1px #d7d3d1 solid; }
#nasaro_info>p>span{color: #f05223;}
.infobox{padding: 5px 10px 10px 10px;}
.infobox p {font-size: 13px; margin-top: 5px;}
.infobox p a:hover{color: #787878; cursor: text;}
#copyright span{margin-left: 20px;}
#copyright a:hover{color: #737373; cursor: text;}

@media (min-width: 1120px){
	#bodyTop { position: absolute; left:0; top:0; background:#fff; width:230px; height:100%; padding:0 35px;}
		#bodyTop h1 { text-align:center; margin:20px 0 5px;}
		.logo_mobile { display:none;}
		#sideNav { width:100%; height:47px; line-height: 47px; text-align:center; padding:6px 0 0;}
			#sideNav li { display:inline; line-height:47px; vertical-align:top; float: right;}
				#sideNav li a { display:inline-block; font-size:13px; color:#6a6a6a; padding:0 10px; font-weight:600; }
				#sideNav li a:hover, #sideNav li a:focus { color:#999; transition-duration: 0.5s;}
		#btn_nav { display:none;}
		.vrNav { display:none;}
		#nav { display:block !important}
			#nav li {background-color: #F5F4F2; margin-bottom:4px; line-height: 47px;}
				#nav li a { display:block; line-height:47px; padding-left:30px; font-size:15px; font-weight:600;}
				#nav li a:hover, #nav li a:focus { color:white; background-color: #F05223; transition: 0.5s;}
			#nav li:hover { background-color: #F05223; margin-bottom:0;}
            #nav>ul>li:before{content: "\f009"; visibility: hidden; float: left; color: white; margin-left: 24px; font-size: 18px;}
            #nav>ul>li:hover:before {transform: rotate(360deg); transition-duration: 1s; visibility: visible;}
						#nav>ul>li>ul>li>a:hover{color: #F05223; transition-duration: 0.6s; background-color: white;}
				#nav li:hover a { display:block; line-height:47px; padding-left:54px; color:#fff; font-size:18px; font-weight:600; }
					#nav li:hover li { margin-bottom:0; background:#fff;}
						#nav li:hover li a { line-height:37px; border-bottom:1px solid #d7d3d1; color:#8d8d8d; font-size:15px; font-weight:normal;}
						#nav li:hover li:hover a {color:#f05223;font-weight:600;}
						#nav li:hover li a:before{content:'\f068'; font-size: 10px; margin-right: 10px;}
						#nav li:hover li a:hover:before{transform: rotate(360deg); transition-duration: 1s; color: #f05223;}
	#contentsArea {  padding-left:300px;}


  #nav ul li:hover .nav_0{display: block;}
  .nav_0{display:none;}
  .banner img{margin-top: 20px;}
	}


	@media (min-width: 960px) and (max-width: 1119px){
		#bodyTop { position: absolute; left:0; top:0; background:#fff; width:230px; height:100%; padding:0 35px;}
			#bodyTop h1 { text-align:center; margin:20px 0 5px;}
			.logo_mobile { display:none;}
      #sideNav { width:100%; height:47px; line-height: 47px; text-align:center; padding:6px 0 0;}
  			#sideNav li { display:inline; line-height:47px; vertical-align:top; float: right;}
					#sideNav li a { display:inline-block; font-size:13px; color:#6a6a6a; padding:0 10px; font-weight:600; }
					#sideNav li a:hover, #sideNav li a:focus { color:#999; transition-duration: 0.5s;}
			#btn_nav { display:none;}
			.vrNav { display:none;}
      #nav { display:block !important}
        #nav li {background-color: #F5F4F2; margin-bottom:4px; line-height: 47px;}
          #nav li a { display:block; line-height:47px; padding-left:30px; font-size:15px; font-weight:600;}
          #nav li a:hover, #nav li a:focus { color:white; background-color: #F05223; transition: 0.5s;}
        #nav li:hover { background-color: #F05223; margin-bottom:0;}
              #nav>ul>li:before{content: "\f009"; visibility: hidden; float: left; color: white; margin-left: 24px; font-size: 18px;}
              #nav>ul>li:hover:before {transform: rotate(360deg); transition-duration: 1s; visibility: visible;}
              #nav>ul>li>ul>li>a:hover{color: #F05223; transition-duration: 0.6s; background-color: white;}
          #nav li:hover a { display:block; line-height:47px; padding-left:54px; color:#fff; font-size:18px; font-weight:600; }
            #nav li:hover li { margin-bottom:0; background:#fff;}
              #nav li:hover li a { line-height:37px; border-bottom:1px solid #d7d3d1; color:#8d8d8d; font-size:15px; font-weight:normal;}
              #nav li:hover li:hover a {color:#f05223;font-weight:600;}
              #nav li:hover li a:before{content:'\f068'; font-size: 10px; margin-right: 10px;}
              #nav li:hover li a:hover:before{transform: rotate(360deg); transition-duration: 1s; color: #f05223;}
    #contentsArea {  padding-left:300px;}


    #nav ul li:hover .nav_0{display: block;}
    .nav_0{display:none;}
    .banner img{margin-top: 20px;}
	}

	@media (min-width: 720px) and (max-width: 959px){
		body { background:#fff; max-width: 959px;}
		.logo_mobile, #btn_nav{display: none;}
    .logo{margin: 10px;}
		#bodyTop{box-sizing: border-box;}
		#sideNav{position: absolute; top: 10px; margin-left: 84%;}
		#sideNav>li{float: left; padding-left: 10px;}
    #nav{position: absolute; top: 75px; width:100%; border: 1px #c6c6c6 solid; background-color: white; z-index: 1;}
    #nav>ul>li{display:block; float: left; font-size: 14px; width: 25%; text-align: center; border-left: 1px #c6c6c6 solid; box-sizing: border-box;}
    #nav>ul>li>a{display:block;  padding: 15px;}
    #nav>ul>li>a:hover{color: white;}
    #nav>ul>li:hover{color: white !important; background: #F05223;}
    .nav_0{display: none;}
    .white{color: white;}
    #nav ul:hover li .nav_0{ display: block; padding: 5px 10px 10px 50px; text-align: left;border-top: 1px #c6c6c6 solid;height: 148px; background-color: white;}
    .nav_0 li{padding-top: 15px; }
		#bodyTop #nasaro_info { display:none;}
    .banner{display: none;}
		#copyright { margin:15px auto; max-width:1020px; text-align:center; color:#737373; font-size:11px; line-height:18px; padding-bottom: 10px;}

	}

	@media (min-width: 560px) and (max-width: 719px){
	.input {border:1px solid #c9c9c9; font-size:15px;line-height:20px; height:20px; padding:3px 5px; vertical-align:middle; border-radius:4px;}
	.input:hover, .input:focus {border:2px solid #f05223;padding:2px 4px;}
	textarea {border:1px solid #c9c9c9;line-height:20px; font-size:15px; height:20px; padding:3px 5px; border-radius:4px;}
	textarea:hover, textarea:focus {border:2px solid #f05223;padding:2px 4px;}

	body {background:url(../images/common/bodyTop_bg_760.gif) left 69px repeat-x; background-size:1px 5px;}
	#bodyTop { position:relative; background:url(../images/common/bodyTop_bg_760.gif) left bottom repeat-x; background-size:1px 5px;}
		#bodyTop h1 { position:relative; padding:10px 30px;}
		.logo_mobile { display:none;}
    #sideNav{position: absolute; top: 10px; right: 8%;}
		#sideNav>li{float: left; padding-left: 10px;}
    #sideNav>li>a:before{content:"\f26b"; font-size: 24px;}
    .intranet{display:none;}
    .small_intranet{display:block; margin-top: 20.5px;}
		#btn_nav { position:absolute; right:2%; top:25px;}
			#btn_nav a {display: inline-block; padding:5px;}
		.vNav { display:none;}
		#nav { display:none; position:relative;  }
			#nav li { position:relative; border-bottom:1px solid #ededed;}
			#nav li:last-child { border-bottom:0;}
				#nav li a { display:inline-block; font-size:16px; line-height:42px; padding:0 20px 0 30px; font-weight:600;}
					#nav li a:hover, #nav li a:focus {/* background:#ededed;*/ color:#787878; }
				#nav li:hover a { color:#f05223}
				#nav li ul { position:absolute !important; left:150px; top:12px;}

				#nav li li { float:left; display:inline; margin:0 10px; border-bottom:none;}
					#nav li li a { display:inline-block;  padding:0 !important;font-size:13px; line-height:20px; color:#787878 !important; font-weight: normal;}
					#nav li li a:hover, #nav li li a:focus {border-bottom:2px solid #787878; }
					#nav li:hover li:hover a { color:#f05223 !important; border-bottom:2px solid #f05223; font-weight:600;}


		#bodyTop #nasaro_info { display:none;}
    .banner{display: none;}
		#copyright { margin:30px auto; max-width:1020px; text-align:center; color:#737373; font-size:11px; line-height:18px;}
	}

	@media (max-width: 559px){
	.input {border:1px solid #c9c9c9; font-size:15px;line-height:20px; height:20px; padding:3px 5px; vertical-align:middle; border-radius:4px;}
	.input:hover, .input:focus {border:2px solid #f05223;padding:2px 4px;}
	textarea {border:1px solid #c9c9c9;line-height:20px; font-size:15px; height:20px; padding:3px 5px; border-radius:4px;}
	textarea:hover, textarea:focus {border:2px solid #f05223;padding:2px 4px;}

	body {background:url(../images/common/bodyTop_bg_760.gif) left 51px repeat-x; background-size:1px 5px; min-width:320px; }
	#bodyTop { position:relative; background:url(../images/common/bodyTop_bg_760.gif) left bottom repeat-x; background-size:1px 5px;}
		#bodyTop h1 { position:relative; padding:10px 20px;}
			h1 img { width:80px; height:36px;}
			.logo { display:none;}
		#sideNav{position: absolute; top: 15px; right: 12%;}
    #sideNav>li>a:before{content:"\f26b"; font-size: 24px;}
    .intranet{display:none;}
    .small_intranet{display:block; margin-top: 7px;}
		#btn_nav { position:absolute; right:2%; top: 17px;}
			#btn_nav a { display:inline-block; padding:5px;}
		.vNav { display:none;}
    #nav { display:none; position:relative;  }
      #nav li { position:relative; border-bottom:1px solid #ededed;}
      #nav li:last-child { border-bottom:0;}
        #nav li a { display:inline-block; font-size:14px; line-height:42px; padding:0 15px 0 15px; font-weight:600;}
          #nav li a:hover, #nav li a:focus {/* background:#ededed;*/ color:#787878; }
        #nav li:hover a { color:#f05223}
        #nav li ul { position:absolute !important; left: 93px; top:5px;}

        #nav li li { float:left; display:inline;border-bottom:none;}
          #nav li li a { display:inline-block;  padding:0 !important;font-size:13px; line-height:20px; color:#787878 !important; font-weight: normal;}
          #nav li li a:hover, #nav li li a:focus {border-bottom:2px solid #787878; }
          #nav li:hover li:hover a { color:#f05223 !important; border-bottom:2px solid #f05223; font-weight:600;}

				#nav li li { float:left; display:inline; border-bottom:none; padding:5px;}
					#nav li li a { display:inline-block; font-size:11px; line-height:20px; color:#787878 !important; font-weight:normal;}
					#nav li li a:hover, #nav li li a:focus {border-bottom:2px solid #787878; }
					#nav li:hover li:hover { padding-bottom:5px !important;}
					#nav li:hover li:hover a { color:#f05223 !important; border-bottom:2px solid #f05223; font-weight:600;}


          .banner{display: none;}
		#bodyTop #nasaro_info { display:none;}
	#contentsArea { }

		#copyright { margin:15px auto; max-width:1020px; text-align:center; color:#737373; font-size:11px; line-height:16px; letter-spacing: -0.5px;}
	}