@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 
@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);
@import url('https://fonts.googleapis.com/css?family=Roboto');

* {padding:0; margin:0;}
html {overflow-y:scroll; -webkit-text-size-adjust:none;height: 100%;}
body {word-break:keep-all;height: 100%; background-size: cover; background-position: top left; position: relative;  box-sizing: border-box;  }
body, a, select, button, pre, input, textarea {color:#333;font-size:14px; font-family:'Nanum Square','Nanum Gothic', 'Noto Sans KR','Malgun Gothic', 'Roboto', Arial, Dotum, Gulim, Verdana, Tahoma;}
input, textarea, select {font-size:13px;}
h1, h2, h3, h4, h5, strong, b, th {font-weight:600;}
legend, .hidden {position:absolute; left:-9999px; width:1px; height:1px; font-size:0; line-height:0; overflow:hidden;}
caption {height:0; font-size:0; line-height:0; overflow:hidden;}
pre {white-space:pre-wrap;}
fieldset {border:0;}
li {list-style:none;transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  }
img {vertical-align:middle; border:0; max-width:100%;}
a {text-decoration:none;}
a.st_tr, .inbox, .over_line  {text-decoration:none; transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}
header, section, article, aside, footer, nav {display:block;}
em{  font-style: normal}

h1{ }
h2{ display: none}
h3{}
h4{}
h5{}
label.hidden { display: none}
*:focus { outline:none;}

#wrap {width: 100%;  height: 100%;  display: inline-block; }
header { width: 100%; float: left;display:flex; justify-content: center; align-items: center;  height: 90px; background-color: #1b283a; display: table;; position: fixed; z-index: 999 ;  min-width: 1400px; position: fixed}
header .logo{ display: table-cell; vertical-align: middle;; padding-left: 2vw}
header .search_icon{ position: absolute; right:2vw; top:25px; padding-left: 30px; box-sizing: border-box; border-left: 1px solid #505375; height: 30px}
header .login_iconbox{ position: absolute; right:calc(2vw + 110px); top:25px; }
header .login_iconbox .icon{  float: left; border-radius: 50px; background-color: rgba(255, 255, 255, 0.5);  text-align: center; display: table; width: 35PX; height: 35PX; padding-top: 2PX; box-sizing: border-box; margin-right: 10PX}
header .login_iconbox .icon img{ line-height: 35PX }
header .login_iconbox .tx{ float: left; color: #9da0d4; font-size: 12px; font-weight: 700; line-height: 35PX;}


header .login_in_iconbox{ position: absolute; right:2vw; top:25px; }
header .login_in_iconbox .admin_icon{  float: left;  background-repeat: no-repeat; color: #a5aad9; font-size: 12px; line-height: 35PX; height: 35PX;  font-family: 'Roboto', sans-serif; margin:0px 10px }

header .login_in_iconbox .icon{  float: left;  margin-right: 10PX}
header .login_in_iconbox .icon img{ line-height: 35px }
header .login_in_iconbox .icon i{ line-height: 35px; color: #b1c5d1; font-size: 30px}
header .login_in_iconbox .tx{ float: left; color: #bbbbbb; font-size: 13px; line-height: 35PX;}
header .login_in_iconbox .tx em{  color: #fff;  font-size: 13px; line-height: 35PX; }
header .login_in_iconbox .logout{ float: right;}
header .login_in_iconbox .logout a{ float: right; color: #fff; font-size: 13px; font-weight: 700; line-height:16PX; margin-top: 3px;  background-color: #7089a0; border-radius: 50px; padding: 7px 15px}
header .login_in_iconbox .logout a:hover{float: right; color: #fff; font-size: 13px; font-weight: 700; line-height:16PX; margin-top: 3px;  background-color: #5384d0; border-radius: 50px; padding: 7px 15px}



.topicon_menu{ width:calc(100% - 240px) ; float: left; position: absolute; left: 240px; }
.topicon_menu ul { width: 100%; float: left; }
.topicon_menu ul li{ float: left;padding: 0px 30px 0px 10px; }

.topicon_menu ul li a{ float: left; width: 100%; padding-left: 35px; box-sizing: border-box; color: #fff; line-height: 90px; font-size: 15px;font-weight: 500 ;  box-sizing: border-box; transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}
.topicon_menu ul li a:hover{ float: left; width: 100%; padding-left: 35px;  color: #2dadff; line-height: 90px; font-size: 15px;font-weight: 500 ;  box-sizing: border-box}
.topicon_menu ul li.on a{ float: left; width: 100%; padding-left: 35px;  color: #2dadff; line-height: 90px; font-size: 15px;font-weight: 500 ;  box-sizing: border-box}
.topicon_menu ul li.icon1{ background: url(../_img/menu_icon01.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li:hover.icon1{ background: url(../_img/menu_icon01_ov.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li.on.icon1{ background: url(../_img/menu_icon01_ov.png); background-repeat: no-repeat; background-position: 10px center }

.topicon_menu ul li.icon2{ background: url(../_img/menu_icon02.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li:hover.icon2{ background: url(../_img/menu_icon02_ov.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li.on.icon2{ background: url(../_img/menu_icon02_ov.png); background-repeat: no-repeat; background-position: 10px center }

.topicon_menu ul li.icon3{ background: url(../_img/menu_icon03.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li:hover.icon3{ background: url(../_img/menu_icon03_ov.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li.on.icon3{ background: url(../_img/menu_icon03_ov.png); background-repeat: no-repeat; background-position: 10px center }

.topicon_menu ul li.icon4{ background: url(../_img/menu_icon04.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li:hover.icon4{ background: url(../_img/menu_icon04_ov.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li.on.icon4{ background: url(../_img/menu_icon04_ov.png); background-repeat: no-repeat; background-position: 10px center }

.topicon_menu ul li.icon5{ background: url(../_img/menu_icon05.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li:hover.icon5{ background: url(../_img/menu_icon05_ov.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li.on.icon5{ background: url(../_img/menu_icon05_ov.png); background-repeat: no-repeat; background-position: 10px center }

.topicon_menu ul li.icon6{ background: url(../_img/menu_icon06.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li:hover.icon6{ background: url(../_img/menu_icon06_ov.png); background-repeat: no-repeat; background-position: 10px center }
.topicon_menu ul li.on.icon6{ background: url(../_img/menu_icon06_ov.png); background-repeat: no-repeat; background-position: 10px center }

/**** pc ****/
@media only all and (min-width:1301px) {
	
.sub_bg{ width: 100%; height: 100%; height: 100vh;background-size: cover; background-position: top left; position: relative; display:flex;  flex-direction:row;  box-sizing: border-box; 
  justify-content: center;
  align-items: center; background-attachment: fixed !important; min-height: 850px   }

}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:769px) {
	
.sub_bg{ width: 100%; height: 100%; height: 100vh; max-height: 100%; background: url(../_img/subbg1.jpg); background-size: cover;   position: relative; display:flex;  flex-direction:row;  box-sizing: border-box; 
  justify-content: center;
 padding: 120px 2vw 50px ; }

}
/**** 모바일 ****/
@media only all and (max-width:768px) {
	
.sub_bg{ width: 100%; height: 100%; height: 100vh; background: url(../_img/subbg1.jpg); background-size: cover; position: relative; display:flex;   flex-direction:column; box-sizing: border-box; 
  justify-content: center;
  align-items: center; padding: 5px 2vw;}

}



/**** pc ****/
@media only all and (min-width:1301px) {
	.main_box_title{width: 100%; float: left}
.main_box_title .tx1{width: 100%; float: left; color: #fff; font-size:26px ; margin-bottom: 10px; font-weight: 600; font-family: 'Roboto', sans-serif; letter-spacing: 1px}
.main_box_title .tx2{width: 100%; float: left; color: #fff; font-size:16px ;  margin-bottom: 5px; color: rgba(255, 255, 255, 0.5);font-family: 'Roboto', sans-serif; }
.main_box_title .tx2 a{ clear: both; color: rgba(255, 255, 255, 0.5); font-size:16px ;  line-height: 18px; border-bottom: 1px solid #70779c; z-index: 9; position: relative }
.main_box_title .tx2 a:hover{ clear: both; color: rgba(255, 255, 255, 1); font-size:16px ;  line-height: 18px; border-bottom: 1px solid #70779c; z-index: 9; }

}
/**** 테블릿 ****/
@media all and (max-width:1300px) and (min-width:769px) {
	.main_box_title{width: 100%; float: left}
.main_box_title .tx1{width: 100%; float: left; color: #fff; font-size:26px ; margin-bottom: 10px; font-weight: 700}
.main_box_title .tx2{width: 100%; float: left; color: #fff; font-size:14px ;  margin-bottom: 5px; color: rgba(255, 255, 255, 0.5);}
.main_box_title .tx2 a{ clear: both; color: rgba(255, 255, 255, 0.5); font-size:14px ;  line-height: 18px; border-bottom: 1px solid #70779c; z-index: 9; position: relative }
.main_box_title .tx2 a:hover{ clear: both; color: rgba(255, 255, 255, 1); font-size:14px ;  line-height: 18px; border-bottom: 1px solid #70779c; z-index: 9; }

}
/**** 모바일 ****/
@media only all and (max-width:768px) {
.main_box_title{width: 100%; float: left}
.main_box_title .tx1{width: 100%; float: left; color: #fff;  font-size:18px ; margin-bottom: 10px; font-weight: 700}
.main_box_title .tx2{width: 100%; float: left; color: #fff; font-size:14px ;  margin-bottom: 5px; color: rgba(255, 255, 255, 0.5);}
.main_box_title .tx2 a{ clear: both; color: rgba(255, 255, 255, 0.5); font-size:14px ;  line-height: 18px; border-bottom: 1px solid #70779c; z-index: 9; position: relative }
.main_box_title .tx2 a:hover{ clear: both; color: rgba(255, 255, 255, 1); font-size:14px ;  line-height: 18px; border-bottom: 1px solid #70779c; z-index: 9; }

}



.main_more{ position: absolute; right: 2.5vw; top: 2.5vw; color: #7499ff; font-size: 12px; }
.main_more i{ float: right; margin-left: 5px;  color: #7499ff; font-size: 12px; }

.over_line{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0); z-index: 9; cursor:pointer;}
.over_line:hover{ position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; box-sizing: border-box; border: 10px solid rgba(24, 170, 232, 1)}

.popup_search_content{ width:100%; height:100%; background-color: #ffffff; }

.popup_search{ width: 100%; padding: 0vw}



input[type="checkbox"]#menu_state {
  display: none;
}
input[type="checkbox"]:checked ~ nav {
  width:240px;
}
input[type="checkbox"]:checked ~ nav label[for="menu_state"] i::before {
  content: "\f053";
}
input[type="checkbox"]:checked ~ nav ul {
  width: 100%;
}
input[type="checkbox"]:checked ~ nav ul li a i {
  border-right: 1px solid #2f343e;
}
input[type="checkbox"]:checked ~ nav ul li a span {
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
input[type="checkbox"]:checked ~ nav .left_title { width: 100%; float: left; height:100px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#172847+0,23355b+39,23355b+100 */
background: rgb(23,40,71); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(23,40,71,1) 0%, rgba(35,53,91,1) 39%, rgba(35,53,91,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(23,40,71,1) 0%,rgba(35,53,91,1) 39%,rgba(35,53,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(23,40,71,1) 0%,rgba(35,53,91,1) 39%,rgba(35,53,91,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#172847', endColorstr='#23355b',GradientType=0 ); /* IE6-9 */
	 position: relative;   transition: opacity 0.1s ease-in-out;  opacity: 1;
}
input[type="checkbox"]:checked ~ main {
 padding-left: 240px; width: 100% ;   transition: opacity 0.25s ease-in-out;box-sizing: border-box
}
nav {
  position: fixed;
  z-index:99;
  top: 70px;
  left: 0px;
  bottom: 0;
  background: #4464a3;
  color: #9aa3a8;
  width: 0px;
  font-family: 'Montserrat', sans-serif;
  font-weight: lighter;
  transition: all 0.15s ease-in-out;  color: #fff;
}
nav label[for="menu_state"] i {
  cursor: pointer;
  position: absolute;
  top: 20px;
  right:-25px;
  background: #aeb4b6;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25px;
  width: 25px;
  transition: width 0.15s ease-in-out;
  z-index: 1; color: #fff
}
nav label[for="menu_state"] i::before {
  margin-top: 2px;
  content: "\f054"; color: #fff
}
nav label[for="menu_state"] i:hover {
 background: #aeb4b6;
}
nav ul {
  overflow: hidden;
  display: block;
  width: 0px;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
nav ul li {
  border-top: 1px solid #395388;
	 border-bottom: 1px solid #395388;
  position: relative;
}
nav ul li.unread:after {
  content: attr(data-content);
  position: absolute;
  top: 10px;
  left: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: #fff;

  font-size: 8px;
}
nav ul li:not(:last-child) {
  border-bottom: none;
}
nav ul li.active a {
 
  color: #fff;
}
nav ul li a {
  position: relative;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  width: 100%;
  transition: all 0.15s ease-in-out;
}
nav ul li a:hover {
  background: #18aae8;
  color: #fff;
}
nav ul li a * {
  height: 100%;
  display: inline-block;   color: #fff;
}
nav ul li a i {
  text-align: center;
  width: 50px;
  z-index: 999999;
}
nav ul li a i.fa {
  line-height: 50px;
}
nav ul li a img{ width: 28px; height: 31px; padding-left: 8px
}
nav ul li a span {
  padding-left: 10px;
  opacity: 0;
  line-height: 50px;
  transition: opacity 0.1s ease-in-out;
}

nav .left_title { width: 100%; float: left; height:100px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#172847+0,23355b+39,23355b+100 */
background: rgb(23,40,71); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(23,40,71,1) 0%, rgba(35,53,91,1) 39%, rgba(35,53,91,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(23,40,71,1) 0%,rgba(35,53,91,1) 39%,rgba(35,53,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(23,40,71,1) 0%,rgba(35,53,91,1) 39%,rgba(35,53,91,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#172847', endColorstr='#23355b',GradientType=0 ); /* IE6-9 */
	 position: relative;   transition: opacity 0.1s ease-in-out;  opacity: 0;
}
nav .left_title .icon{  width:45px; height: 45px; text-align: center; line-height: 40px; border-radius: 50px; position: absolute; top:40px; left: 15px
}
nav .left_title .title{  position: absolute; left: 70px; top: 40px; color: #18aae8; font-size: 11px; text-transform: uppercase}
nav .left_title .title em{ float: left;   color: #fff; font-size: 18px; font-weight: 600; width: 100%; letter-spacing: -1px; margin-bottom: 2px}




main {
  width:100%; box-sizing: border-box; background-color: #f1f1f1 !important;float: left;  height: auto!important; 
}

main section { width:100% ;   transition: opacity 0.25s ease-in-out;
}
main section:hover {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
main section h1 {
  padding-top: 0;
  margin-top: 0;
  font-weight: lighter;
}





.popup_title{width: 100%; float: left; position: relative; color: #666; font-size: 18px; margin-bottom: 30px; margin-top: 30px}
.popup_title .line{width: 100%; float: left; height: 15px; border-bottom: 1px solid #ccc}
.popup_title .title_box{float: left; background-color: #fff; padding-right: 10px;  color: #333;  font-size: 16px; font-weight: 500; line-height: 20px ; position: absolute; left: 0px; top: 0px;font-family: 'Noto Sans KR', sans-serif;  }
.popup_title .title_box i{font-size: 20px; line-height: 20px; float: left ; margin-right: 10px}

.popup_tb{width: 100%; float: left;}





.popup_head{ width: 100%; float: left; background-color: #4464a3;  padding: 20px 20px; box-sizing: border-box ; position: relative}
.popup_head .fl_title{ width: 50%; float: left; color: #fff; font-size: 20px; font-weight: 700; }
.popup_head .close{  position: absolute; right: 20px; top: 20px; color: #fff}
.popup_head .close a{ color: #fff; font-size: 30px; }

.popup_head .fr_img{  float: right; }
.popup_body { width: 100%; float: left; box-sizing: border-box; padding: 2em }



.popup_head_s{ width: 100%; float: left; background-color: #4464a3;  padding: 10px 20px; box-sizing: border-box ; position: relative}
.popup_head_s .fl_title{ width: 50%; float: left; color: #fff; font-size: 16px; font-weight: 700; }
.popup_head_s .close{  position: absolute; right: 20px; top: 0px; color: #fff}
.popup_head_s .close a{ color: #fff; font-size: 30px; }

.popup_head_s .fr_img{  float: right; }
.popup_body { width: 100%; float: left; box-sizing: border-box; padding: 2em }

.popup_body .search_box{ width: 100%; float: left; box-sizing: border-box; padding: 1em ; border: 1px solid #ccc; background-color: #f7f7f7}
.popup_body .search_box .inbox{ width: 100%; float: left; display:flex;  flex-direction:row; justify-content: center;  margin-bottom:5px}
.popup_body .search_box .inbox .inin{ float: left;  line-height: 30px;  }
.popup_body .search_box .inbox .inin input.st1{  line-height: 30px;  height: 30px!important ; height: 30px;  border: 1px solid #ccc;  padding: 0px 5px; box-sizing: border-box}
.popup_body .search_box .inbox .inin input.st2{  line-height: 30px;  height: 30px!important ; border: none; background-color: #333; color: #fff; padding: 0px 20px }
.popup_body .search_box .inbox2{ width: 100%; float: left;   line-height: 30px; color: #666; font-size: 13px; text-align: center  }