#wrap {position: relative; width: 100%; overflow: hidden;}
#contents {}
.container {padding-left: 20px; padding-right: 20px; position: relative;}
.container:after {content: ''; display: table; clear: both;}
#header {position: fixed; top: 0; left: 0; right: 0; height: 60px; background: #333; z-index: 999;}
.header__title {float: left; width: 200px;}
.header__title:after {content: ''; display: table; clear: both;}
.header__title a {display: block; float: left; height: 60px; line-height: 54px; color: #fff; font-size: 34px;}
.header__title a:before {content: ''; display: block; float: left; width: 34px; height: 60px; margin-right: 8px; background: url('../img/header_logo.png')no-repeat center center / 100% auto;}
.header__title a:after {content: ''; display: table; clear: both;}
.header__menu {float: left;}
.header__menu:after {content: ''; display: table; clear: both;}
.header__menu li {float: left;}
.header__menu li a {display: block; height: 60px; line-height: 60px; color: #fff; font-size: 16px; padding: 0 20px;}
.header__menu li a.active {background: #1ebf62; color: #fff;}
.header__logout {display: block; float: right; height: 60px; line-height: 60px; color: #fff; padding: 0 20px; background: url('../img/logout.png')no-repeat left center / 14px auto;}


#contents {padding-top: 90px; padding-bottom: 60px;}
#contents.left {padding-left: 220px;}
.left_menu {position: fixed; width: 220px; left: 0; top: 60px; bottom: 0; background: #f1f1f1; border-right: 1px solid #ddd;}
.left_menu__list li {border-bottom: 1px solid #ccc;}
.left_menu__list li a {display: block; height: 60px; line-height: 60px; padding: 0 20px; font-size: 14px; font-weight: 500; color: #888; position: relative;}
.left_menu__list li.active a {background: #fff; font-weight: 700; color: #000;}
.left_menu__list li.active a:after {content: ''; display: block; width: 7px; height: 12px; position: absolute; right: 15px; top: 50%; margin-top: -2px; background: url('../img/left_arrow.png')no-repeat center center; background-size: cover;}
.page__top {padding-bottom: 20px; padding-top: 30px;}
.page__top:after {content: ''; display: table; clear: both;}
.page__top--title {float: left; font-size: 26px; font-weight: 700; letter-spacing: -0.075em;}
.page__top--right {float: right;}
.page__top--right:after {content: ''; display: table; clear: both;}
.page__top--search {float: left; position: relative;}
.page__top--search input[type="text"] {display: block; float: left; width: 260px; background: url('../img/search.png')no-repeat right 10px center / auto 18px;}
.page__top--search input[type="submit"],
.page__top--search button,
.page__top--search a {display: block; width: 55px; height: 40px; line-height: 40px; text-align: center; color: #fff; background: #333; position: absolute; right: 0; top: 0;}
.page__top--add {display: block; float: left; margin-left: 10px; height: 40px; line-height: 40px; padding: 0 15px; background: #333; color: #fff;}
.page__top--remove {display: block; float: left; margin-left: 10px; height: 40px; line-height: 40px; padding: 0 15px; background: rgb(255, 63, 63); color: #fff;}



.table {table-layout: fixed;}
.table tr:hover {background: #f8f8f8;}
.table th,
.table td {text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
.table th {padding: 10px;background: #f5f5f5;}
.table td {padding: 15px;}
.table td.table_title {text-decoration: underline; font-weight: 700;}
.table_select {min-width: 160px;}
.tal {text-align: left !important;}



#paging {text-align: center; padding: 30px 0;}
#paging a {display: block; width: 40px; height: 40px; line-height: 38px; border: 1px solid #ccc;}
#paging > a {display: inline-block; vertical-align: middle; text-indent: -9999px; margin: 0 1px;}
#paging > a.paging__first {background: url('../img/paging_first.png')no-repeat center center;}
#paging > a.paging__prev {background: url('../img/paging_prev.png')no-repeat center center;}
#paging > a.paging__next {background: url('../img/paging_next.png')no-repeat center center;}
#paging > a.paging__last {background: url('../img/paging_last.png')no-repeat center center;}
.paging__list {display: inline-block; vertical-align: middle; margin: 0 10px;}
.paging__list:after {content: ''; display: table; clear: both;}
.paging__list li {float: left; margin: 0 2px;}
.paging__list li a {}
.paging__list li a.active {color: #fff; border-color: #333; background: #333;}


.sub_title {margin-top: 30px; padding-bottom: 10px; font-size: 24px;}
.tab {margin-bottom: 15px; margin-top: 20px;}
.tab:after {content: ''; display: table; clear: both;}
.tab li {float: left;}
.tab li a {display: block; border: 1px solid #000; border-right: none; height: 40px; line-height: 38px; text-align: center; padding: 0 20px;}
.tab li:last-child a {border-right: 1px solid #000;}
.tab li a.active {background: #333; border-color: #333; color: #fff;}

.modify_btn {display: inline-block; border: 1px solid #333; padding: 3px 10px; margin: 0 2px; font-size: 12px;}
.modify_btn:hover {background: #333; color: #fff;}

.mt30 {margin-top: 30px;}
.mt60 {margin-top: 60px;}
.ip_add {padding: 20px; border: 1px solid #ccc; background: #f5f5f5; text-align: center;}
.ip_add__input {display: inline-block; vertical-align: middle;}
.ip_add__input:after {content: ''; display: table; clear: both;}
.ip_add__input li {float: left; margin-right: 10px;}
.ip_add__input li:nth-child(5) {text-align: center; line-height: 40px;}
.ip_add__input li:last-child {margin-right: 0;}
.ip_add__input li input[type="text"] {width: 100px;}
.ip_add__title {display: inline-block; vertical-align: middle; margin-right: 10px; font-weight: 500; font-size: 16px;}
.ip_add__btn {display: inline-block; vertical-align: middle; margin-left: 10px; height: 40px; line-height: 40px; padding: 0 15px; background: #333; color: #fff;}
.ip_add__desc {margin-top: 10px; font-size: 14px;}
.ip_add__desc li {position: relative; padding-left: 8px; margin-bottom: 5px;}
.ip_add__desc li:last-child {margin-bottom: 0;}
.ip_add__desc li:before {content: ''; display: block; width: 2px; height: 2px; background: #333; position: absolute; left: 0; top: 9px;}

.ip_modify {margin-top: 10px;}
.ip_modify:after {content: ''; display: table; clear: both;}
.ip_modify__btn {float: left;}
.ip_modify__btn:after {content: ''; display: table; clear: both;}
.ip_modify__btn li {margin-right: 10px; float: left;}
.ip_modify__btn li:last-child {margin-right: 0;}
.ip_modify__btn li a {display: block; border: 1px solid #333; height: 40px; line-height: 38px; padding: 0 15px; font-weight: 500;}
.ip_modify__btn li a.bk {background: #333; border-color: #333; color: #fff;}
.ip_modify__btn li a.grn {background: #1ebf62; border-color: #1ebf62; color: #fff;}

.btn_grn {display: inline-block; vertical-align: middle; margin-left: 10px; height: 40px; line-height: 40px; text-align: center; color: #fff; background: #1ebf62; padding: 0 15px;}
.react-datepicker-wrapper {width: auto !important; background: url('../img/datepicker.png')no-repeat right 10px center / auto 20px;}
.react-datepicker-wrapper input {background: none;}



/* 로그인 */
.login {
    background: #000 url('../img/login_bg.jpg')no-repeat center center / cover;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: calc(10px + 2vmin);
    color: white;
  }

.login__title {text-align: center; line-height: 1.3; letter-spacing: -0.075em;}
.login__title img {display: block; margin: 0 auto; width: 340px;}
.login__title h3 {font-size: 54px; margin-top: 20px;}
.login__title p {font-weight: 300; font-size: 44px;}
.login__submit {
    display: block; width: 240px; height: 54px; line-height: 54px; text-align: center;
    background: #08e8c7; color: #fff; font-size: 20px; font-weight: 500; margin: 40px auto 0;
    border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px;
    background: -moz-linear-gradient(left,  #08e8c7 0%, #2b99dc 100%); background: -webkit-linear-gradient(left,  #08e8c7 0%,#2b99dc 100%); background: linear-gradient(to right,  #08e8c7 0%,#2b99dc 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08e8c7', endColorstr='#2b99dc',GradientType=1 );
}


.dashboard {min-height: 100vh; background: #f5f5f5; margin-top: -90px; margin-bottom: -60px; padding-top: 60px; padding-bottom: 30px;}

.dash-row {margin: 30px 0;}
.dash-row:after {content: ''; display: table; clear: both;}
.dash-col {float: left; padding: 0 15px;}
.dash-col.chart1 {width: 39%;}
.dash-col.chart2 {width: 22%;}
.dash-col.w100 {width: 100%;}
.dash-box {background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.03);}

.dash-top {margin-bottom: 30px;}
.dash-top:after {content: ''; display: table; clear: both;}
.dash-title {float: left; font-size: 24px; letter-spacing: -0.075em;}

.dash-table {}
.dash-table th,
.dash-table td {border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px;}
.dash-table th {background: #f5f5f5;}
.dash-table td {}
.dash-table td.tac {text-align: center;}
.dash-table__link {display: inline-block; max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline;}