@charset "utf-8";

* {box-sizing: border-box;line-height:1em;}
body {font-family:'Noto Sans Korean',sans-serif;font-size: 14px;color: #111;word-break: keep-all;counter-reset:section;letter-spacing:-.05em;overflow-x:hidden;}
a, a:hover {text-decoration:none !important;}
button {font-family: 'Noto Sans Korean',sans-serif;border:none;cursor:pointer;}
input,textarea,select {font-family:'Noto Sans Korean',sans-serif;font-weight:400;border:none;}
input::placeholder,textarea::placeholder {color:#888;}


/* padding, margin */
.mr-0 {margin-right:0 !important;}
.mr-4 {margin-right:4px !important;}
.mr-8 {margin-right:8px !important;}
.mr-16 {margin-right:16px !important;}
.mr-24 {margin-right:24px !important;}
.mr-32 {margin-right:32px !important;}
.mr-40 {margin-right:40px !important;}
.mr-80 {margin-right:80px !important;}

.mb-0 {margin-bottom:0 !important;}
.mb-4 {margin-bottom:4px !important;}
.mb-8 {margin-bottom:8px !important;}
.mb-16 {margin-bottom:16px !important;}
.mb-24 {margin-bottom:24px !important;}
.mb-32 {margin-bottom:32px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-80 {margin-bottom:80px !important;}

.ml-0 {margin-left:0 !important;}
.ml-4 {margin-left:4px !important;}
.ml-8 {margin-left:8px !important;}
.ml-16 {margin-left:16px !important;}
.ml-24 {margin-left:24px !important;}
.ml-32 {margin-left:32px !important;}
.ml-40 {margin-left:40px !important;}
.ml-80 {margin-left:80px !important;}

.mt-0 {margin-top:0 !important;}
.mt-4 {margin-top:4px !important;}
.mt-8 {margin-top:8px !important;}
.mt-16 {margin-top:16px !important;}
.mt-24 {margin-top:24px !important;}
.mt-32 {margin-top:32px !important;}
.mt-40 {margin-top:40px !important;}
.mt-80 {margin-top:80px !important;}

.pt-0 {padding-top:0 !important;}
.pt-4  {padding-top:4px !important;}
.pt-8 {padding-top:8px !important;}
.pt-16 {padding-top:16px !important;}
.pt-24 {padding-top:24px !important;}
.pt-32 {padding-top:32px !important;}
.pt-40 {padding-top:40px !important;}

.pb-0 {padding-bottom:0 !important;}
.pb-4  {padding-bottom:4px !important;}
.pb-8 {padding-bottom:8px !important;}
.pb-16 {padding-bottom:16px !important;}
.pb-24 {padding-bottom:24px !important;}
.pb-32 {padding-bottom:32px !important;}
.pb-40 {padding-bottom:40px !important;}

.pl-0 {padding-left:0 !important;}
.pl-4  {padding-left:4px !important;}
.pl-8 {padding-left:8px !important;}
.pl-16 {padding-left:16px !important;}
.pl-24 {padding-left:24px !important;}
.pl-32 {padding-left:32px !important;}
.pl-40 {padding-left:40px !important;}

.pr-0 {padding-right:0 !important;}
.pr-4  {padding-right:4px !important;}
.pr-8 {padding-right:8px !important;}
.pr-16 {padding-right:16px !important;}
.pr-24 {padding-right:24px !important;}
.pr-32 {padding-right:32px !important;}
.pr-40 {padding-right:40px !important;}

.px-0 {padding-left:0 !important;padding-right:0 !important;}
.py-0 {padding-top:0 !important;padding-bottom:0 !important;}
.mx-0 {margin-left:0 !important;margin-right:0 !important;}
.my-0 {margin-top:0 !important;margin-bottom:0 !important;}

.px-4 {padding-left:4px !important;padding-right:4px !important;}
.py-4 {padding-top:4px !important;padding-bottom:4px !important;}
.px-8 {padding-left:8px !important;padding-right:8px !important;}
.py-8 {padding-top:8px !important;padding-bottom:8px !important;}
.px-16 {padding-left:16px !important;padding-right:16px !important;}
.py-16 {padding-top:16px !important;padding-bottom:16px !important;}
.px-40 {padding-left:40px !important;padding-right:40px !important;}
.py-40 {padding-top:40px !important;padding-bottom:40px !important;}

.mx-4  {margin-left:4px !important;margin-right:4px !important;}
.my-4  {margin-top:4px !important;margin-bottom:4px !important;}
.mx-8  {margin-left:8px !important;margin-right:8px !important;}
.my-8  {margin-top:8px !important;margin-bottom:8px !important;}
.mx-16 {margin-left:16px !important;margin-right:16px !important;}
.my-16 {margin-top:16px !important;margin-bottom:16px !important;}

/* grid */
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-55 {padding-left:8px;padding-right:8px;}
.col-1  {flex: 0 0 auto;width: 8.3333333333%;}
.col-2  {flex: 0 0 auto;width: 16.6666666667%;}
.col-3  {flex: 0 0 auto;width: 25%;}
.col-4  {flex: 0 0 auto;width: 33.3333333333%;}
.col-5  {flex: 0 0 auto;width: 41.6666666667%;}
.col-6  {flex: 0 0 auto;width: 50%;}
.col-7  {flex: 0 0 auto;width: 58.3333333333%;}
.col-8  {flex: 0 0 auto;width: 66.6666666667%;}
.col-9  {flex: 0 0 auto;width: 75%;}
.col-10 {flex: 0 0 auto;width: 83.3333333333%;}
.col-11 {flex: 0 0 auto;width: 91.6666666667%;}
.col-12 {flex: 0 0 auto;width: 100%;}
.col-55 {flex: 0 0 auto;width: 20%;}


/* layout */
.d-flex {display:flex;}
.align-center {align-items:center;}
.align-end {align-items:flex-end;}
.justify-between {justify-content:space-between;}
.justify-center {justify-content:center;}
.justify-end {justify-content:flex-end;}
.wAuto {width:auto;}

/* text-align */
.text-left {text-align:left !important;}
.text-center {text-align:center !important;}
.text-right {text-align:right !important;}

/* BTN */
.btn-wrap {display:flex;justify-content:flex-end;}
.btn-wrap .btn {margin-left:4px;margin-right:0;}
.btn-wrap.btn-center {justify-content:center;}
.btn {flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:100px;height:32px;padding:0 24px;border:1px solid transparent;
    color:#fff;font-size:14px;font-weight:500;margin:0 4px;}

.btn-primary {background:#0075FF;}
.btn-primary:hover {background: #0056bd;}
.btn-secondary {background:#03a9f4;}
.btn-secondary:hover {background: #0087c5;}
.btn-white {background:rgba(255,255,255,.3);}
.btn-white:hover {background:rgba(255,255,255,.2);}

/* TABLE */
.table-vertical {width:100%;border-collapse: collapse;table-layout: fixed;border-top:2px solid rgba(255,255,255,.3);font-weight:300;}
.table-vertical th, .table-vertical td {padding:8px;text-align:center;vertical-align: middle;}
.table-vertical th {background:rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);}
.table-vertical td {border-bottom:1px dashed rgba(255,255,255,.2);}
table .btn-square {width:24px;min-width:0;height:24px;font-size:16px;padding:0 0 2px 0;border-bottom:2px solid rgba(255,255,255,.1);}
/* FLOATING-BOX TABLE */
.floating-box table {border-top:2px solid #888;}
.floating-box table th {background:#f0f0f0;}
.floating-box table td {border-bottom:1px solid #ccc;}


/* scroll-wrap */
.scroll-wrap {overflow-y:auto;}
.scroll-wrap::-webkit-scrollbar {width:8px;height:8px;}
.scroll-wrap::-webkit-scrollbar-track {background:#00152E;border-radius:8px;}
.scroll-wrap::-webkit-scrollbar-thumb {background:rgba(255,255,255,.2);border-radius:8px;}


/* state color */
.good span {background: #0080dc;}
.safe span {background: #00b247;}
.warning span {background:#ffa600;}
.danger span {background:#d93006;}

/* form */
.form-control {display:flex;align-items:center;width:100%;min-height:32px;font-family:'Noto Sans Korean', sans-serif;font-size:14px;line-height:1.2em;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.3);padding:0 8px;}