@charset "utf-8";

/* fonts */
/*********** 본고딕 font-family: 'Noto Sans KR'; ************/
@font-face {
  font-family: 'Noto Sans KR';
  font-style:   normal;
  font-weight:  300;
  src: url('/fonts/NotoSansKR-Light.woff2') format('woff2'),
       url('/fonts/NotoSansKR-Light.woff') format('woff'),
       url('/fonts/NotoSansKR-Light.otf')  format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style:   normal;
  font-weight:  400;
  src: url('/fonts/NotoSansKR-Regular.woff2') format('woff2'),
       url('/fonts/NotoSansKR-Regular.woff') format('woff'),
       url('/fonts/NotoSansKR-Regular.otf')  format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style:   normal;
  font-weight:  500;
  src: url('/fonts/NotoSansKR-Medium.woff2') format('woff2'),
       url('/fonts/NotoSansKR-Medium.woff') format('woff'),
       url('/fonts/NotoSansKR-Medium.otf')  format('opentype');
}

@font-face {
  font-family: 'Noto Sans KR';
  font-style:   normal;
  font-weight:  700;
  src: url('/fonts/NotoSansKR-Bold.woff2') format('woff2'),
       url('/fonts/NotoSansKR-Bold.woff') format('woff'),
       url('/fonts/NotoSansKR-Bold.otf')  format('opentype');
}

/* reset */
*,:before,:after{box-sizing:border-box}
html{/* overflow-y:scroll; */-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Noto Sans KR','맑은 고딕','Malgun Gothic','Apple SD Gothic Neo',sans-serif;font-size:14px;line-height:1.42857}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display: block;}
img,fieldset{border:none}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{background-color:transparent;-webkit-text-decoration-skip:objects;text-decoration:none}
a:hover,a:active,a:focus{text-decoration:none}
table{border-collapse:collapse;border-spacing:0} 
legend{*width:0}
input::-webkit-input-placeholder{line-height:normal!important;}
input[type='text'],input[type='email'],input[type='password'],input[type='search']{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;}
input[type='checkbox']{box-shadow:none;}
input[readonly]{background:#efefef !important;cursor:default;}
label,select{cursor:pointer}
select::-ms-expand{background:transparent;border:none;}
button{padding:0;border:none;background:none;cursor:pointer}
textarea{overflow:auto}
[hidden]{display:none}
caption{overflow:hidden;width:1px;height:1px;margin-top:-1px}
.blind,legend{display:block;overflow:hidden;position:absolute;left:0;top:-9999em}

/* common */
.skip a{display:block;position:absolute;left:0;top:-9999em;z-index:9999;overflow:hidden;width:100%;background-color:#333;color:#fff;font-size:1.2em;font-weight:bold;text-align:center;text-decoration:none;line-height:2.2}
.skip a:hover,.skip a:active,.skip a:focus{top:0}
.clearfix{*zoom:1}
.clearfix:after{content:'';display:block;clear:both;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* body{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;} */
#wrap{position: relative; height: 100%}
html,body{width:100%;min-height:100%;}
.no-scroll,
.no-scroll body{overflow:hidden;}
/*-------------------------------------------
	header
--------------------------------------------*/
#header{
	/* position: relative; */ 
	position: fixed;
	top:0;
	left:0;
	right:0;
	min-width: 1400px;
	height: 70px; /*background-color: #264f8c;*/ z-index: 30; 
	background: #1f6db1; /* Old browsers */
	background: -moz-linear-gradient(left,  #1f6db1 17%, #274f8d 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1f6db1 17%,#274f8d 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1f6db1 17%,#274f8d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f6db1', endColorstr='#274f8d',GradientType=1 ); /* IE6-9 */
}
#header:after{content:'';position:absolute;top:0;right:0;z-index:1;width:554px;height:70px;background:url(../images/common/bg_header.png) no-repeat;}
#header .logo{position: absolute; top: 0; left: 0; z-index: 3; height: 100%; display: table; table-layout:fixed;width:220px;}
#header .logo a{display:table-cell; padding:0 20px; vertical-align:middle; text-align: center; line-height: 1; /* background: url(../images/common/loc_logo.png) no-repeat 50%; text-indent: -999em */}
#header .logo a img{max-width:100%; max-height: 50px;}
#header nav{max-width: 100%; height: 100%; padding: 22px 20px 0 235px; position: relative; z-index: 2;}
#header #utility{float: right; margin-top:-22px;}
#header #utility li{float: left;border-left:1px solid #2e4a67;}
/* #header #utility li:not(:last-child){margin-right: 22px} */
/* #header #utility .mypage{background: url(../images/common/icon_member.png) no-repeat 0 50%} */
/* #header #utility .logout{background: url(../images/common/icon_logout.png) no-repeat 0 100%} */
#header #utility li.datetime{border-left:0;}
#header #utility li a{position:relative;display:block;width: 42px;height: 42px;border-radius: 50%;background: rgb(31, 63, 120);border: 1px solid #11386d;}
#header #utility li a img{position:absolute;top:50%;left:50%;transform:translate3d(-50%,-50%,0);}
#header #utility .btn-fullscreen {position:relative;display:inline-block;margin-left:0px;vertical-align:middle;}
#header #utility .btn-fullscreen span{position:absolute;top:0;left:0;right:0;bottom:0;background:url(../images/monitoring/icon_fullscreen.png) no-repeat 50% 50% / 16px auto;font-size:0;}
#header #utility .btn-fullscreen.full-on span{background-image:url(../images/monitoring/icon_fullscreen_on.png);}
#header #utility .datetime {display:inline-block;margin-left:40px;color:#e3e4e6;font-size:15px;vertical-align:middle;line-height:70px;}

#header #utility li a{color: rgba(255,255,255,0.73);}
#header #gnb{float:left;position:relative;z-index:10;height:100%;}
#header #gnb:after{content:'';display:block;clear:both;}
#header #gnb > li{position: relative; float: left; height:100%; vertical-align: middle;/* transition: margin-right .2s ease;*/}
#header #gnb li:not(:last-child){margin-right: 60px;}
#header #gnb li a{display:block; position: relative; padding-top:2px; color: #fff; font-size: 1.214em; font-weight: 500; letter-spacing: -0.02em;}
#header #gnb li.on a{padding-top: 0; padding-left:13px; font-size: 20px;}
#header #gnb li.on a,
#header #gnb li a:hover,
#header #gnb li a:focus{color: #fffd7f;}
#header #gnb li.on a::before{content: ''; display: block; position: absolute; left:0; top:50%; margin-top:-2px; width:5px; height: 5px; background: #fffd7f; border-radius: 50%;}
/* 2depth 메뉴 */
#header #gnb .depth-2-wrap{display:none;position:absolute;top:48px;left:-30px;right:-30px;z-index:1;}
#header #gnb .on .depth-2-wrap{left:-15px;}
#header #gnb .depth-2-wrap .depth-2{/* display:inline-block; */padding:16px 10px 16px 30px;background:#1e4879;}
#header #gnb .depth-2-wrap li{display:block;}
#header #gnb .depth-2-wrap li:not(:last-child){margin-right:0;}
#header #gnb .depth-2-wrap li + li{margin-top:10px;}
#header #gnb .depth-2-wrap li a{padding-left:0;color:#fff;font-size:13px;}
#header #gnb .depth-2-wrap li a:before{display:none;}
#header #gnb .depth-2-wrap li.on a:before{display:none;}
#header #gnb .depth-2-wrap li.on a,
#header #gnb .depth-2-wrap li a:hover,
#header #gnb .depth-2-wrap li a:focus{color: #fffd7f;}

@media (max-width:1500px) {
  #header #gnb li:not(:last-child){margin-right: 50px;}
}
@media (max-width:1400px) {
  #header #gnb li:not(:last-child){margin-right: 40px;}
}
@media (max-width:1300px) {
  #header #gnb li:not(:last-child){margin-right: 30px;}
}
@media (max-width:1200px) {
  #header #gnb li:not(:last-child){margin-right: 20px;}
}

/*-------------------------------------------
	footer
--------------------------------------------*/
#footer{position: relative; height: 74px; padding: 24px 0; background-color: #2f363d; z-index: 30; text-align: center}
#footer .footer-wrap{max-width:1500px;}
#footer .copyright{display:inline-block; color: #727578; font-size: 15px; font-weight: 500;}
#footer .info-list{display:inline-block;margin-left:10px;}
#footer .info-list li{display:inline-block;}
#footer .info-list li + li{margin-left:4px;}
#footer .info-list li a{display:inline-block;border-radius:5px;padding:4px 10px;background-color:#426799;color:#c7d2e1;font-size:12px;}
