@charset "utf-8";

:root {
    --color-base: #f6f7f9;
    --color-white: #fff;
    --color-white-transparent: rgba(255, 255, 255, 0.9);
    --color-black: #000;
    --color-lightblack: #555;
    --color-darkblack: #051e34;
    --color-gray: #ccc;
    --color-lightgray: #efefef;
    --color-blue: #328dad;
    --color-light-blue: rgb(200, 230, 240);
    --color-red: #db7f7f;
    --color-light-red: rgb(245, 200, 200);
    --color-purple: #8c6a9e;
    --color-yellow: #ecd899;
    --color-light-yellow: rgb(245, 235, 200);
    --color-green: #429546;
    --color-light-green: #79b840;
    --color-orange: #e7653c;
    --color-navy: #1b3a57;
    --height-form: 4rem;
    --height-header: 60px;
    --font-size-base: 1.4rem;
    --font-size-small: 1.2rem;
    --font-size-middle: 1.6rem;
    --font-size-large: 1.8rem;
    --font-size-title: 2.4rem;
}

html {
    background: var(--color-base);
}
body {
    color: var(--color-navy);
    font-size: var(--font-size-base);
}
.inner {
    padding: 0 2rem;
}
.d_block {
    display: block;
}
.d_flex {
    display: flex;
}
.d_none {
    display: none;
}
.mt_1 {
    margin-top: 1rem;
}
.me_1 {
    margin-right: 1rem;
}
.ms_1 {
    margin-left: 1rem;
}
.mt_auto {
    margin-top: auto;
}
.ms_auto {
    margin-left: auto;
}
.me_auto {
    margin-right: auto;
}
.px_half {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.small {
    font-size: var(--font-size-small);
    margin-right: 0.5rem;
}
.large {
    font-size: var(--font-size-large);
    margin-right: 0.5rem;
}
/*  table
-------------------- */
.table_base {
    padding: 0 2rem 1rem;
}
.table_base table {
    display: block;
    width: 100%;
    color: var(--color-black);
    border-collapse: separate;
    overflow-x: auto;
}
.table_base table tbody {
    background: var(--color-white);
}
.table_base table thead tr th,
.table_base table tbody tr td {
    padding: 1rem;
    position: relative;
    white-space: nowrap;
    width: 1000px;
}
.table_base table thead tr th {
    background: var(--color-lightgray);
    color: var(--color-navy);
}
.table_base table thead tr th {
    border-top: 1px solid var(--color-gray);
}
.table_base table tr th:first-child,
.table_base table tr td:first-child {
    border-left: 1px solid var(--color-gray);
}
.table_base table tr th:last-child,
.table_base table tr td:last-child {
    border-right: 1px solid var(--color-gray);
}
.table_base table th::before,
.table_base table th::after,
.table_base table td::before,
.table_base table td::after {
    content: "";
    position: absolute;
    background: var(--color-gray);
}
.table_base table th::before,
.table_base table td::before {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
}
.table_base table th:not(:last-child)::after,
.table_base table td:not(:last-child)::after {
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
}
.link {
    text-decoration: underline;
    color: var(--color-blue);
}
.table_left {
    text-align: left;
}
.table_right {
    text-align: right;
}
.table_center {
    text-align: center;
}
/*  icon setting
-------------------- */
.angle_down::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
}

/*  color setting
-------------------- */
.bg_blue {
    background: var(--color-blue) !important;
}
.bg_white {
    background: var(--color-white) !important;
    color: var(--color-blue) !important;
    border: 1px solid var(--color-blue) !important;
}
.bg_black {
    background: var(--color-black) !important;
}
.bg_gray {
    background: var(--color-gray) !important;
}
.bg_green {
    background: var(--color-green) !important;
}
.bg_red {
    background: var(--color-red) !important;
    color: var(--color-white) !important;
}
.bg_yellow {
    background: var(--color-yellow) !important;
}
.bg_orange {
    background: var(--color-orange) !important;
}
.red {
    color: #dc3545 !important;
}
.blue {
    color: #0d6efd !important;
}
.gray {
    color: var(--color-gray) !important;
}
.orange {
    color: var(--color-orange) !important;
}

/*  form setting
-------------------- */
h2 {
    font-size: var(--font-size-large);
    font-weight: bold;
}
p {
    font-size: var(--font-size-base);
}
label {
    display: block;
    font-size: var(--font-size-base);
}
label span {
    font-size: var(--font-size-small);
}
label.feedback {
    color: var(--color-red) !important;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="month"] {
    width: 100%;
    height: var(--height-form);
    line-height: var(--height-form);
    padding: 0 1rem;
    border: 1px solid var(--color-gray);
    border-radius: 5px;
    background: var(--color-white-transparent);
    color: var(--color-black);
}
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
}
input:disabled {
    background: var(--color-gray);
}
input:focus {
    border: 1px solid var(--color-blue);
}
input.form_error {
    border: 1px solid var(--color-red);
}
textarea {
    resize: vertical;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--color-gray);
    border-radius: 5px;
    background: var(--color-white-transparent);
    color: var(--color-black);
}
.select {
    position: relative;
}
.select::after {
    position: absolute;
    top: 14px;
    right: 8px;
    color: var(--color-gray);
    pointer-events: none;
}
.select select {
    width: 100%;
    height: var(--height-form);
    padding-left: 1rem;
    border: 1px solid var(--color-gray);
    border-radius: 5px;
    cursor: pointer;
    background: var(--color-white-transparent);
}
.select select:focus {
    border: 1px solid var(--color-blue);
}
.select select.form_error {
    border: 1px solid var(--color-red);
}
.select.scroll {
    overflow-y: auto;
    max-height: 500px;
}
.form_content p {
    color: var(--color-navy);
    font-weight: bold;
}
.form_content > ul > li {
    margin: 1rem 0;
}
.form_half input,
.form_half .select {
    width: 49%;
}
.checkradio {
    display: flex;
    height: var(--height-form);
}
.checkradio label {
    margin: auto auto auto 10px;
}
.checkradio input {
    margin-right: 10px;
    cursor: pointer;
}
.req::after {
    content: "";
    margin-left: 0.5rem;
    padding: 0px 5px;
    background: var(--color-red);
    border-radius: 5px;
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: bold;
    position: absolute;
    top: 0;
}

/*  button setting
-------------------- */
button.btn,
a.btn {
    display: block;
    width: 100%;
    padding: 8px;
    background: var(--color-lightblack);
    border-radius: 5px;
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-white);
    font-weight: bold;
}
button:hover,
.btn:hover {
    opacity: 0.7;
}
.btn.btn_middle {
    width: 180px;
    margin: 0 auto;
}
.btn.btn_small {
    padding: 4px 10px;
    margin: 0 0.5rem;
    font-size: var(--font-size-small);
}
.btn i {
    margin: 0 0.5rem;
}

/*  pagination setting
-------------------- */
.pagination {
    display: flex;
    padding: 20px 20px 30px;
}
.pagination ul {
    display: flex;
    margin-left: auto;
}
.pagination ul li {
    margin-right: 2rem;
}
.pagination ul li.now {
    font-weight: bold;
}
.pagination ul li i:nth-child(2) {
    margin-left: -5px;
}

/*  side setting
-------------------- */
#side {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;
    height: 100vh;
    background: var(--color-darkblack);
    color: var(--color-white);
    line-height: 1;
}
#side .side_title {
    display: flex;
    height: var(--height-header);
    font-size: var(--font-size-large);
    font-weight: bold;
}
#side .side_title label {
    margin: auto;
    padding: 0 1rem;
    font-size: var(--font-size-title);
    font-weight: bold;
}
#side .side_title a {
    color: var(--color-blue);
    margin: auto 2rem auto auto;
}
#side .side_user {
    display: flex;
    height: var(--height-header);
    border-top: 2px solid var(--color-lightblack);
}
#side .side_user label {
    margin: auto;
    padding: 0 1rem;
    font-size: var(--font-size-large);
    font-weight: bold;
}
#side .side_user a {
    margin: auto 1rem;
    font-size: var(--font-size-large);
    color: var(--color-blue);
}
#side dl {
    height: calc(100vh - 2 * var(--height-header));
    overflow-y: auto;
}
#side dl::-webkit-scrollbar {
    width: 8px;
}
#side dl::-webkit-scrollbar-thumb {
    background-color: var(--color-gray);
    border-radius: 3px;
}
#side dl dt i {
    margin-right: 1rem;
}
#side dl dt {
    display: block;
    font-size: var(--font-size-large);
    color: var(--color-blue);
    border-top: 1px solid var(--color-lightblack);
}
#side dl dt:not(:nth-child(-n + 2)):not(:nth-last-child(1)) {
    padding: 1.6rem;
}
#side dl dt:nth-child(-n + 2) a {
    display: block;
    padding: 1.4rem 0 1.4rem 4rem;
}
#side dl dt:nth-last-child(1) a {
    display: block;
    padding: 1.4rem 0 1.4rem 4rem;
}
#side dl dd a {
    display: block;
    padding: 1.4rem 0 1.4rem 4rem;
    border-top: 1px solid var(--color-lightblack);
}
#side dl dt.active a,
#side dl dt a:hover,
#side dl dd.active a,
#side dl dd a:hover {
    background: var(--color-blue);
    opacity: 1 !important;
    color: var(--color-white);
}
#side_menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 2rem;
    padding: 15px 45px;
    color: var(--color-navy);
}

body.maximaize #content {
    width: 100%;
    margin-left: 0;
}
body.maximaize #content .content_title h1 {
    margin-left: 10rem;
}
body.maximaize #underbar {
    width: 100%;
    margin-left: 0;
}
body.maximaize #side_menu {
    display: block;
}
body.maximaize #side {
    display: none;
}

/*  content setting
-------------------- */
#content {
    width: calc(100% - 250px);
    margin-left: 250px;
}
#content .content_title {
    height: var(--height-header);
    border-bottom: 1px solid var(--color-gray);
    margin: 0 2rem;
}
#content .content_title h1 {
    font-size: 2.6rem;
    font-weight: bold;
    text-align: left;
    line-height: var(--height-header);
    color: var(--color-navy);
    margin-left: 2rem;
}
#content .tab_wrap ul {
    display: flex;
    border-bottom: 1px solid var(--color-gray);
    margin-top: 1rem;
}
#content .tab_wrap ul li {
    padding: 1rem;
    margin-right: 2rem;
}
#content .tab_wrap ul li.active {
    color: var(--color-blue);
    border-bottom: 3px solid var(--color-blue);
}
#content .tab_wrap ul li a {
    font-weight: bold;
}
#content .search_wrap .form_content {
    border-bottom: solid 1px var(--color-gray);
}
#content .search_wrap .form_content > ul {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem;
}
#content .search_wrap .form_content > ul > li {
    width: 49%;
}
#content .search_wrap .form_content > ul > li:nth-child(2n) {
    margin: 0.25rem 0 0.25rem 1%;
}
#content .search_wrap .form_content > ul > li:nth-child(2n + 1) {
    margin: 0.25rem 1% 0.25rem 0;
}
#content .search_wrap .form_content > ul > li .range {
    display: flex;
}
#content .search_wrap .form_content > ul > li .range input[type="date"] {
    width: 45%;
}
#content .search_wrap .form_content > ul > li .range label {
    margin: auto;
}
#content .search_wrap .form_content button,
#content .search_wrap .form_content a {
    margin: 0 auto 1rem;
}
#content .btn_list {
    display: flex;
    float: right;
    margin: 10px auto;
}
#content .btn_list .btn {
    margin: 0 0.5rem;
}
#content .btn_list .btn i {
    margin-left: 0;
}
#content.no_scroll {
    display: flex;
    flex-direction: column;
    height: 100vh !important;
}
#content.no_scroll .table_base {
    flex: 1;
    overflow: auto;
}

/*  underbar setting
-------------------- */
#underbar {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    width: calc(100% - 250px);
    height: 90px;
    margin-left: 250px;
    padding: 0 20px;
    background: var(--color-white);
    color: var(--color-black);
    border-top: 1px solid var(--color-darkblack);
}

/** toast */
#toast {
    display: flex;
    visibility: hidden;
    width: 50%;
    border-radius: 3px;
    z-index: 9999;
    position: absolute;
    top: 10px;
    left: 25%;
}
#toast > p {
    margin: 0.8rem 1.4rem;
    color: var(--color-white);
}

.toast {
    top: 55px !important;
}

/** tooltip */
.tooltip {
    overflow: hidden;
    text-overflow: ellipsis;
}
.description {
    display: none;
    position: absolute;
    z-index: 2;
}
.description .description_content {
    margin-left: 0.75rem;
    padding: 1rem;
    background: var(--color-darkblack);
    color: var(--color-white);
    border-radius: 5px;
}
.description .description_content .description_none {
    display: none;
}
.description p {
    white-space: nowrap;
    overflow: visible;
    color: var(--color-white);
    line-height: 1.6em;
    min-width: 60px;
}
.description p.pre_wrap {
    white-space: pre-wrap;
}

/** modaal */
.js_modal {
    display: none;
}
.delete_modal {
    display: none;
}
.modaal-container {
    background: var(--color-base);
    border-radius: 5px;
}
.modaal-content-container {
    padding: 10px 20px 20px;
}
.modaal-noscroll.can_scroll {
    padding-right: 17px;
}

.modaal-close {
    position: absolute;
    top: 0px;
    right: 0px;
}
.modaal-close:after,
.modaal-close:before {
    background: var(--color-gray);
}
.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: var(--color-blue);
}

.modal_wrapper .modal_title {
    color: var(--color-navy);
    font-size: var(--font-size-large);
    font-weight: bold;
    text-align: center;
    margin: 10px auto;
}
.modal_wrapper .modal_text {
    margin: 10px auto 20px;
}
.modal_wrapper .modal_notice {
    font-size: var(--font-size-large);
    font-weight: bold;
    margin: 3rem 2rem;
}
.modal_wrapper .modal_text_center {
    text-align: center;
}
.modal_wrapper .modal_notice ul {
    list-style: disc;
    list-style-position: inside;
}
.modal_wrapper .modal_notice ul li {
    word-break: break-all;
}
.modal_wrapper button[type="submit"] {
    margin: 2rem auto 0;
}
.modal_wrapper table {
    width: 100%;
    margin-bottom: 1rem;
}
.modal_wrapper table tbody tr td {
    padding: 0.5rem;
}
.modal_wrapper table tbody tr td:first-child {
    text-align: center;
}
.modal_wrapper label {
    position: relative;
}
/* select2 */
.js_select2_multiple {
    display: none;
}
.select2-container .select2-selection--single.form_error {
    border: 1px solid var(--color-red) !important;
}

/*  mobile & smart phone
---------------------------------------------- */
@media only screen and (max-width: 959px) {
}