/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
.fade-out-box {
  display: inline-block;
  background: yellow;
  padding: 10px;
  animation: fadeout 3s;
  animation-fill-mode: forwards;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}


body {font-size: 12px; font-family: 맑은 고딕, Verdana,  Helvetica, Sans-Serif; /*margin: 0; padding: 0;*/ color: #696969; margin-bottom:0px;}

a:link {color: #034af3; text-decoration: underline;}
a:visited {color: #505abc;}
a:hover{color: #1d60ff;text-decoration: none;}
a:active{color: #12eb87;}

p, ul {margin-bottom: 20px;line-height: 1.6em;}
input {width:auto;}
label {display:inline-block;}

.readonly input, .readonly select, .readonly textarea, .readonly *[contentediable] { border-color:Gray; pointer-events: none;} 

table {width:0px; table-layout:fixed; border-collapse: collapse;}
table tr td { cursor:default;}
table tr:nth-child(even) {background: #CCFFFF; /*#ECECEC;*/}
table tr td label {display:inline-block; white-space:nowrap; overflow:hidden; vertical-align:bottom; }
table tr td>input, table tr th>input  {margin: 0px; font:inherit; border: 0px; width: 100%; background: transparent; color:inherit; box-sizing: border-box;}
table tr td select {font: inherit;margin: 0px;border: 0px; background: inherit; color:inherit;}
table tr td select:focus, table tr td input[type=text]:focus { background-color:  #FFCCFF;}
table tr td>input.edit {background-color: inherit; border-radius: 2px;}

table.data tr:hover {font-weight: bold; background-color: #FFCFD2;}
table.data tr:hover td input.edit {background-color: #FFCFD2;} 
table tr.selected, table tr.selected td,
table tr.selected:hover, table tr.selected:hover td {background-color:#FFD9DC; }
table tr.editable, table tr.editable td,
table tr.editable:hover, table tr.editable:hover td {background-color: #ff919a; color:#696969 ; }
table tr.end, table tr.end select, table tr.end input[type=text]{ background-color: #E7E7E7; color: #999999; }
table tr.end:hover, table tr.end:hover select, table tr.end:hover input[type=text]{ background-color: #FFCFD2;}

table tr.alert, table tr.alert select, table tr.alert input[type=text]{ background-color: #FFDFDF;}
table tr.alert td input{ color: red;}

table tr.end .txtblue, table tr.end .txtred{color: #999999 }

table tr th {background: #DDDDDD; white-space:nowrap; margin-right:-1000px; overflow:hidden;}
table tr td {white-space:nowrap; margin-right:-1000px; overflow:hidden;}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {font-size: 1.5em; color: #000; font-family: Arial, Helvetica, sans-serif;}
h1 {font-size: 2em;padding-bottom: 0;margin-bottom: 0;}
h2 {padding: 0px;}
h3 {font-size: 1.2em; margin: 1em 0 0.5em 0; display:inline-block; }
h4 {font-size: 1.1em;}
h5, h6 {font-size: 1em;}

/* this rule styles <h2> tags that are the 
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 {margin-top: 0;}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
/*.page {width: 90%; margin-left: auto; margin-right:auto; width:1400px;} /* margin-left: Auto; margin-right: Auto;*/
#header {position: relative; margin-bottom: 0px; color: #000;padding: 0;width:1400px;}
#header h1{font-weight: bold;padding: 10px;margin: 0;color: #fff;border: none;line-height: 2em;font-family: Arial, Helvetica, sans-serif;font-size: 32px !important;}
#main{padding: 10px;background-color: #fff;margin-bottom: 0px; border-radius: 5px; width:1380px; min-height:760px;}
#footer {color: #999;padding:0;text-align: center;line-height: normal;margin: 0;font-size: .9em; clear:both;}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset {margin: 1em 0;padding: 1em;border: 1px solid #CCC;}
fieldset p {margin: 2px 12px 10px 10px;}
legend {font-size: 1.1em;font-weight: 600;padding: 1px 10px;}
.login input[type="text"] {width: 200px; border: 1px solid #CCC;}
.login input[type="password"] {width: 200px; border: 1px solid #CCC;}

/* MISC  
----------------------------------------------------------*/
.clear {clear: both;}
.error {color:Red;}
#menucontainer {margin-top:40px;}
div#title {display:block;float:left;text-align:left;}
#logindisplay {font-size:1.1em;display:block;text-align:right;margin:10px;color:White;}
#logindisplay a {color:White;}
#logindisplay a:link, 
#logindisplay a:visited {text-decoration: underline;}
#logindisplay a:hover{text-decoration: none;}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu {border-bottom: 1px #5C87B2 solid;padding: 0 0 2px;position: relative;margin: 0;text-align: right;}
ul#menu li {display: inline;list-style: none;}
ul#menu li#greeting {padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em;color: #fff;}
ul#menu li a {padding: 10px 20px;font-weight: bold;text-decoration: none;line-height: 2.8em;background-color: #e8eef4;color: #034af3;border-radius: 5px;}
ul#menu li a:hover {background-color: #fff; text-decoration: none;}
ul#menu li a:active {background-color: #a6e2a6;text-decoration: none;}
ul#menu li.selected a {background-color: #a6e2a6;}

/* Styles for Search-------------------------------------*/
#search *{ padding:0; margin:0; outline:0;  color:#666666;}
#search {font-family: Verdana, sans-serif;font-size:11px;line-height:14px; background: #E0E9E9;color: #5E5E5E; padding:7px 7px 7px 11px; margin-bottom:20px; margin-left:-9px;}
#search {-moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 6px #978f6c; -webkit-box-shadow: 0 0 6px #978f6c;}
#search p.last {margin-bottom:0px; text-align:right;}
#search label.title {margin:0px; font-size:12px; font-weight:bold;}
#search select { margin-left:0px; margin-top:2px; font-size:12px; border:solid 1px green; width:138px; display:inline;font-weight:bold; background-color:#FFFFCE;}
#search input { margin:8px 8px 4px 0px; padding:1px 4px; border:solid 1px gray; font-size:12px;font-weight:bold; width:128px; line-height:12px; display:inline-block; background-color:#D2D2FF;}
#search button {padding:1px 10px;font-size:11px;font-weight:bold;}


/* Styles for Login-------------------------------------*/
#login *{ padding:0; margin:0; outline:0;  color:#666666;}
#login {font-family: Verdana, sans-serif;font-size:11px;line-height:14px; background:#fbfcfc;color: #5E5E5E; padding:7px 7px 7px 11px; margin-bottom:20px; margin-left:-9px;}
#login {-moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 6px #978f6c; -webkit-box-shadow: 0 0 6px #978f6c;}
#login p.last {margin-bottom:0px; text-align:right;}
#login label {margin:0px;  display: inline-block; font-size:12px; font-weight:bold;}
#login label.title {width: 37px; font-size:12px; font-weight:bold;}
#login input { margin: 6px 0px -1px 0px; border:none; 
               font-size:12px; padding-left:3px; font-weight:bold; width:90px; line-height:17px; 
               display:inline-block; background-color:#D2D2FF;}
#login button {margin: 10px 0px 2px 0px; padding:1px 10px;font-size:11px;font-weight:bold;}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {color: #ff0000;}
.field-validation-valid {display: none;}
.input-validation-error {border: 1px solid #ff0000;background-color: #ffeeee;}
.validation-summary-errors{font-weight: bold;color: #ff0000;}
.validation-summary-valid{display: none;}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,.editor-label,.display-field,
.editor-field {margin: 0.5em 0;}

.text-box{width: 30em;}
.text-box.multi-line{height: 6.5em;}
.tri-state{width: 6em;}

.table { display:block; font-size:11px; padding:0px;}
.table th{ background:#fffdfa url(images/th.gif) repeat-x 0 0; color:#818181; padding: 4px 6px; text-align: left; border-bottom:solid 1px #d2d1cb;}
.table td{ background:#fbfcfc;  border-bottom:solid 1px #e0e0e0; padding: 4px 6px; text-align:center; }
.table td a {font-weight:normal;}
.table tr.odd td{ background:#f8f8f8; }
.table tr:hover td{ background:#fff9e1; }
.table td h3 {padding:0px; margin:2px;}

.box * { padding:0; margin:0; outline:0; }
.box {	font-family: Verdana, sans-serif;font-size:11px;line-height:14px;color:#5e5e5e;}
.box {  margin:0px; background:#fbfcfc; height:100%; padding:1px; margin-bottom:20px;color: #5E5E5E; font-size: 11px;}


.txtbold *{ font-weight:bold;}
.txtred *{color:Red;}
.txtblue *{color:Blue;}
.txtgray *{color:Gray;}
.txtgreen *{color:Green;}
.txtblack *{color:Black;}
.txtpurple *{color:Purple;}
.txtFireBrick *{color:FireBrick;}
.txtfuchsia *{color:Fuchsia;}




/*** CSS3 ***/
.box { -moz-border-radius:5px; -webkit-border-radius:5px; -moz-box-shadow: 0 0 6px #978f6c; -webkit-box-shadow: 0 0 6px #978f6c;}
.box-head { -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }

.field, .button { -moz-border-radius:4px; -webkit-border-radius:4px; }
.small-field, .button, .pagging a { -moz-border-radius:3px; -webkit-border-radius:3px; }

.cleft { float: left; padding: 10px 0 10px 10px; width: 150px; min-height: 760px; }
.cleft h3 { -webkit-border-radius: 7px;-moz-border-radius: 7px; border-radius: 7px; font-size: 14px; color: #fff; background: #6a9d84; padding: 3px 10px; line-height:30px; margin:0px; }
.cleft ul { margin: 0; padding: 0; list-style-type: none; margin: 8px 0px 14px 0px; }
.cleft ul li { margin: 0 0 5px 0; color: #fff; }
.cleft ul li a { -webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px; font-size: 12px; display: block; text-decoration: none; color: #fff; background: #7599a9; padding: 3px 10px; color: #fff; }
.cleft ul li a:hover { background: #3D8EA9; }

.cright { -webkit-border-top-right-radius: 7px;-webkit-border-bottom-right-radius: 7px;-moz-border-radius-topright: 7px;-moz-border-radius-bottomright: 7px; border-top-right-radius: 7px;border-bottom-right-radius: 7px;
           border-left: 1px solid #e9e9e9; background: #fff;float: right; padding: 10px; width: 1180px; min-height: 760px; }
.cright h2 {-webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px; background: #fffaae; padding: 10px; font-weight: normal; color: #585858;letter-spacing: -1px;font-weight: bold;margin: 10px 0px 10px 0px;}

ul.filter li {color: blue;padding: 5px 10px; margin: 0px; cursor:pointer;}

.nav {font-size:12px;}
.nav ul{ list-style-type: none; padding:0px 5px; margin:0px;  }
.nav ul li{ float:left; display:inline; height:20px; width:61px; overflow:hidden; white-space:nowrap;}
.nav ul.filter li{ border-radius:5px; padding:5px; background-color:#F6E39F; margin:5px; }
.nav ul.filter li:hover { background-color:#F0D064; color:Red;}
.nav ul.filter li.active:hover { background-color:#F0D064; color:Red;}
.nav ul.filter li.active { background-color:#F0D064; font-weight:bold; color:Red;}

.commands button {float:right; font-size:12px; margin:5px; }
select.filter {font-size: 12px; border-color:Green; background-color: #FF0;}

div.tablewrapper {padding:10px;}
button {font: inherit;}
#popup_box{visibility:hidden; z-index: 1002; position:absolute; top:20%; left:30%;}
#hider {visibility:hidden;background-color:#111;opacity: 0.65;position:absolute;z-index: 1000; /*ooveeerrrr nine thoussaaaannnd*/top:0px;left:0px;width:100%;height:100%;overflow:auto;}

h3.mvcMembership {clear: left;}
ul.mvcMembership-paging li {float: left;list-style-type: none;margin: 1em;}
ul.mvcMembership  li  form {display: inline; margin-left: 1em;}
dl.mvcMembership {margin-left: .9em;}
dl.mvcMembership dt {display: block; float: left; clear: left; height: 1.75em; margin-right: 1em; }
dl.mvcMembership dd {display: block; height: 1.75em; }
div.mvcMembership-account form { display: inline; } 
div.mvcMembership-allUsers ul { margin: 0; } 
div.mvcMembership-allUsers ul.mvcMembership-users li { margin: .5em 0 .5em 0; }
div.mvcMembership-allUsers ul.mvcMembership-users li span.mvcMembership-isOnline { display: block; font-weight: bold; color: #33cc33; } 
div.mvcMembership-allUsers ul.mvcMembership-users li span.mvcMembership-isOffline { display: block; color: #999; } 
div.mvcMembership-allUsers ul.mvcMembership-users li span.mvcMembership-email { display: block; font-size: .8em; }
div.mvcMembership-allUsers ul.mvcMembership-users li span.mvcMembership-comment { display: block; border: 1px solid #ccc; padding: .25em .5em .25em .5em; margin: .5em 0 .5em 0;}
div.mvcMembership-allRoles ul li { margin: .5em 0 .5em 0; }
div.mvcMembership-allRoles ul li a { width:500px; }

.new-title {float:none; position:relative; z-index:20; width:100%; border-top:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; background:#f9f9f9; margin-bottom:10px; width:1138px;}
.new-title:after {content:""; display:block; clear:both; *zoom:1}
.title-leftarea {float:left; height:24px; padding:0 0 0 23px; background:url('Images/bullet_title.gif') 10px center no-repeat; font-weight:bold; line-height:25px; color: #FF00F5;}
.title-rightarea {float:right; height:24px; border-right:1px solid #c0c0c0}
.btn-area {float:right; margin:4px 10px 0 0}
.txt-area {float:right; margin:4px 10px 0 0; line-height:18px}
.icon-question {float:left; width:14px; height:14px; margin:5px 0 0 5px;  background:url('Images/leftmenu_help.gif') top left no-repeat; cursor:pointer}

/*옵션메뉴*/
.option_box_new {display:none; z-index:30; position:absolute; top:24px; right:0; border:1px solid #8fa5ba; background:#fff}
.option_box_new li {margin:0; border-top:1px dotted #ddd;}
.option_box_new li:first-child {border-top:none}
.option_box_new li a {display:block; padding:5px 8px; background:#fff; font-size:11px; line-height:16px; font-weight:normal; color:#000;}
.option_box_new li a:hover {background:#efefef}

/*버튼들*/
.btn-setting, .btn-search, .btn-print-search {
	display:inline-block;  float:left; width:34px; height:24px; cursor:pointer; 
	background:url('Images/btn_title_right.gif') no-repeat;
}
.btn-setting {background-position:0 0}
.btn-setting:hover {background-position:-34px 0}
.btn-search, .btn-print-search {background-position:0 -24px}
.btn-search:hover, .btn-print-search:hover {background-position:-34px -24px}
.btn-print-search {position:absolute; right:1px; margin-right:-1px; margin-top:2px; z-index:10; border-right:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0}

.btn-search-on {background-position:-34px -24px}
.btn-setting-on {background-position:-34px 0}
.btn-print-close {display:inline-block; position:absolute; bottom:-23px; right:-1px; width:34px; height:24px; cursor:pointer; background:url('/ECMain/ECount.Common/Images/btn_search_close.gif') left top no-repeat;}


.mini .setter {position:relative; border:1px solid #4D90C3; border-right-color:#175482; border-bottom-color:#175482;}
.mini .harden {padding:4px; border:1px solid #76A8D7; border-right-color:#306D9E; border-bottom-color:#306D9E; background-color:#4E88C8;}
.mini .content {margin:0; padding:3px; background-color:#F3F3F3;}
.mini .block {padding:3px 11px 11px; border:1px solid #D1D1D1; background-color:#FFF;}
.mini .item {padding-left:14px; background:url("../images/bul_item_mini.gif") no-repeat 0 6px;}

.mini {color: #565454; font-size: 12px; font-family: 돋움,Dotum,굴림,Gulim,Verdana,Arial,sans-serif; background-image:none;}
.mini .title {display:block; margin:0 0 15px -4px;}
.mini .item {width:285px; margin:5px 0;}

.block .btn {display:inline-block; padding-left:3px; background:url("../images/bg_btn_block.gif") no-repeat left top;}
.block .btn a {display:inline-block; padding:4px 11px 2px 1px; background:url("../images/bg_btn_block.gif") no-repeat right top; font-size:11px; letter-spacing:-1px;}
.block .btn a:link, .panel .block .btn a:visited, .panel .block .btn a:hover, .panel .block .btn a:active {color:#565454;}

.mini .item label {display:inline-block; width:16px;}
.mini .item input {width:65px; height:13px; border:1px solid #C8C8C8; padding:3px 0 0 2px; color:#8A8A8A; font-size:11px; line-height:100%;}
.mini .func {padding-left:0; padding-right:9px; background:url("../images/bg_btn_func.gif") no-repeat right top;}
.mini .func a {padding:4px 1px 2px 13px; background:url("../images/bg_btn_func.gif") no-repeat left top;}
.mini .note {min-height:14px; _height:14px; margin:13px 20px 0 0; padding:5px 7px 3px; border:1px solid #C8D8E6; background-color:#E8EFF5; color:#7899C4;}
.mini a:link, a:visited, a:hover, a:active {color:#818181; text-decoration:blink; outline:0; cursor:pointer;}

.head div { vertical-align:top;margin:5px;}
.head .title {}
.head .title h1 {margin:0px; font-size: 15px;color: #D2691E;}
.head .navigation img{ vertical-align:top;}

/*리스트*/
.list-wrapper {font-family: 맑은 고딕, Verdana,  Helvetica, Sans-Serif; font-size:12px; color:#333333;}
.list-wrapper .list_head,
.list-wrapper .list_foot  {background:#DDDDDD; padding:2px 2px; /* margin:3px 0px; */  padding-right: 20px;}

.list-wrapper label {border: 1px solid white; display: inline-block; padding: 0px 1px; -webkit-border-radius: 3px; margin:0px 0px 1px 0px;overflow:hidden; white-space:nowrap; vertical-align:top; height:15px; overflow:hidden;}
.list-wrapper checkbox {margin:0px; vertical-align: text-bottom;}
.list-wrapper input[type="checkbox"] {margin:1px 2px 1px 1px;}
.list-wrapper input[type="text"] {border: 1px solid #EFEFEF; font:inherit; color:inherit; background-color:Transparent; padding-left:2px; vertical-align:top; -webkit-border-radius: 3px; margin:0px; padding:0px;padding-left:2px;}

.list-wrapper .list-item {background:white; margin:2px 0px; padding:0px 2px;}
.list-wrapper .list_head label{background:#C0C0C0; border: 1px solid #999999; text-align:center; font-weight:bold;}
.list-wrapper .list_foot label{background:#CCFFCC; border: 1px solid #C0C0C0; text-align:right;}
.list-wrapper .list_foot label.spacer {background:#DDDDDD; border: 1px solid #DDDDDD; text-align:right;}
.list-wrapper .odd label {background: #CCFFFF; border: 1px solid #CCFFFF;}
.list-wrapper .odd input[type="text"] {background: #CCFFFF;border: 1px solid #EFEFEF;}

.list-wrapper .list-item:hover label {/*background: #FFCCFF; border-bottom: 1px solid red;*/ color:red; font-weight:bold;}
.list-wrapper .list-item:hover input[type="text"] {background: #FFCCFF; border-bottom: 1px solid red;}
.list-wrapper .list-item input[type="text"]:focus {background-color: #FFCCCC;}

.list-wrapper .finished label, 
.list-wrapper .finished input[type="text"] {background-color: #E7E7E7; color:#808080;}

.list-wrapper .warnning label, 
.list-wrapper .warnning input[type="text"] {color:red;}

.list-wrapper .selected label,
.list-wrapper .selected input[type="text"] {background:#ECD9FF;}

.search {font-family: 맑은 고딕, Verdana,  Helvetica, Sans-Serif; font-size:12px; color:#333333; background:white; margin:2px 0px; padding:0px 2px;}
.search label {border: 1px solid white; display: inline-block; padding: 0px -webkit-border-radius: 3px; margin:0px 0px 1px 0px;overflow:hidden; white-space:nowrap; vertical-align:top}
.search label.title {background:#C0C0C0; border: 1px solid #999999; line-height: 1.5em;}
.search checkbox {margin:0px;}
.search input[type="checkbox"] {margin:1px 2px 1px 1px; vertical-align: text-bottom;}
.search input[type="radio"] {margin:1px 2px 1px 1px; vertical-align: text-bottom;}
.search input[type="text"], .search input[type="date"], .search input[type="month"], .search select {border: 1px solid #EFEFEF; font:inherit; color:inherit; background-color:Transparent; padding-left:2px; vertical-align:top; -webkit-border-radius: 3px; margin:0px; padding:0px;padding-left:2px;}


.btn {width: 8px; background-image:url('../images/ui-icons_gray.png');} 
.btn.act {cursor: pointer;} 
.btn:hover {background-image:url('../images/ui-icons_red.png');} 
input.upper { text-transform: uppercase;}/*대문자입력*/
input.lower { text-transform: lowercase;}/*소문자입력*/

.listwindow .checkAll {margin-left:1px;}
th.selector input {margin-left:-1px;}

#mainnav {user-select: none;}

.listwindow {border: solid 1px gray; }

dialog {
    flex-direction: column;
    gap: 5px;
    min-height: 220px;
    max-height: 80%;
    min-width: 250px;
    max-width: 80%;
    border: #5d5d5d solid 1px;
    border-radius: 3px;
    padding: 10px;
    outline: none;
}
* {outline: none;}