@charset "utf-8";

/* components.css - 요소별(input, button, icon, badge, label 등..) 스타일 
------------------------------------------------------------------------------------------------------- */
/* ///////////////////////////////////////////////
   badge
////////////////////////////////////////////// */
.badge {
    background-color: #FF3939;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}
.badge:empty {
    display: none;
}


/* ///////////////////////////////////////////////
   label
////////////////////////////////////////////// */
.label {
    box-sizing: border-box;
    color: #fff;
    display: inline-block;
    font-size: 75%;
	overflow: hidden;	
    padding: .2em .8em;
    vertical-align: middle;
}
._round {
    border-radius: 1em;
}
.label.label-default {    
    border: 1px solid;
    color: #3A84A8;
}
.label > .item {
    display: inline-block;
    font-size: small;
    font-weight: 500;
    text-decoration: none;
}
/* state */
.label.state {
    border-radius: 50%;
    font-weight: 600;
    height: 1.9rem; width: 1.9rem;
    line-height: 3.3;
    margin: 0;
    padding: 0;
    text-align: center;
}
._attention { background: #00CFE8}
._caution { background: #FFC000}
._boundary { background: #FF7D00}
._serious { background: #FF2C2C}


/* ///////////////////////////////////////////////
   icon
////////////////////////////////////////////// */
.css_icon {
    display: block;
    position: relative;
}
/* allmenu */
.css_icon._allmenu,
.css_icon._allmenu::before, 
.css_icon._allmenu::after {
    border-top: 1px solid;
    width: 1.3rem;
}
.css_icon._close {
    width: 100%; height:100%;
}
.css_icon._allmenu::before, 
.css_icon._allmenu::after,
.css_icon._close::before,
.css_icon._close::after,
.css_icon._search::before,
.css_icon._search::after {
    content: "";
    display: block;
    position: absolute;    
}
.css_icon._allmenu::before, 
.css_icon._allmenu::after {
    top: -9px; left: 0;
}
.css_icon._allmenu::after {
    top: 8px;
}
.css_icon._close::before,
.css_icon._close::after {
    width: 1px;
    height: 100%;
    background: #000;
    transform: rotate(45deg);
    margin-left: .4em;
}
.css_icon._close::after {
    transform: rotate(-45deg);
}
.css_icon._search::before {    
    height: 20px; width: 20px;
    border-radius: 50%;
    border: 1px solid;
    position: static;
}
.css_icon._search::after {
    background: #fff;
    bottom: -5px; right: 0;
    height: 10px; width: 1px;
    transform: rotate(-45deg);
}
.img_icon {
    background: url(../img/sprit.png) no-repeat;
    background-size: cover;
    display: block;
}
.img_icon.qm {
    margin: .1em auto;
    position: relative;
    width: 30px; height: 30px;
}
._issue  { background-position: 0 0;}
._notice { background-position: -30px 0; }
._network { background-position: -60px 0; }
._facility { background-position: -90px 0; }
._authority { background-position: -120px 0; }
._chat { background-position: -150px 0; }


/* ///////////////////////////////////////////////
   button
////////////////////////////////////////////// */
.btn {
    color: inherit;
    display: inline-block;
    font-size: inherit;
    font-weight: normal; 
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    -ms-touch-action: manipulation;
            touch-action: manipulation;
    -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none; 			
    padding: .4rem .5rem;
    margin-bottom: 0;
    background-image: none;
    border: 1px solid transparent;
}
.btn:focus,
.btn:active:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}
.btn:hover,
.btn:focus {
	text-decoration: none;
}
.btn:active {
	outline: 0;
	background-image: none;
    transform: translateY(2px);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn,
input[disabled] {
	pointer-events: none;
	cursor: not-allowed;
	box-shadow: none;
	color: #aaa;
	border-color: #ccc;
	background: #e1e1e1;
}
.btn_neutral {
    background: #276D8F !important;
    border: 1px solid #4087AA;
    color: #fff !important;
}
.btn_negative {
    background: #fff !important;
    border: 1px solid #FD7C1B !important;
    color: #FD7C1B !important;
}
.btn_positive {
    background: #FD7C1B !important;
    color: #fff !important;
    font-weight: 500 !important;
}
.btn_positive_gray {
	background: #EFEFEF !important;
	color: #000;
}
.btn_conclusion {
    background: #8C0303!important;
    color: #fff !important;
    font-weight: 500 !important;
}
.btn_icon {
    background: transparent;
    border:none;
}
.btns_xs > .btn,
.btn_xs {
    border-radius: 1em;
    font-size: .6rem;
    line-height: 1.5;
    padding: 0 .25rem;
}
.btn_round {
	border-radius: 1.4rem;
}
.btns_sm {
    float:right;
}
.panel_heading > .btns_sm {
    height: 0;
}
.btns_sm > .btn,
.btn_sm {
    border-radius: 1em;
    font-size: .8rem;
    padding: .2em 0.5em;
}
.btns_md > .btn,
.btn_md {
    border-radius: 2em;
    font-size: .8rem;
    padding: .6em 1em .65em;
    min-width: 6.1rem;
    text-align: center;
}
.btn_lg{
    padding: .5rem .8rem;
    font-size: .9rem;
}
.fl_btn {
    position: fixed;
    bottom: 4rem; right: 1rem;
}
.fl_btn > .btn {
    border-radius: 50%;
    box-shadow: 0px 3px 3px rgba(0,0,0, .15);
    font-size: .8rem;
    width: 52px; height: 52px;
}

.btn_area {    
    padding: 1em;
}
.btn_area > .btn {
    width: 100%;
    font-size: .75rem;    
}
.btn_area.jc_sb > .btn {
    margin: 0;
}


/* ///////////////////////////////////////////////
   list
////////////////////////////////////////////// */
.sty_none {
    list-style: none;
    margin: 0;
    padding-left: 0;
}
.quick_menu {
    background: #fff;
    position: fixed;
    bottom: 0; right: 0;
    width: 100%;
}
.qm_list {
    border-top: 1px solid #D7D7E8;
    display: flex;
    height: 60px;
}
.qm_list li {
    flex: 1;
    text-align: center;
    padding-top: .3em;
}
.qm_list a {
    color: #000;
    display: inline-block;
    font-size: .6rem;
    font-weight: 500;
    position: relative;
}
.qm_list .badge {
    font-size: .55rem;
    line-height: 1.6;
    overflow: hidden;
    position: absolute;
    top:0; right: 0;
    width: 5px; height: 5px;
}
.update_info {    
    color: #276D8F;
    font-size: .7rem;
    font-weight: 500;
    margin: .3rem;
    text-align: right;
    vertical-align:middle;
    line-height:2;
}
.w_full.update_info {
	font-size:0.6rem;
	margin:0;
}
.list_group {
    padding-left: 0;    
}
.list_group_item {
    position: relative;
    color: #444;
    display: block;
    font-size: .75rem;
    padding: 10px 15px;
    margin: -1px -1px 0;
    background-color: #fff;
    border: 1px solid #ddd;
}

.list_group_item ._info {
    font-size: .55rem;
    color: #888;
    margin-top:.3em;
}
.list_group_item > .item ~ .item,
.list_group_item .item > .phone_info {
    margin-left: .5em;    
}
.list_group_item .item > .phone_info {
    display: inline-block;
    overflow: hidden;
    width: 1em; height: 1em;
}

.item_margin {
    margin: -1px -2px 0;
}

._singleLine {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.part_line {
    border-left: 1px solid #cccccc;
    margin-left: .7em;
    padding-left: .7em;
}

/* 상황정보 */
.situation_info {
    height: calc(100% - 55px);
}
.situation_info .list_group_item {
    border: none;
    border-bottom: 1px solid #F8F8F8;
    margin: 1em 2em;
    padding: 1em 1.5em 1em 3.5em;
}
.situation_info.heading {
    border-top: 1px solid #F8F8F8;
}
.situation_info.heading .list_group_item {
    border-bottom: 0px solid #F8F8F8;
	margin: 0 2em;
}
.situation_info .list_group_item.link::before {
    content: "\edbe";
    position: absolute;
    right: 0; top: 1.2em;
}
.situation_info .label.state {
    position: absolute;
    left: 0;
}
.situation_info .label.state2 {
    position: absolute;
    top:3rem;
    left: 0;
}

.situation_info time.in_icon {
    border-left: 1px solid #ddd;
    color: #276D8F;
    font-size: .6rem;
    font-weight: 500;
    margin-left: 0.3em;
    padding-left: .3em;
}
.situation_info time.out_icon {
    color: #8C0303;
    font-size: .6rem;
    font-weight: 500;
}
.state_info {
    color: #888;
    font-size: .65rem;
    margin: .2em 0;
}
.situation_info time.in_icon::before,
.situation_info time.out_icon::before,
.state_info > span ~ span::before,
.situation_info > .list_group_item::before {    
    font-family: 'IcoMoon' !important;
}
.situation_info time.in_icon::before {
    content: "\ea4c";
    margin-right: .5em;
}
.situation_info time.out_icon::before {
    content: "\ec44";
    margin-right: .5em;
}
.situation_info .active {
	background-image: url(../img/back.gif);
	background-size: cover;
	color: transparent;
	-moz-background-clip: text;
	-webkit-background-clip: text;
	text-transform: uppercase;
	font-size: 0.5rem;
	line-height: .75;
	margin: 10px 0;
}

.state_info > span ~ span::before {
    content: "\edce";
    display: inline-block;
    margin: 0 .7em;
}
.state_info.detail {
	font-size:0.8rem;
}

/* ///////////////////////////////////////////////
   navigation
////////////////////////////////////////////// */
.gnb {
    overflow: hidden;
    overflow-y: auto;
    height: calc(100vh - 150px);
    margin: 1em 0;
}
.gnb_list {
    margin: 0 1em;
    z-index: 2;
}
.gnb_list a {
    display: block;
    position: relative;
}
.gnb_list .has_sub::after,
.gnb_list .has_sub.active::after {
    content: "\edc2";
    font-family: 'IcoMoon' !important;
    opacity: .2;
    position: absolute;
    right: 1em;    
    -webkit-transition: all .7s;
    transition: all .7s;
}
.gnb_list .has_sub.active::after {
    opacity: .3;
    transform: rotate(-180deg);
}
.depth1 > a {
    color: #fff;
    font-size: .70rem;
    padding: 1em .8em;
    letter-spacing:-1px;
    
}
.gnb_list a:hover {
    background: rgba(0,0,0, .07);
}
.depth1 .icon {
    font-size: .7rem;
    margin-right: .2em;
}
.depth1 > .active {
    color: #fff;
}
.depth1 .current {
    background: #00b19d;
}
.depth2_wrap {
    display: none;
}
.depth2_wrap.active {    
    margin-bottom: 1em;
    display: block;
}
.depth2_wrap a {
    background: #3A84A8;
    color: #BDE3F6;    
    font-size: .65rem;
    padding: .9em 2.6em;
}
.depth2 {
    padding-bottom: 1px;
}
/*TODO : 이거 다른색 필요*/
.depth2 .current {
    background: #00b19d;
}

.pagination {
    font-size: .75em;
    font-weight: 500;
    list-style: none;
    padding: 1em 0;
    position: relative;
}
.pagination a {
    color: #888;
    display: block;    
    padding: .6rem;
    width: 2rem;
    text-align: center;
}
.pagination .current,
.pagination a:hover {
    color: #3A84A8;
}
.pagination .current {
    font-weight: 500;
}
[aria-label="Previous"],
[aria-label="Next"] {
    position: absolute;
}
[aria-label="Previous"] {
    left: 0;
}
[aria-label="Next"] {
    right: 0;
}

/* tab */
.tab {
    background: #fff;
    border-bottom: 1px solid #D7D7E8;
    box-shadow: 0 2px 3px rgba(0,0,0, .05);       
    width: 100%;
    margin-bottom: -1px;
}
.tab_list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.tabitem {
    border-bottom: 3px solid transparent;
    color: #888;
    cursor: default;
    flex-grow: 1;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: -.1em;
    padding: .5em;
    text-align: center;    
}
.tabitem:hover {
    color: #3A84A8;
    border-bottom-color: inherit;
}
.tabitem.current {
    border-bottom-color: #276D8F;
    color: #276D8F;
}
.tab_conts {

}


/* ///////////////////////////////////////////////
   panel
////////////////////////////////////////////// */
.panel {    
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    /* 
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    */
}
.title_heading {
    position: relative;
    padding: 10px 15px;
    border-bottom: 2px #276D8F solid;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.title_heading + .form_wrap {
    border-top:0;
}
.title_heading + form .form_wrap {
    border-top:0;
}
.panel_heading {
    position: relative;
    padding: 10px 15px;
    border-bottom: 1px #276D8F transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel_heading_left {
    border-bottom: 2px solid #276D8F;
    text-align: left;
    padding-bottom: 1rem;
}
.panel_body {
    padding: 15px;
}
.panel_notice {
    box-shadow: none; 
    color: #444;    
}
.panel_notice > .panel_heading {
    border-bottom: 2px solid;
    text-align: center;
    padding-bottom: 1rem;
}

.panel_notice > .panel_body {
    font-size: .75rem;
    min-height: 400px;
    line-height: 1.45;;
}

/* ///////////////////////////////////////////////
   Login
////////////////////////////////////////////// */
#wrap.login {
    background: #021928 url(../img/bg.jpg) no-repeat center 7em;
    background-size: cover;
}
  
#wrap.login .brand {  
    height: 140px;
    width: 161px;
    margin: 0em auto 2em;
    color: #efefef;
    text-align: center;
}

#wrap.login.pinlogin {
	padding-top: calc(50vh - 260px);
}
.pinlogin .login_box {
    height: 510px; width: 100%;
    margin: auto;
    max-width: 390px;
    padding: 2em 2.5em;
    position: relative;
    left: 0; right: 0;
    bottom: 0; top: 0;
    text-align: center;
}
.pinlogin .keypad{
    background:none;
    padding:10px;
    top:180px;
    left:65px;
}
.pinlogin .keypad .item a{
    color:#ffffff;
}

.login_box {
    height: 510px; width: 100%;    
    margin: auto;
    max-width: 390px;
    padding: 2em 2.5em;
    position: absolute;
    left: 0; right: 0;
    bottom: 0; top: 0;
}
.login_form > input {
    background-color: transparent;
    border: 1px solid #276D8F;
    border-radius: 2em;
    color: #276D8F;
    display: block;
    font-size: .6rem;
    margin: .75em 0;    
    padding: 1em 1em 1em 3.5em;
    width: 100%;
}
.login_form > input:hover,
.login_form > input:focus {    
    border: 1px solid #56D888;
    color: #56D888;
    outline: none;
}
.login_form input:-webkit-autofill,
.login_form input:-webkit-autofill:hover, 
.login_form input:-webkit-autofill:focus, 
.login_form input:-webkit-autofill:active  {
	 transition: background-color 5000s ease-in-out 0s;
	 -webkit-transition: background-color 9999s ease-out;
     -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0) inset !important;
     -webkit-text-fill-color: #276D8F !important;
}

.login_form > ._id {
    background: url(../img/icon_id.png) no-repeat;
}
.login_form > ._pw {
    background: url(../img/icon_pw.png) no-repeat;
}
.login_form > ._id:focus {
    background: url(../img/icon_id_focus.png) no-repeat;
}
.login_form > ._pw:focus {
    background: url(../img/icon_pw_focus.png) no-repeat;
}
.login_form > ._id, .login_form > ._id:focus,
.login_form > ._pw, .login_form > ._pw:focus {    
    background-size: 26px;
    background-position: 1em .4em;
}

.login_form input::placeholder{
    color: #276D8F;
}
.login_form input::-webkit-input-placeholder {
    color: #276D8F;
}
.login_form input:-ms-input-placeholder {
    color: #276D8F;
}
.login_form .btn_negative3 {
	margin-top:3rem;
    background: #276D8F;
    color: #fff;
}
.login_form .btn_negative2 {
    margin-top:3rem;
    background: #56D888;
    color: #fff;
}
/* ///////////////////////////////////////////////
   Form
////////////////////////////////////////////// */

.form {
    padding: 1em;
}
.paneltitle {
    font-size: .8rem;
    margin-top:1rem;
    margin-left:0.5rem;
}
.paneltitle h4{
    margin:0.5rem 0;
}
.paneltitle h5{
    margin:0.5rem;
}
.form_wrap {
    border-top: 2px solid #276D8F;
    font-size: .8rem;
}
.res_h_full .form_wrap .gridBody {
	height:70vh;
}
.res_h_full .form_wrap .gridBody.exoneline {
	max-height:calc(40vh);
}
.res_h_70 .form_wrap .gridBody {
	height:40vh;
}

.form_wrap > .row {
    flex-wrap: wrap;
}
.form_wrap .th,
.form_wrap .td {
    border-bottom: 1px solid #efefef;    
    width: 100%;
}
.form_wrap .th {    
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1.45;
    max-width: 120px;
    padding: .5em .3em;
}
.form_wrap .td {
    flex-shrink: 1;
	position: relative;
    color: #666;
    padding: .3em 1.2em;
    width: calc(100% - 130px);
    display:inline-block;
}

@media screen and (max-width: 320px) {
    .form_wrap .td {
	    flex-shrink: 1;
		position: relative;
	    color: #666;
	    padding: 0.3em 0.2em;
    	width: calc(100% - 104px);
	    display:inline-block;
	}
}

.form_wrap .th.wideth {    
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1.45;
    max-width: 150px;
    padding: .5em .3em;
}
.form_wrap .td.wideth {
    color: #666;
    padding: .3em 1.2em;
    width: calc(100% - 150px);
}

.form_wrap .td.fulltd {
    color: #666;
    padding: .3em 1.2em;
    width: 100%;
}
.form_wrap h4 {
    font-size: 1rem;
}

/*필수값 */
.essentialMark {
    display: inline-block;
    width:0.8rem;
    color:#FD7C1B;
    padding:0.3rem 0.2rem;
    font-size:0.7rem;
}

.form.searchbox {
    background: #276D8F;
    color: #fff;
    margin-bottom: 1em;
}
.form.searchbox._singleRow {
    padding: 0 1em;
}
.form.searchbox .form_wrap {
    border-top: none;
}
.form.searchbox .th,
.form.searchbox .td {
    border-color: rgba(218, 215, 250, .1);
}
.form.searchbox .td {
    color: #fff;
    min-height: 40px;
}
.form.searchbox .btn_area > .btn {
    border-radius: 2em;    
}
.form.searchbox .btn_area > .btn + .btn {
    margin-left: .4em;
}
.form.searchbox .btn_positive {
    background: #fff;
    color: #276D8F;
}
.form.searchbox .btn_neutral {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.ip_form > .form_wrap {
    border:none;
    color: #888;
    font-size: .75rem;
}
.ip_form .th {
    border-bottom: none;
    max-width: 150px;
    padding: .5em 1em;
}
.ip_form .td {
    width: calc(100% - 150px);
    padding: .3em .5em;
}

.form_wrap .w_full,
.ip_form .w_full { 
    width: 100%;
    padding: 0;
}

/* input box */
.form_wrap input {
    padding: 0 .3em;
}
.form_wrap input,
.form_wrap select {
    background: #fff;
    border: #ebebeb 1px solid;
    color: #444;
    width: 100%;
    height: 80%;
}
.form_wrap input.essential,
.form_wrap textarea.essential,
.form_wrap select.essential {
    width: calc(100% - 1rem);
    display:inline-block;
}

.ip_group {
    display: flex;
}
._tilde > .ip_wrap ~ .ip_wrap {    
    margin-left: 1em;
}
._tilde > .ip_wrap ~ .ip_wrap::before {
    content: "~";
    position: absolute;
    margin-left: -.8em;
}

/* radio */
.state {
    margin: 1em 0 0;
    font-size: .6rem;
}
.state_item {
    font-size: .6rem;
    text-align: center;
    width: 100%;
}
.state_item input {
    display: none;
}
.state_item ._state {
    border-top: 4px solid;
    color: #888;  
    display: inline-block;
    font-weight: 500;;
    padding-top: 7px;
    position: relative;
    width: 100%;
}
.state_item .serious {
    color: #888;
}
.state_item .boundary {
    color: #aaa;
}
.state_item .caution {
    color: #ccc;
}
.state_item :checked + .serious {
    color: #FF3939;    
}
.state_item :checked + .boundary {
    color: #ff8b39;    
}
.state_item :checked + .caution {
    color: #ffdd39;
}
.state_item ._state::before,
.state_item ._state::after,
.state_item :checked + ._state::after {
    content: "";
    position: absolute;
    left: 50%; top : -.4rem;    
    margin-left: -.2rem;
}
.state_item ._state::before {
    border-radius: 50%;
    background: #fff;;
    display: block;
    height: .5rem; width: .5rem;
    margin-left: -3px;
}
.state_item ._state::after,
.state_item :checked + ._state::after {    
    content: "\ee73";
    font-family: 'IcoMoon' !important;
}
.state_item :checked + ._state::after {
    content: "\ee76";
}

/* checked */
.checkbox > input[type="checkbox"] {
    display: none;
}
.checkbox > :checked + .icon::before {
    content: "\ee66";
}

/* select box */
select {   
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0px;
}
select::-ms-expand {
    display: none;
}
.ui_select {
    display: inline-block;
    position: relative;    
    width: 100%; height: 100%;
}
.ui_select::after {
    content: "\edc2";
    font-family: 'IcoMoon' !important;    
    height: 1rem;  
    margin: auto;
    position: absolute;
    top: 0;     bottom: 0;
    right: .5em;
}
.ui_select select {
    height: 100%;
    padding: .3em;
    padding-right: 2em;
}
.ui_select.w_auto {
    flex-shrink: 0;
}
.searchbox .ui_select select {
    background: #276D8F;
}

/* textarea */
textarea {
    color: inherit;
    border: 1px solid #e8e8e8;
    line-height: 1.45;
    margin: .5em 0;
    padding: .5em;
    width: 100%;
}


/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 2rem;
    height: 1rem;
    margin-top:0.2rem;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 0.5rem;
    width: 0.5rem;
    left: 0.2rem;
    bottom: 0.25rem;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #276D8F;
}

input:focus + .slider {
    box-shadow: 0 0 1px #276D8F;
}

input:checked + .slider:before {
    -webkit-transform: translateX(1rem);
    -ms-transform: translateX(1rem);
    transform: translateX(1rem);
}

/* Rounded sliders */
.slider.round {
    border-radius: 1.5rem;
}

.slider.round:before {
    border-radius: 50%;
}


/*citadel*/
.body_wrap{
    width:100%;
}
.issue_rep {
	color:#666;
    padding:1rem;
    border: 1px solid #e8e8e8;
    margin:0.5rem;
}
.res_h_30 .form_wrap .issue_rep {
	height:20vh;
}
.panel_heading button {
	/*
    position:absolute;
    top:0.8rem;
    right:1rem;
    */
    position: relative;
    top: -1.2rem;
}

.i-cross2 {color : #cd0000}
.i-cancel-circle2 {color : #cd0000}
.i-info2 {color : #cd0000}
.i-checkmark-circle {color : #0080c0}

.noti_tab_item {
    position: relative;
    color: #444;
    display: inline-block;
    font-size: .75rem;
    padding: 13px 15px;
    margin: -6px -3px 0px -2px;
    background-color: #fff;
    border: 1px solid #ddd;
    width: 28%;
    height: 38px;
    cursor: pointer;
    text-align: center;
}

.tab_clicked{
    background-color: #ddd;
}

.inner_title{
	line-height: 1.45;
    font-weight: bold;
    display: inline-block;
}

.title_line{
	border-top: 2px solid #276D8F;
}

.title_ico{
	display: inline-block;
	font-size: 18px;
	vertical-align:middle;
	padding: 0px 0px 0px 5px;
}

.margin_add{
	margin-top: .2rem;
	margin-left:.1rem !important;
}

/* jsGridExtend */ 
.jsgridExtend{
	table-layout: fixed !important;
}
.jsgrid-pager{
	text-align: center !important;
}

.jsgrid-header-cell{
    font-family: 'notokr';	
	font-size: 0.7rem;
    color:#666;
}

.jsgrid-cell{
    padding:0 5px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
	font-size: 0.65rem;
    font-family: 'notokr';
    color:#666;
}

.jsgrid-pager-page{
	font-size: 0.7rem;
	color: #3A84A8;
}

.jsgrid-row{
	height: 1.3rem;
}
.jsgrid-alt-row {
	height: 1.3rem;
}

/* Form 2col */
.form_wrap .lgCol .th {    
    flex-shrink: 0;
    font-weight: 500;
    line-height: 1.45;
    max-width: 150px;
    padding: .5em .3em;
}
.form_wrap .lgCol .td {
    color: #666;
    padding: .3em 1.2em;
    width: calc(100% - 150px);
}

/*  preloader */
@-webkit-keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }
@keyframes line-scale {
  0% {
    -webkit-transform: scaley(1);
            transform: scaley(1); }
  50% {
    -webkit-transform: scaley(0.4);
            transform: scaley(0.4); }
  100% {
    -webkit-transform: scaley(1);
            transform: scaley(1); } }

.line-scale > div:nth-child(1) {
  -webkit-animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.4s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(2) {
  -webkit-animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.3s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(3) {
  -webkit-animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.2s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(4) {
  -webkit-animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s -0.1s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div:nth-child(5) {
  -webkit-animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: line-scale 1s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.line-scale > div {
  background-color: #3A84A8;
  width: 4px;
  height: 35px;
  border-radius: 2px;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }
  
.loader{ position:absolute; width:100px; height:100px; left:54%; top:50%; margin-left:-50px; margin-top:-50px; z-index: 31; }
.loaderDark{ position:absolute; left:0; top:0;width:100%; height:100%;z-index:30;background-color:#f7f7f7;opacity:0.1; }

.tabsConts{ padding-bottom: 50px; }
.tabsContsItem {display:inline;float:left;}


#fileAttach, #fileAttachDet {
    height:90px;
    overflow-y: auto;
}
#fileAttach.h_more {
    height:130px;
}
/* modal popup */

#modal-window .modal-box.modal-type-info .modal-title {
    background-color: #276D8F;
}

#modal-window .modal-box .modal-title {
    background-color: #276D8F;
}

#modal-window .modal-box.modal-type-error .modal-title {
    background-color: #FD7C1B;
}

#modal-window .modal-box .modal-inner .modal-title h3 {
	color:#FFF;
}


/* floating button */
.btn-floating {
	position:fixed;
	bottom:60px;
	right:40px;
    color: #fff;
    padding: 0;
    width: 55.5px; height: 55.5px;
    outline: 0;
    border: none;
    text-decoration: none;
    background: #1c2a35;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    opacity: 0.8;
    cursor: pointer;
}
.btn-floating:hover {
    background: #3c4b57;
}
.btn-floating div {
    font-size: 1.8em;
    padding: 0;
    margin: .22em 0 0 0;
}

/* bootstrap text align style */
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.cursor{
	cursor: pointer;
}

.filebox input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip:rect(0,0,0,0);
	border: 0;
} 

.filebox label {
	display: inline-block;
	padding: .5em .75em;
	color: #fdfdfd;
	font-size: inherit;
	line-height: normal;
	vertical-align: middle;
	background-color: #276D8F;
	cursor: pointer;
	border: 1px solid #ebebeb;
	border-bottom-color: #e2e2e2;
	border-radius: .25em;
}

.filebox .upload-name {
	width : 177px;
	display: inline-block;
	padding: .5em .75em;
	font-size: inherit;
	font-family: inherit;
	line-height: normal;
	vertical-align: middle;
	background-color: #f5f5f5;
	border: 1px solid #ebebeb;
	border-bottom-color: #e2e2e2;
	border-radius: .25em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.btnfilebox{
	border-radius : .25em;
	padding : .5em .75em;
}

.img_fileIcon{
	background-image: url('/html/img/img_file.png');
	background-size: 100%;
	height: 32px;
	width: 32px;
	display: block;
	position: relative;
}

.etc_fileIcon{
	background-image: url('/html/img/etc_file.png');
	background-size: 100%;
	height: 32px;
	width: 32px;
	display: block;
	position: relative;
}

.excel_fileIcon{
	background-image: url('/html/img/excel_file.png');
	background-size: 100%;
	height: 32px;
	width: 32px;
	display: block;
	position: relative;
}

.pdf_fileIcon{
	background-image: url('/html/img/pdf_file.png');
	background-size: 100%;
	height: 32px;
	width: 32px;
	display: block;
	position: relative;
}

.ppt_fileIcon{
	background-image: url('/html/img/ppt_file.png');
	background-size: 100%;
	height: 32px;
	width: 32px;
	display: block;
	position: relative;
}

.word_fileIcon{
	background-image: url('/html/img/word_file.png');
	background-size: 100%;
	height: 32px;
	width: 32px;
	display: block;
	position: relative;
}

/*aj*/
.unit_input{
	width: calc(100% - 22px) !important;
    margin-right: 5px;
}

.disp_inline{
	 display: inline-block;
}

.h0{
	font-size: 1.3rem;
}

.grid_fix_info {
	width:100%;
	background-image: linear-gradient(45deg, #DD2C2C, #FFC000);
	color:#fff;
	padding:0.7rem;
	margin-bottom:0.5rem;
	
}

.notice_cn_html {
	overflow:auto;
	height:380px;
	border:1px solid lightgray;
	padding-left:5px;
	padding-top: 5px;
}

.chk_all { 
	font-size: 0.7rem;
    font-family: 'notokr';
    color: #666;
    margin: 0.3rem 0.8rem;
}



.popup_notice {
    background-color: #ebebf2;
    border: 2px solid #fff;
	
}
.popup_msg {
	position:relative;
    background-image: url("../img/pop_bg.png");
    background-position: bottom;
    background-repeat: no-repeat;
    
    padding: 2rem;
    text-align:center;
    padding-bottom:8.5rem;
}
.popup_msg .title {
	color: #1743af;
	font-size: 1.6rem;
	font-weight: 900;
	margin-bottom: 1rem;
}
.popup_msg .title .red-text {
	color: #e95f5f;
}

.popup_msg .desc {
	font-size:0.8rem;
	border-radius: 0.5rem;
	background-color:#1743af;
	color:#fff;
	padding:0.5rem;
	line-height:1.5;
	margin-bottom:0.5rem;
	
}
.popup_msg .small{
	color:#47474a;
	font-size:0.8rem;
}
.popup_btns {
	padding:0.2rem;
	text-align:center;
}
.popup_btns button {
	padding:0.3rem;
	font-size:0.6rem;
}
.banner_notice {
	width:100%;
	display:block;
	background-color: #ebebf2;
    border: 2px solid #fff;
    background-image: url("../img/banner_bg.png");
    background-position: right;
    background-repeat: no-repeat;
    text-align:left;
    margin-top:0.5rem;
    position:relative;
}
.banner_notice .click-area, .popup_msg .click-area {
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:2;
	cursor:pointer;
}
.banner_msg {
	width:100%;
	display:block;
    padding: 0.5rem;
    text-align:center;
}
.banner_msg .title {
	width:75%;
	color: #1743af;
	font-size: 1rem;
	font-weight: 700;
	margin-bottom:0.5rem;
}
.banner_msg .title .red-text {
	color: #e95f5f;
}

.banner_msg .desc {
	width:75%;
	font-size:0.6rem;
	border-radius: 0.5rem;
	background-color:#1743af;
	color:#fff;
	padding:0.5rem;
	line-height:1.5;
	margin-bottom:0.5rem;
	
}
.banner_msg .small{
	width:100%;
	color:#47474a;
	font-size:0.6rem;
}