@charset "UTF-8";
@import url("pretendard-subset.css");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i,
center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, .nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, .nav, section, summary {
  display: block;
}

:lang(ko) {
  font-family: "Pretendard", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  word-break: keep-all;
  overflow: auto;
  height: 100%;
  min-height: 100%;
  color: #343434;
  font-family: "Pretendard", sans-serif;
}

body {
  font-size: 1rem;
  font-weight: normal;
  line-height: 1.3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #F7F9FB;
}

ul, ol, li {
  list-style: none;
}

input, textarea, select, button {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.3;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
textarea {
  border: solid 1px #DBE1E7;
  padding: 10px;
  border-radius: 4px;
  font-size:15px;
}
legend, caption {
  visibility: hidden;
  position: absolute;
  font-size: 0;
  width: 0;
  height: 0;
  line-height: 0;
  margin: 0;
  padding: 0;
  background: none;
}

a[href^=tel] {
  font-style: normal;
}

address, caption, em, var {
  font-style: normal;
  font-weight: normal;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
}

img {
  vertical-align: top;
}

a {
  vertical-align: middle;
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:active, a:focus {
  color: #3C5665;
  text-decoration: none;
}

ins {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  text-decoration: none;
  font-weight: normal;
  font-style: normal;
}

label, dt, th {
  font-weight: normal;
}

button {
  border: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  text-shadow: none;
  background: none;
  cursor: pointer;
}

button:active span, button:focus span {
  position: relative;
}

button:disabled {
  opacity: 0.2 !important;
  cursor: unset;
}

button:hover:disabled {
  opacity: inherit;
}

strong {
  font-weight: bold;
}

/* Forms */
select {
  min-width: 70px;
}

input[type=text],
input[type=number],
input[type=email],
input[type=date],
input[type=text],
input[type=search],
input[type=tel],
input[type=time],
input[type=password] {
  color: #343434;
  padding: 5px 10px;
  border: solid 1px #DBE1E7;
  border-radius: 4px;
  box-shadow: none;
  -webkit-appearance: none;
  /*background: rgba(0, 0, 0, 0.1);*/
  height:36px;
  font-size:14px;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=date]:focus,
input[type=text]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=time]:focus,
textarea:focus {
  font-weight: 400;
  border: 1px solid #C61623;
  outline: none;
}

input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=email]:disabled,
input[type=date]:disabled,
input[type=text]:disabled,
input[type=search]:disabled,
input[type=tel]:disabled,
input[type=time]:disabled,
textarea:disabled {
  opacity: 0.6;
}

input::-ms-input-placeholder {
  color: #908F96;
}

input::-webkit-input-placeholder {
  color: #908F96;
}

input::-moz-placeholder {
  color: #908F96;
}

input:read-only, textarea:read-only {
  opacity: 0.7;
  border: 1px solid #ccc;
  background: #fafafa;
}

input:read-only:focus {
  background: transparent;
  border: 1px solid #353A58;
}

/** scss 컬러값 **/
input[type=radio] {
  display: none;
}

input[type=radio] + label {
  min-width: 22px;
  height: 22px;
  background: url(../images/input_radio.svg) no-repeat left center;
  cursor: pointer;
  display: flex;
}

input[type=radio]:checked + label {
  background: url(../images/input_radioed.svg) no-repeat left center;
  display: flex;
  color: #C61623;
  font-weight: 600;
}

input[type=radio] + label span {
  padding: 0 0 0 27px;
  width: auto;
  display: flex;
  line-height: 1.6;

}

input[type=radio] + label span:hover {
  opacity: 1;
}

input[type=checkbox] {
  display: none;
}

input[type=checkbox] + label {
  min-width: 22px;
  height: 22px;
  background: url(../images/input_unchecked.svg) no-repeat left center;
  cursor: pointer;
  display: flex;
}

input[type=checkbox]:checked + label {
  background: url(../images/input_checked.svg) no-repeat left center;
  display: flex;
}

input[type=checkbox] + label span {
  padding: 0 0 0 28px;
  width: auto;
  display: flex;
  align-items: center;
  opacity: 1;
}

input[type=checkbox] + label span:hover {
  opacity: 1;
}
input[type=checkbox]:checked + label span{
  opacity: 1;
  color:#C61623;

}
.input_clearable {
  position: relative;
  /*padding-right: 27px;*/
  border: 3px solid #e4e8f0;
  border-radius: 4px;
  background: #ffffff;
  height:36px;
}

.input_clearable input[type=text] {
  border: none;
  height: 34px;
  text-align: left;
  display: flex;
}

.input_clearable input[type=text]::placeholder {
  color: #777777;
}

.input_clearable .btn_del {
  position: absolute;
  top: 26%;
  right: 7px;
  width: 18px;
  height: 18px;
  display: inline-block;
  overflow: hidden;
  text-indent: -100px;
  background: url("../images/btn_close.svg") no-repeat;
  background-size: 100%;
  cursor: pointer;
}

.input_date{ padding-right:27px !important; background: url("../images/ico_calendar.svg") no-repeat #ffffff calc(100% - 6px) 5px;}

body {
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3em;
}

#app {
  height: calc(100vh - 51px);
  margin: -40px;
}

/* 흐름 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.center {
  text-align: center;
}
.align_left{text-align:left !important;}

select {
  padding: 0 35px 0 10px;
  /* 여백으로 높이 설정 */
  color: #343434;
  height: 32px;
  background: url("../images/ico_arrow_down.svg") no-repeat calc(100% - 5px) center transparent;
  /* 네이티브 화살표를 커스텀 화살표로 대체 */
  border: 1px solid #DBE1E7;
  border-radius: 4px;
  /* iOS 둥근모서리 제거 */
  -webkit-appearance: none;
  /* 네이티브 외형 감추기 */
  -moz-appearance: none;
  appearance: none;
  outline-style: none;
}

select::-ms-expand {
  /* for IE 11 */
  display: none;
}

select option {
  background: #21202D;
  border: 1px solid #353A58;
  color: #EBEEFF;
}

select option:hover {
  background: #000000;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

.chk_multi + label {
  min-width: 16px;
  height: 30px !important;
  background: url(../images/input_checked.svg) no-repeat 0 center;
  cursor: pointer;
  display: inline-block;
}

.chk_multi:checked + label {
  min-width: 16px;
  height: 30px !important;
  cursor: pointer;
  display: inline-block;
}

.chk_multi + label span {
  padding: 0 0 0 25px !important;
  width: auto;
  display: inline-block;
}

#header {
  position:fixed;
  width: 100%;
  height: 50px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.04);
  background-color: #ffffff;
  z-index: 100;
}

#header h1 {
  padding: 15px 0 0 20px;
  width: 200px;
  height: 50px;
  background: #C61623;
  border-radius: 0;
  /*border-bottom:1px solid #eee;*/
  position: relative;
}

.btn_fold i{position:absolute ; top:0; right:0; display:block; width:50px; height:50px; background: url("../images/ico_menu_fold.svg") no-repeat center center;}

#header .logo {
  width: 124px;
  height: 42px;
  background: url(../images/logo_w.svg) no-repeat;
  background-size: 100%;
  text-indent: -1000px;
  overflow: hidden;
  display: block;
}
#header{display: flex; z-index: 102; height:50px; border-bottom:1px solid #5D5D5D;}
#header .gnb{width:calc(100% - 420px);}
#header .gnb ul{display:flex; width:100%; max-width:900px;}
#header .gnb ul > li{width:20%}
#header .gnb ul > li > a{width:100%; height:50px; display: flex; align-items: center; justify-content: center; color:#5D5D5D; font-size:16px;}
#header .gnb ul > li > ul{ width:100%; background:#fff; z-index: 102; display: flex; flex-wrap: wrap ;}

#header .gnb ul > li:hover > a{color:#393534; font-weight: 500; opacity: 1;   border-bottom:2px solid #C61623}

#header .gnb ul > li > ul > li > ul > li > a{border-bottom: unset !important;}
/*#header .gnb ul > li:hover > ul{opacity: 1; display: flex; flex-wrap: wrap; }*/
#header .gnb ul > li:hover > ul > li > a{}
#header .gnb ul > li > ul > li > a{justify-content: flex-start;padding-left:50px}
/*#header .gnb ul > li > ul > li {width:100%;}*/
#header .gnb ul > li > ul > li > ul{display: flex; flex-direction: column; justify-content: flex-start;}
#header .gnb ul > li > ul > li > ul > li{width:100%; }
#header .gnb .active > a{border-bottom:2px solid #C61623; color:#393534; font-weight: 600;}

#header .gnb ul > li > ul > li > a{width:100%; height:28px; overflow:hidden; border-bottom: 0}
#header .gnb ul > li > ul > li > a:hover{text-decoration: underline; color:#c61623; border-bottom: unset}
#header .gnb ul > li > ul > .depth2{width:100%; justify-content: flex-start;}
#header .gnb ul > li > ul > .depth2 > a{ height:32px; border-bottom:unset; font-weight: unset; font-size:0.875rem;}
#header .gnb ul > li > ul > .depth2 > a:hover{color:#C61623;}

#header .gnb .depth2.active > a > li.active > a,
#header .gnb .depth2.active > a{border-bottom: unset !important;}

#header .gnb .submenu{padding-top:10px; display: none;}
#header .gnb .submenu.active{display: block;}
#header .gnb ul > li > ul > li:hover {color:red;}



#header .gnb i{display: block; width:20px; height:20px;}
#header .gnb .gnb_icon1,
#header .gnb .gnb_icon2,
#header .gnb .gnb_icon3,
#header .gnb .gnb_icon4,
#header .gnb .gnb_icon5{margin-right:5px; width:22px; height:22px; display: block;}

#header .gnb .gnb_icon1 {background: url("../images/nav_1.svg") no-repeat; background-size: 100%}
#header .gnb .gnb_icon2 {background: url("../images/nav_2.svg") no-repeat; background-size: 100%}
#header .gnb .gnb_icon3 {background: url("../images/nav_3.svg") no-repeat; background-size: 100%}
#header .gnb .gnb_icon4 {background: url("../images/nav_4.svg") no-repeat; background-size: 100%}
#header .gnb .gnb_icon5 {background: url("../images/nav_5.svg") no-repeat; background-size: 100%}

#header .user_menu {
  position: absolute;
  top: 0;
  right: 2%;
}

#header .user_menu .mymenu {
  float: right;
  padding-right: 30px;
  height: 50px;
  color: #343434;
  font-size: 13px;
  font-weight: 400;
  display: flex;
  align-items: center;
  cursor:pointer;
  background: url("../images/ico_arrow_down.svg") no-repeat right center;
}
#header .user_menu .mymenu:before{
  content: '';
  margin-right:10px;
  width:34px;
  height:34px;
  background: url('../images/icon_user.svg') no-repeat;
}

#header .user_menu:hover .mymenu_conts {
  display: block;
}

#header .user_menu .mymenu_conts {
  display: none;
  position: absolute;
  top: 50px;
  right: 0;
  width: 160px;
  max-height: 160px;
  border: 1px solid #e4e4e5;
  border-radius: 4px;
  background-color: #ffffff;
  /*box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);*/
  z-index: 1;
}
#header .mymenu_conts a{display: flex; width:100%; padding:10px 15px; border-bottom:1px solid #eee;}
#header .mymenu_conts a:hover{background: rgba(0, 0, 0, .03)}

#header.folded h1{width:60px; overflow:hidden; padding:15px 0 0 12px}
#header.folded .logo{background: url("../images/logo_w_symbol.svg") no-repeat;}
#header.folded .gnb{ margin-left:50px; width:calc(100% - 340px);}

#header .btn_fold{position: absolute; top:0; left:150px; width:50px; height:50px; background: url("../images/ico_menu.svg") no-repeat center center; overflow:hidden; text-indent: -1000px;}
#header .btn_fold.close{position: absolute; top:0; left:60px; width:50px; height:50px; background: url("../images/ico_menu_fold.svg") no-repeat center center; overflow:hidden; text-indent: -1000px;}

#wrapper {
  min-height: 100%;
  position: relative;
  padding-bottom: 50px;
}

.nav {
  position: fixed;
  top: 50px;
  left: 0;
  width: 200px;
  height: calc(100% - 50px);
  padding-top: 0;
  background: #393534;
  box-shadow: 0 4px 4px 0 rgba(43, 45, 55, 0.01);
  z-index: 100;
  overflow-y:auto;
}

.nav h4 {
  padding: 0;
  color:#fff;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}
.nav li.active a h4{color:#fff; opacity: 1;}
.nav li {
  width: 100%;
  display: block;
  overflow: hidden;
}

.nav > ul > li{border-bottom:1px solid #eeeeee11;}

/*.nav li:last-child {  border-bottom:1px solid #eee;}*/
.nav li a {
  float: left;
  margin: 0 auto;
  padding: 10px 0 10px 10px;
  width: 100%;
  color: #ffffff;
  display: block;
  text-align: left;
  font-size: 14px;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0.7;
}

.nav li a:hover{opacity:1; background: rgba(0, 0, 0, 0.1)}


.nav li.active a {
  color: #ffffff;
  font-weight: 400;
  opacity: 0.6;
  font-size:0.8rem;
}
.nav li.active > a {
  color: #ffffff;
  font-weight: 400;
  opacity: 1;
  font-size:0.8rem;
}

.nav li.active > ul > li:hover a{opacity: 1;}
.nav li.active > ul > li.active a{ color:#fff; opacity: 1;}
.nav li.active > ul > li.active > ul > li a{}
.nav li.active > ul > li.active > ul > li.active a{opacity:1; font-weight: 600; background: rgba(0, 0, 0, .15); }
.nav li.active > ul > li.active a:before{  border-left: 2px solid #fff;}

.nav li.active > ul {
  height: 100%;
  /*padding-bottom: 20px;*/
  transition: all 0.5s ease-out;
  background: rgba(0, 0, 0, .4);
}

.nav li > ul {
  height: 0;
}

.nav li > ul > li, .nav li > ul > li.active {
  background: transparent !important;
}

.nav li > ul > li a:before {
  content: "";
  border-left: 2px solid #eeeeee22;
  margin-left: 22px;
  padding: 7px 0 7px 15px;
}

.nav li > ul > li a {
  padding: 7px 0;
  width: 100%;
  height: 100%;
  /*font-size: 16px;*/
  font-weight: 400;
  opacity: 0.5;
}

/*.nav li > ul > li.active a{}*/
.nav li > ul > li a:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.2) !important;
  font-weight: 600;
}
.nav li.active > ul > li > ul > li a{padding:7px 0;}
.nav li.active > ul > li > ul > li a:before {padding: 10px 0 10px 30px;}
.nav .info_text{padding:10px; border-bottom:1px solid #eeeeee11; overflow: hidden;}
.nav .info_text span{color:#fff; margin-bottom: 5px; display: block;}
.nav .info_text p{color:#fff; font-size: 12px; opacity: 0.8}

.nav.folded{
  width:60px;
  transition: all .4s;
  z-index: 101;
  overflow: unset;
}
.nav.folded li a{padding: 5px 0 5px 16px}
.nav.folded h4{cursor:pointer}
.nav.folded h4 span{display: none;}
/*.nav.folded li:hover > ul > li > ul{display: none;}*/
.nav.folded > ul > li > ul{display: none;}
.nav.folded ul > li.depth1{position: relative; overflow: unset; height:46px;}
.nav.folded ul > li.depth1 > a{padding: 12px 0 12px 16px}
.nav.folded ul > li:hover{background: #C61623; transition: all .4s;}
.nav.folded ul > li:hover > ul{display:block; position: absolute; top:0; left:60px; width:200px; height:auto; padding:10px 0; background: #393534; transition: all .4s; }
.nav.folded ul > li:hover ul > li:hover > ul{top:0; left:200px; display: block;}
.nav.folded .info_text{display: none;}
.nav.folded li:hover > ul{display: block}
.nav.folded > ul > li:hover > ul{display:block !important; position: absolute; top:0; left:60px; width:200px; height:auto; padding:10px 0; background: #393534; transition: all .4s; }
.nav.folded > ul > li:hover > ul{display: block !important;}

.nav i{display: block; width:20px; height:20px;}
.nav .nav_icon1,
.nav .nav_icon2,
.nav .nav_icon3,
.nav .nav_icon4,
.nav .nav_icon5{margin-right:5px; width:22px; height:22px; display: block;}

.nav .nav_icon1 {background: url("../images/nav_1_w.svg") no-repeat; background-size: 100%}
.nav .nav_icon2 {background: url("../images/nav_2_w.svg") no-repeat; background-size: 100%}
.nav .nav_icon3 {background: url("../images/nav_3_w.svg") no-repeat; background-size: 100%}
.nav .nav_icon4 {background: url("../images/nav_4_w.svg") no-repeat; background-size: 100%}
.nav .nav_icon5 {background: url("../images/nav_5_w.svg") no-repeat; background-size: 100%}


#contents.folded .tab_area{width:calc(100% - 60px);}

.tab_area{position:fixed; padding:0 45px; width:calc(100% - 200px); height:45px; background:#5D5D5D; display: flex; z-index: 100;align-items: flex-end;}
.tab_area .btn_prev{ position:absolute; top:0; left:0; width:45px; height:45px; background: url("../images/ico_tab_prev.svg") no-repeat center; overflow: hidden; text-indent: -1000px;}
.tab_area .btn_prev:disabled{opacity: 0.7}
.tab_area .btn_next{ position:absolute; top:0; right:0; width:45px; height:45px; background: url("../images/ico_tab_next.svg") no-repeat center; overflow: hidden; text-indent: -1000px;}
.tab_area ul{display: flex; align-items: end; overflow-x:auto;}
.tab_area .tab_list { max-width:2500px; }
.tab_list li{ position: relative;  margin-right: 5px; width:130px; height:35px; background: #8E8E8E;border-radius: 6px 6px 0 0; display:inline-block;}
.tab_list li{display: flex; height:35px; position: relative; margin-right:5px;}
.tab_list a{ display:block; padding: 0 35px 0 15px; width:130px; line-height: 35px; align-items: center; color:#ffffff; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.tab_area ul li.active {background: #fff; color:#393534}
.tab_area ul li.active a{color:#393534;}
.tab_area ul li.active .btn_close{position: absolute; top:0; right:0; width:34px; height:34px; background: url("../images/ico_close_g.svg") no-repeat center; overflow: hidden; text-indent: -100px;}
.tab_area ul li .btn_close{position: absolute; top:0; right:0; width:34px; height:34px; background: url("../images/ico_close_w.svg") no-repeat center; overflow: hidden; text-indent: -100px;}
.tab_area .scroll_wrap{width:100%; display: flex; align-items: end; overflow-x:auto;}

.slick-next{right:0;}
.slick-track{align-items: end; overflow-x:auto;}


.tab_area ul::-webkit-scrollbar {
  width: 3px;
  height:2px;
}

.tab_area ul::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
}

.tab_area ul::-webkit-scrollbar-track {
  background-color: transparent;
}

.error_txt {
  position: relative;
  clear: both;
  margin: 10px 0;
  padding: 3px 0 0 25px;
  font-size: 0.8rem;
  color: #E5484F;
  display: block;
}

.error_txt:before {
  position: absolute;
  top: 4px;
  left: 0;
  content: "!";
  width: 16px;
  height: 16px;
  border: 1px solid #eb4e3d;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.good_txt {
  clear: both;
  padding: 5px 0 0 26px;
  font-size: 12px;
  color: #4265ED;
}

.ico_help {
  clear: both;
  padding: 5px 23px 0 0;
  font-size: 12px;
  cursor: pointer;
}

.point {
  color: #E5484F;
}

.required {
  font-weight: 500;
  color: #eb4e3d;
  margin-left: 5px;
}

#contents {
  margin-left: 200px;
  padding: 50px 0 0 0;
  height: 100%;
  position: relative;
}
#contents.folded{margin-left:60px;}

#contents .wrapper {
  width:100%;
  /*min-width: 1440px;*/
  height: calc(100vh - 50px);
  padding: 65px 20px 20px 20px;
  margin: 0 auto;
  display: flex;
}

#contents h1 {
  position: relative;
  width: 100%;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color:#343434;
}

#contents h1 .sub_txt {
  font-size: 12px;
  opacity: 0.35;
  font-weight: normal;
}

#contents .btn_area_top {
  position: absolute;
  top: 0;
  right: 0;
}

#contents .bt_dropdown {
  padding: 0 40px 0 19px;
  height: 36px;
  border-radius: 4px;
  line-height: 30px;
  color: #3e83a4;
  font-size: 13px;
  border: 1px solid #3e83a4;
}

#contents h1 .btn_area {
  position: absolute;
  right: 0;
  top: 0;
}

#contents h1 .btn_area button {
  margin-right: 5px;
}

#contents .quick_menu{
  position:fixed;
  flex-direction: column;
  display: flex;
  top: 95px;
  right:0;
  width:60px;
  height:100vh;
  background: #fff;
  border-left:1px solid #eee;
  align-items: center;

}
#contents .quick_menu h3{ margin-top:10px; text-align: center; color:#74818F; font-size:12px;}
#contents .quick_menu li{padding:10px 0; }
#contents .quick_menu a{display: flex; align-items: center; text-align: center; flex-direction: column;}
#contents .quick_menu i{width:30px; height:30px; background: url("../images/ico_download.svg") no-repeat center; display: flex;}

.contents_wrap{
  width:calc(100% - 60px);
  /*display: none;*/
}
.contents_wrap.active{display: block;}

.row2{
  height:calc(50% - 80px);
  margin-bottom:20px;
}
.row2:last-child{
  margin-bottom:0;
}
.col{height:100%;display: flex; justify-content: space-between}
.col2{
  width:49%;
  margin-bottom:20px;
}

h3{font-size:1rem; margin-bottom: 10px; font-weight: 600;}

.form_group {
  min-width: 500px;
}

.form_group dl {
  display: flex;
  margin-top: 20px;
}

.form_group dl:first-child {
  margin-top: 0;
}

.form_group dt {
  width: 15%;
  padding-top: 12px;
  font-size: 0.8rem;
  opacity: 0.8;
}

.form_group dd {
  width: 85%;
  display: flex;
}

.form_group dd input[type=text] {
  width: 100%;
}

.form_group dd > li {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  line-height: 40px;
}

.form_group dd > li:last-child {
  margin-bottom: 0;
}

.form_group dd > li .title {
  width: 70px;
}

.form_group dd > li .detail {
  position: relative;
  width: calc(100% - 70px);
}

.form_group dd > li .btn_del {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  background: url("../images/ico_del.svg") no-repeat;
  overflow: hidden;
  text-indent: -1000px;
  opacity: 0.7;
}

.form_group dd > li .btn_del:hover {
  opacity: 1;
}

.form_group .mx-datepicker {
  width: 100% !important;
  position: relative;
}

.form_group .mx-datepicker .mx-icon-calendar {
  display: inline-block;
  top: 47%;
  left: 10px;
  right: unset;
}

.form_group .mx-datepicker input[type=text] {
  padding-left: 35px;
  height: auto !important;
}

.action_area {
  position: relative;
  width: 100%;
  display: none;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  font-size: 12px;
  border-radius: 4px 4px 0 0;
  border: 1px solid #e5e4e4;
  background: #ebeff3;
}

.action_area.show {
  display: flex;
}

.action_area .modify {
  border: 1px solid #a8aaab;
  color: #a8aaab;
}

.action_area .delete {
  border: 1px solid #eb4e3d;
  color: #eb4e3d;
}

.tabs {
  padding: 0;
  width: 100%;
  margin: 0 auto;
  width:100%;
  line-height: 46px;
  overflow-y: auto;
}
.modal .tabs{   padding: 0 20px 40px 20px; height:300px;}
.tabs .table th,
.tabs .table td{line-height: 1.4;}
.tabs .insert_form dt{width:130px; height:36px; line-height: 36px;}
.tabs .insert_form dl{display: flex; align-items: flex-start;}


/* 탭 스타일 */
.tab_item {
  height: 46px;
  background:none;
  line-height: 46px;
  font-size: 14px;
  text-align: center;
  color: #353D49;
  display: block;
  float: left;
  text-align: center;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/* 라디오 버튼 UI삭제*/
input[name="tab_item"] {
  display: none;
  background: none;
}
input[type=radio] + label.tab_item  {
  min-width: 22px;
  padding:0 20px;
  height:46px;
  background: none;
  cursor: pointer;
  display: flex;

}

/* 탭 컨텐츠 스타일 */
.tab_content {
  display: none;
  padding: 10px 0 0 0;
  clear: both;
  overflow: hidden;
  border-top:1px solid #eee;
  margin-top:-1px;
}


/* 선택 된 탭 콘텐츠를 표시 */
#tab_service:checked ~ #service_content,
#tab_operating:checked ~ #operating_content,
#tab_color:checked ~ #color_content
{
  display: flex;
}
#tab_mypage:checked ~ #mypage_contents,
#tab_pw:checked ~ #pw_contents,
#tab_al_write:checked ~ #al_write_contents,
#tab_al_modify:checked ~ #al_modify_contents,
#tab_al_del:checked ~ #al_del_contents,
#tab_arp:checked ~ #arp_contents,
#tab_vrf:checked ~ #vrf_contents
{display: block;}


#al_write_contents .insert_form input[type=text],
#al_write_contents .insert_form input:read-only
{width:100%;}

#color_content .table,
#service_content .table,
#operating_content .table{width:100%;}
#color_content dt,
#service_content dt,
#operating_content dt{width:80px}

#color_content dd,
#service_content dd,
#operating_content dd{width:calc(100% - 80px)}

.tab_content .insert_form dl:first-child{padding-top:0;}
.tab_content .insert_form dl{padding:9px 0; border-bottom:1px solid #eee;}
.tab_content .insert_form dd{display: flex; flex-direction: column}
.tab_content .insert_form p{line-height: 1; padding:5px 0}
.tab_content .insert_form p:first-child{padding-top:0;}
.tab_content .insert_form p:last-child{padding-bottom:0;}
.tab_content .btn_area{margin-top:10px; display: flex; justify-content: flex-end;}
.tab_content .btn_area button{margin-left:5px;}
.tab_content input[type=text]{width:100%}
.tab_content input[type=checkbox] label{margin-top:10px;}
.tab_content input[type=checkbox] label{margin-top:10px;}
.tab_content input[type=checkbox] + label,
.tab_content input[type=checkbox] + label span{ display: inline-flex; line-height: 1; height:22px;}

/* 선택된 탭 스타일 */
.tabs input:checked + .tab_item {
  padding:0 20px;
  color: #C61623;
  font-weight:bold;
  height:46px;
  line-height: 46px;
  border-bottom:2px solid #C61623;
  background: #fff;
}

.btn_select_file {
  position: absolute;
  margin-left: -40px;
  left: 50%;
  bottom: 120px;
}
.b-modal{left:200px !important; top:95px !important;}

.login_area{background: url("../images/login_bg.jpg"); background-size: cover}

.login_area {
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login_area .wrapper {
  width:410px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding:60px;
}

.login_img{
  width:55%;
  height:360px;
  background: #fff url("../images/login_bg.jpg") no-repeat 85% center;
}
.login_form {
  width: 45%;
  max-width: 330px;
  margin-top:-60px;
  padding-left:30px;
}
.login_area .logo{ margin-bottom: 30px; width:200px; height:80px; display:flex; background-size:100%}
.logo {
  /*margin-bottom: 40px;*/
  /*width: 100%;*/
  height: 60px;
  display: block;
  background: url("../images/logo.svg") no-repeat;
  overflow: hidden;
  text-indent: -1000px;
}

.login_area .input_id, .login_area .input_pw {
  width: 100%;
  height:50px;
  border:0;
  border-radius: 0;
  border-bottom: 2px solid #86939F !important;
  background: #ffffff !important;
  color: #333333 !important;
}

.input_id:focus, .input_pw:focus {
  font-weight: 600;
  border:0;
  border-bottom: 2px solid #C61623 !important;
  color: #C61623 !important;
}

.login_area li {
  margin-bottom: 20px;
}

.login_area label {
  clear: both;
  display: block;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #666;
}

.btn_login {
  margin-top:50px;
  width: 100%;
  height: 50px;
  border-radius: 4px;
  background: #C61623;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:1rem;
}

.btn_login:hover {
  background: #393534;
  color:#fff;
}

/*툴팁추가*/
.tooltip, .tooltip:hover {
  position: relative;
  overflow: visible;
}

.tooltip:hover .tooltip_text {
  display: inline-block;
}

.tooltip_text {
  display: none;
}

.tooltip_text {
  position: absolute;
  bottom: 30px;
  left: 0;
  margin: 0;
  white-space: nowrap;
  padding: 5px 10px;
  color: #eee;
  font-size: 12px;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13);
  background-color: #778FEA;
  z-index: 9999;
  text-indent: 0;
}

.ui-tooltip {
  position: absolute;
  top: 0;
  left: 5px;
  margin: 0;
  padding: 5px 10px;
  color: #eee;
  font-size: 12px;
  border-radius: 2px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13);
  background-color: #778FEA;
  z-index: 9999;
}

.ui-tooltip {
  /* tooltip container box */
  white-space: pre-line;
}

.ui-tooltip-content {
  /* tooltip content */
  white-space: pre-line;
}

/*** datetimepicker ***/
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-clock-o:before {
  content: "";
}

.fa-chevron-left:before {
  content: "";
}

.fa-chevron-right:before {
  content: "";
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*.dashboard section{display: flex; justify-content: space-between; margin:0 -0.5rem}*/
.dashboard .card{width:100%; border-radius: 0.5rem; background: #fff;}
/** **/
.card{margin:0 0 1rem 0; width:100%; border-radius: 0.5rem; background: #fff;}
.card .card_head{padding:0.7rem 1rem; border-bottom: 1px solid #eee;}
.card h2.card_head{font-weight: 600;}
.card .card_body{padding:0.7rem 1rem;}
.card .chart_area{width:100%; height:250px;}

/** 라이브러리 **/
.highlight {
  font-weight: 500;
  color: #E5484F;
}

/* 테이블 */
.table_top{display: flex; justify-content: space-between; margin-bottom:10px; align-items: center;}
.table_top .button_area{display: flex;}
.table_top .button_area button{margin-left:10px;}
.table_top .btn_down{ padding-left:35px; background: url("../images/ico_download.svg") no-repeat 15px center;}
.table_top .btn_register{padding-left:35px; background: url("../images/ico_write.svg") no-repeat 15px center #393534;}
.table_top .btn_register:hover{background: url("../images/ico_write.svg") no-repeat 15px center #C61623;}
.table_top .total b{font-weight: 600;}

.table {
  border-radius: 0 0 4px 4px;
  border-top: none;
  overflow: hidden;
  position: relative;
  padding:0;
  background: #fff;
}

.table table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  table-layout: fixed;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
}

.table thead th {
  padding: 8px 6px;
  font-size: 0.875rem;
  border: 1px solid #EFEFEF;
  vertical-align: middle;
  font-weight: 400;
  text-align: center;
  color: #666;
  background: #fafafa;
  border-collapse: collapse;
}

.table tbody td {
  padding: 6px 6px;
  font-size: 0.875rem;
  border: 1px solid #EFEFEF;
  vertical-align: middle;
  text-align: center;
  color: #343434;
  border-collapse: collapse;
  position: relative;
}

.table tr.bg{background: #fafafa;}
.table tr:hover{background: #fafafa; cursor: pointer;}

.table .stop {
  color: #ff6565;
}

.table .status_active{background: #C61623; color:#fff;}
.table .status_error{background: #eb4e3d; color:#fff;}

.table.small {
  border-top: 1px solid #e5e4e4;
  border-radius: 4px 4px 0 0;
}

.table.small th {
  padding: 7px 6px;
  font-size: 12px;
}

.table.small {
  height: 349px;
  overflow-y: auto;
  display: inline-block;
}

.table.small td {
  text-align: center;
}

.table.small .fixed {
  position: sticky;
  top: 0;
  height: 36px;
  border-bottom: 1px solid #e2e2e3;
}

.table .selected {
  background: rgba(62, 131, 164, 0.15);
}

.table.selected td {
  background: rgba(62, 131, 164, 0.15);
}

/*.table input[type=checkbox] + label {*/
/*  background-position: center center;*/
/*}*/

.table input[type="text"]{width:90%}

.table button {
  margin-right: 9px;
}

.table button:last-child {
  margin-right: 0;
}

.table.scroll {
  width: 100%;
  height: calc(100vh - 400px);
  overflow-y: auto;
}

.table.scroll .fixed,
.table.scroll_haspaging .fixed,
.table.scroll_hasTab .fixed {
  position: sticky;
  top: 0;
  height: 36px;
  font-size: 12px;
  border-top: 1px solid #353A58;
  border-bottom: 2px solid #353A58;
  background: #21202D;
  z-index: 6;
}

.table.scroll_hasTab {
  height: calc(100vh - 390px);
}

.table.scroll_haspaging {
  width: 100%;
  height: calc(100vh - 356px);
  overflow-y: auto;
}

.table.tb_insert td {
  height: 51px;
}

.table .ellipsis {
  display: block;
  width: 90%;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table .item_na{padding:5px 10px; border:1px solid #eaeaea; background: #fafafa; border-radius: .2rem}
.table .item_num{padding:5px 10px; border:1px solid #00CB9A; background: #E7FFFB; border-radius: .5rem}


#switch {
  position: absolute;
  /* hidden */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

}

.switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 58px;
  height: 26px !important;
  background: #fff !important;
  border: 1px solid #9d9d9d;
  border-radius: 20px;
  transition: 0.2s;
  margin: 0 auto;
}
.switch_label:hover {
  background: #efefef;
}
.onf_btn {
  position: absolute;
  top: 2px;
  left: 3px;
  display: inline-block;
  padding:0 !important;
  width: 20px !important;
  height: 20px;
  border-radius: 20px;
  background: #9d9d9d;
  transition: 0.2s;
}

/* checking style */
.switch:checked+.switch_label {
  background: #C61623 !important;
  border: 1px solid #C61623;
  height:26px !important;
}

.switch:checked+.switch_label:hover {
  background: #C61623;
}

/* move */
.switch:checked+.switch_label .onf_btn {
  left: 33px;
  background: #ffffff;
  box-shadow: 1px 2px 3px #00000020;
}

.search_area{display:flex; align-items: center; margin-bottom: 15px; flex-direction: column; border:1px solid #ededef; border-radius: 6px; background: #fff; overflow: hidden; flex-shrink: 0;}
.search_area .search_header{ padding:0 15px; width:100%; display: flex; justify-content: space-between; align-items: center; background: #f7f7f7; }
.search_area .search_header .btn_area button{width:24px; height:24px; display:inline-flex; overflow: hidden; text-indent: -1000px;}
.search_area .search_header h3{font-size:14px; color:#393534;}

.search_area .btn_fold,
.search_area .btn_fold.close,
.search_area .btn_fix,
.search_area .btn_fix.fixed
{}
.search_area .btn_fold.close{ background: url("../images/ico_unfold.svg") no-repeat; background-size: 100%}
.search_area .btn_fold{ background: url("../images/ico_fold.svg") no-repeat; background-size: 100%}
.search_area .btn_fix{background: url("../images/ico_pin.svg") no-repeat center center; background-size: 80%}
.search_area .btn_fix.fixed{background: url("../images/ico_fixed.svg") no-repeat center center; background-size: 100%;}

.search_body.folded{display: none; height:0; transition: 0.3s all;}
.search_body{display: flex; justify-content: space-between; padding-top:10px; width:100%; position: relative; flex-direction: column; height: 55px;}
.search_body ul{display: flex; width:calc(100% - 100px); padding:10px 15px; border-bottom:1px solid #ededef;}
.search_body:first-child ul{}
.search_body:last-child ul{padding-top: 0; border-bottom:none;}
.search_body .btn_search{position: absolute; bottom:10px; right:15px; font-size:14px; }
.search_body .btn_reset_search{position: absolute; bottom:10px; right:15px; font-size:14px; }
.search_body li{margin-right:20px;}
.search_body label{margin-right:5px;}

.tabs .search_area{margin-bottom:0;}
.search_area.flex_end{display:flex; justify-content: flex-end;}
.search_area .input_date{margin:0 .2rem; width:150px}

.search_area select,
.search_area button{margin-right:5px; font-size:14px;}
.search_area button:last-child{margin-right:0;}

.btn_search {
  margin-left:3px;
  padding-left:25px;
  width:80px;
  height:33px;
  color:#fff;
  background: url("../images/ico_search.svg") #393534 no-repeat 14px center;
  overflow: hidden;
  border-radius: 4px;
}

.btn_reset_search {
  margin-left:3px;
  padding-left:25px;
  width:80px;
  height:33px;
  color:#fff;
  background: url("../images/ico_search.svg") #393534 no-repeat 14px center;
  overflow: hidden;
  border-radius: 4px;
}

.search_area .btn_search:hover{
  background: url("../images/ico_search.svg") #C61623 no-repeat 14px center;

}


.search_detail {
  padding: 24px 40px 10px 40px;
  background: #26293C;
}

.search_detail dl {
  width: 32.5%;
  padding-left: 20px;
  display: inline-block;
  margin-bottom: 15px;
}

.search_detail dt {
  margin-bottom: 5px;
  font-size: 0.9em;
}

.search_detail dd input {
  width: 100%;
}

.search_detail dd select {
  width: 100%;
}

.search_detail dd input::placeholder {
  color: #9d9d9d;
}

.tab_menu {
  width: 100%;
  border-bottom: 1px solid #30344F;
  margin-bottom: 20px;
}

.tab_menu button {
  padding: 10px 20px;
  font-size: 1.2em;
  color: #EBEEFF;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  opacity: 0.7;
}

.tab_menu button:hover {
  opacity: 1;
  border-bottom: 1px solid #EBEEFF;
}

.tab_menu button.active {
  color: #C61623;
  border-bottom: 1px solid #C61623;
  opacity: 1;
}

.btn{
  color: #ffffff;
  background: #393534;
  opacity: 1;
  height:33px;
  line-height: 33px;
  padding:0 13px;
  border-radius: 4px;
  font-size:0.875rem;
  display: flex;
  font-weight: normal;
}
.btn:hover{ color:#fff; background: #C61623;}

.btn_copy, .btn_delete, .btn_setting {
  padding: 5px 10px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  overflow: hidden;
  text-indent: -100px;
}

.btn_edit, .btn_delete, .btn_lock, .btn_key, .btn_reset, .btn_setting
{
  width:36px; height:36px; overflow: hidden; text-indent: -100px;
  background-position:center center; border:1px solid #DBE1E7; border-radius: 4px;
  background-repeat: no-repeat;
}

.btn_edit { width:36px; height:36px; background: url("../images/ico_modify.svg") no-repeat center center; border:1px solid #DBE1E7; border-radius: 4px;}

.btn_delete {
  background: url("../images/ico_trash.svg") no-repeat center center;
  background-size: 60%;
}
.btn_lock {
  background: url("../images/ico_lock.svg") no-repeat center center;
}
.btn_key { background: url("../images/ico_key.svg") no-repeat center center;}
.btn_reset { background: url("../images/ico_reset.svg") no-repeat center center;}
.btn_setting{background: url("../images/ico_setting.svg") no-repeat center center;}

.btn_lock:hover, .btn_key:hover, .btn_reset:hover, .btn_setting:hover,
.btn_copy:hover, .btn_edit:hover, .btn_delete:hover {
  border:1px solid #C61623;
}

.btn_area{padding:10px 0; display: flex; justify-content:space-between}
.btn_area_bottom{position:absolute; margin-top:20px; z-index: 2}

.graph_area {
  margin: 20px 0;
}

.chart_header {
  position: relative;
  border-bottom: 1px solid #353A58;
  height: 80px;
}

.chart_header .date_wrap {
  display: block;
}

.mx-icon-calendar, .mx-icon-clear {
  color: #343434 !important;
}

.mx-input {
  height: 36px !important;
}

.chart_header .total {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 15px;
  height: 25px;
  font-size: 1rem;
}

.chart_header .total span {
  color: #ffffff;
}

.chart_header .total .small {
  margin-left: 40px;
}

.chart_header .btn_area {
  display: flex;
}

.small {
  font-size: 0.8rem;
  margin-top: 5px;
  margin-bottom: 10px;
  display: block;
}

#ui-datepicker-div {
  display: none;
  background-color: #fff;
  box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.1);
  /*margin-top: 0.25rem;*/
  border-radius: 0.5rem;
  padding: 0.5rem;
  border:unset;
}
.ui-datepicker-calendar tbody td a.ui-state-active{
  background: #C61623 !important;
}
.ui-datepicker-calendar thead th {
  padding: 0.25rem 0;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  color: #78909C;
}
.ui-datepicker-calendar tbody td {
  width: 2.5rem;
  text-align: center;
  padding: 0;
}
.ui-datepicker-calendar tbody td a {
  display: flex;
  border-radius: 0.25rem;
  line-height: 1.6rem;
  transition: 0.3s all;
  color: #546E7A;
  font-size: 0.875rem;
  text-decoration: none;
  align-items: center;
  justify-content: center;

}
.ui-datepicker-calendar tbody td a:hover {
  background-color: #E0F2F1;
}
.ui-datepicker-calendar tbody td a.ui-state-active {
  background-color: #009688;
  color: white;
}
.ui-datepicker-header a.ui-corner-all {
  cursor: pointer;
  position: absolute;
  top: 0;
  width: 2rem;
  height: 2rem;
  margin: 0.1rem 0.1rem;
  border-radius: 0.25rem;
  transition: 0.3s all;
}
.ui-datepicker-header a.ui-corner-all:hover {
  background-color: #ECEFF1;
}
.ui-datepicker-header a.ui-datepicker-prev {
  left: 0;
  background: url("../images/page_next.svg") no-repeat;
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 50%;
  transform: rotate(180deg);
}
.ui-datepicker-header a.ui-datepicker-next {
  right: 0;
  background: url('../images/page_next.svg');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: 50%;
}
.ui-datepicker-header a>span {
  display: none;
}
.ui-datepicker-title {
  text-align: center;
  line-height: 2rem;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding-bottom: 0.25rem;
}
.ui-widget-header{
  border:unset !important;
  background: unset !important;
}

.ui-widget-header .ui-icon, .ui-icon, .ui-widget-content .ui-icon
{background-image:unset !important;}

.ui-datepicker-week-col {
  color: #78909C;
  font-weight: 400;
  font-size: 0.75rem;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
{
  border:unset !important;
  background: unset !important;
}
.ui-widget-header .ui-icon{background-image: url('../images/page_prev.svg');}

.input_search {
  padding-left: 40px !important;
  background: url("../images/ico_search.svg") no-repeat left 10px center rgba(0, 0, 0, 0.1) !important;
}


.contents_detail {display: flex; flex-direction: column;}
.contents_detail {width: 100%; padding:0; border-radius: 0.5rem;}
.contents_detail .tree_area .search_area{margin-bottom:0; padding:1.3rem;}
.contents_detail .tree_area .search_area input[type='text']{width:calc(100% - 36px);  border:none; background: none;}
.contents_detail .tree_area .search_area .btn_search{background: url(../images/ico_search.svg) transparent no-repeat center center; border: none;}
.contents_detail .tree_area .search_box{padding:0 5px; border-radius: 20px; width:100%; background: #f5f5f5; display: flex;}

.contents_detail .details{margin-left:2%; width: calc(100% - 230px - 2%); padding:1.3rem;border-radius: 0.5rem; background: #fff;}
.contents.details{width: 100%; padding:1.3rem;border-radius: 0.5rem; background: #fff;}
.contents_detail{position: relative}
.contents_detail .details h2{position:absolute; top:20px; font-size:1.2rem; margin-top:10px;}



.insert_form {padding:10px 20px; width:100%; background: #fff; border-radius: 10px}
.insert_form .btn_area{padding:10px 0; display: flex; justify-content: space-between;}
.insert_form h3{font-size:16px; color:#424754; font-weight: 600;}

.insert_form ol,
.insert_form dl{
  display: flex;
  align-items: center;
  width:100%;
}

.insert_form dl{padding:5px 0; }
.insert_form ol{padding:6px 0; border-bottom:1px solid #eee;}
.insert_form dt{ margin:5px 0; width:140px; text-align: right; padding-right:15px; color:#717171}
.insert_form ol > dl > dd{width:calc(100% - 140px); font-size:16px; display: flex; flex-wrap: wrap;}
.insert_form input[type=text], .insert_form textarea,
.insert_form select{width:100%;}
.insert_form input[type=radio] + label span{margin-right:15px;}
.insert_form input[type=checkbox] + label span{margin-right:15px;}
.insert_form ol.row dl{flex-direction: column; align-items: start}
.insert_form ol.row dt{width:unset;}
.insert_form ol.row dd{width:95%;}
.insert_form ol.row dd p{margin-top:10px; width:100%;}
.insert_form ol.row textarea{pading:10px; width:100%; height:100px;}


.insert_form ul > dl {flex-direction: column; align-items: start;}
.insert_form ul > dl > dd{display: flex; flex-direction: column;}

.insert_form .multi_line{display: flex; flex-wrap: wrap;}
.insert_form .multi_line dl{width:33.333%; border-bottom:1px solid #eee;}

.check_row input[type=checkbox] + label span{margin-right:15px; min-width:80px;}
.check_row input[type=checkbox] + label{margin:5px 0;}
.modal .table{padding:20px;}
.modal .table table{margin-bottom:15px;}
.modal .table table:last-child{margin-bottom:0;}
.modal .insert_form{padding:0 20px;}
.modal_sm .insert_form dt{width:80px;}
.modal_sm .insert_form dd{width:calc(100% - 80px); }
.modal .radio_row{ display: flex;}
.modal .radio_row p{ margin-left: 20px;}

.modal.search{ left: 50% !important; top: 200px !important; margin-left: -43px;}
.modal.search .modal_body{min-height:auto;}
.modal.search input[type="text"]{padding-right:25px; width:280px; border:2px solid #C61623;}
.modal.search .search_list{margin-top:5px; max-height:190px;}
.modal.search .search_list li a{display: block; padding:10px 15px;}
.modal.search .search_list li a:hover{background: #fafafa;}
.modal.search .search_list li a b{font-weight: 700; color:#000;}

.not_found{
  width:100%; height:100%;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.not_found .img{width: 350px; height:350px; background: url("../images/not_found_img.svg") no-repeat ; background-size: 100%}
.not_found .text{display:flex; font-size:18px; margin-bottom:40px;}
.not_found .btn{}

.loading_new{
  width:100%;
  height:100vh;
  position: absolute;
  z-index: 120;
  background:rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;}
.loading_wrap{width:200px; height:200px;}
.loading_new p{text-align: center; color:#fff; font-size:1rem;}
.loading {margin-right:5px; width:20px; height:20px; border:3px solid rgba(255,255,255, .3);
  border-radius: 30px;
  border-top-color:#fff; display:inline-flex;
  animation: spain 1s ease-in-out infinite; -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg);}
}

#tooltip {
  background: #333;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
  display: none;
}

#tooltip[data-show] {
  display: block;
}

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

#arrow {
  visibility: hidden;
}

#arrow::before {
  visibility: visible;
  content: '';
  transform: rotate(45deg);
}

#tooltip[data-popper-placement^='top'] > #arrow {
  bottom: -4px;
}

#tooltip[data-popper-placement^='bottom'] > #arrow {
  top: -4px;
}

#tooltip[data-popper-placement^='left'] > #arrow {
  right: -4px;
}

#tooltip[data-popper-placement^='right'] > #arrow {
  left: -4px;
}

.tree input[type=checkbox] + label{background: none; height:27px; font-size:0.875rem}

.tree{padding:1.3rem; border-top:1px solid #eaeaea; }
.tree ul{
  list-style: none; /* 기본 리스트 스타일 제거 */
  padding-left:10px;
}
.tree *:before{
  width:15px;
  height:15px;
  display:inline-block;
}
.tree label{
  cursor: pointer;
}
.tree label:hover{
  color: #00AACC;
}
.tree label:before{
  content: '';
  background: url("../images/tree_open.svg") no-repeat 0 5px;
}
.tree label.lastTree:before{
  content: '';
  background: url("../images/tree_dot.svg") no-repeat 5px 7px;
}
.tree label:hover:before{
  content: '';
  background: url("../images/tree_open.svg") no-repeat 0 5px;
}
.tree label.lastTree:hover:before{
  content: '';
  background: url("../images/tree_dot.svg") no-repeat 5px 7px;
}
.tree input[type="checkbox"] {
  display: none;
}
.tree input[type="checkbox"]:checked~ul {
  display: none;
}
.tree input[type="checkbox"]:checked+label:before{
  content: '';
  background: url("../images/tree_close.svg") no-repeat 0 4px;
}
.tree input[type="checkbox"]:checked+label:hover:before{
  content: '';
  background: url("../images/tree_close.svg") no-repeat 0 4px;
}

.tree input[type="checkbox"]:checked+label.lastTree:before{
  content: '';
  background: url("../images/tree_dot.svg") no-repeat 5px 7px;
}
.tree input[type="checkbox"]:checked+label.lastTree:hover:before{
  content: '';
  background: url("../images/tree_dot.svg") no-repeat 5px 7px;
}
.tree input[type="checkbox"]:checked+label{color:#C61623;}

.btn_normal {
  display: inline-block;
  width: 100px;
  height: 36px;
  line-height: 34px;
  border: 1px solid #3e83a4;
  border-radius: 4px;
  font-size: 16px;
  color: #3e83a4;
  text-align: center;
}


.alert-box {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  text-align: center;
  background: rgba(170, 170, 170, 0.7);
}
.alert-text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.2rem;
  font-weight: 500;
  transform: translate(-50%, -50%);
}

.popover{position:absolute; min-width: 160px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);}

.popover .popover_header{padding:10px 15px; border-bottom:1px solid #eaeaea; text-align: left; font-size:1rem;}

.popover .popover_body{padding:15px;}
.popover .popover_footer{padding:10px 15px; border-top:1px solid #eaeaea; display: flex; justify-content: flex-end;}

.ico_write {
  width: 24px;
  height: 16px;
  display: inline-block;
}
.ico_link{background: url("../images/ico_link.svg") no-repeat center center; width:26px; height:26px; display: inline-flex; overflow:hidden; text-indent: -100px; border:1px solid #DBE1E7; border-radius: 4px}
.ico_unlink{background: url("../images/ico_unlink.svg") no-repeat center center; width:26px; height:26px; display: inline-flex; overflow:hidden; text-indent: -100px; border:1px solid #DBE1E7; border-radius: 4px}
.ico_link:hover,
.ico_unlink:hover{border:1px solid #C61623;}


.bt {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* 기본 버튼 사이즈 */
.bt, .btL, .bt-ra, .btL-ra, .bt-c, .btL-c, .btW-ra,
.bt-lg, .btL-lg, .bt-lg-ra, .btL-lg-ra, .bt-lg-c, .btL-lg-c, .btW-lg-ra,
.bt-md, .btL-md, .bt-md-ra, .btL-md-ra, .bt-md-c, .btL-md-c, .btW-md-ra,
.bt-sm, .btL-sm, .bt-sm-ra, .btL-sm-ra, .bt-sm-c, .btL-sm-c, .btW-sm-ra {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  cursor: pointer;
  text-align: center;
  border-radius: 4px;
}

.bt, .btL, .bt-ra, .btL-ra, .bt-c, .btL-c, .btW-ra {
  padding: 0 15px;
  height: 33px;
  line-height: 31px;
  font-size: 0.875rem;
}

.bt-lg, .btL-lg, .bt-lg-ra, .btL-lg-ra, .bt-lg-c, .btL-lg-c, .btW-lg-ra {
  padding: 0 20px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}

.bt-md, .btL-md, .bt-md-ra, .btL-md-ra, .bt-md-c, .btL-md-c, .btW-md-ra {
  padding: 0 20px;
  height: 33px;
  line-height: 31px;
  font-size: 14px;
}

.bt-sm, .btL-sm, .bt-sm-ra, .btL-sm-ra, .bt-sm-c, .btL-sm-c, .btW-sm-ra {
  padding: 0 10px;
  height: 25px;
  line-height: 19px;
  font-size: 12px;
}

.bt, .bt-lg, .bt-md, .bt-sm {
  background: #393534;
  color: #fff;
}

.bt:hover, .bt-lg:hover, .bt-md:hover, .bt-sm:hover {
  opacity: 1;
  background: #C61623;
}

/* 아웃라인 버튼 */
.btL, .btL-lg, .btL-md, .btL-sm {
  border: 1px solid #393534;
  background: #fff;
  color: #393534;
  opacity: 0.8;
}

.btL:hover, .btL-lg:hover, .btL-md:hover, .btL-sm:hover {
  opacity: 1;
  border: 1px solid #C61623;
  color:#C61623;
}

/* 기본 원형 버튼 */
.bt-c, .bt-lg-c, .bt-md-c, .bt-sm-c {
  border: 1px solid #2f2e50;
  background: #2f2e50;
  color: #fff;
  border-radius: 24px;
}

.bt-c:hover, .bt-lg-c:hover, .bt-md-c:hover, .bt-sm-c:hover {
  border: 1px solid #2f2e50;
  background: #2f2e50;
  color: #fff;
  border-radius: 24px;
}

/* 아웃라인 원형 버튼 */
.btL-c, .btL-lg-c, .btL-md-c, .btL-sm-c {
  border: 1px solid #2f2e50;
  background: #fff;
  color: #2f2e50;
  border-radius: 24px;
}

/* 라이트 라운드 버튼 */
.btW-ra, .btW-lg-ra, .btW-md-ra, .btW-sm-ra {
  border: 1px solid #edf2f7;
  background: #edf2f7;
  color: #333;
  border-radius: 4px;
}

.btW-ra:hover, .btW-lg-ra:hover, .btW-md-ra:hover, .btW-sm-ra:hover {
  border: 1px solid #D8DAE7;
  background: #D8DAE7;
  color: #222;
  border-radius: 4px;
}

.bt-link {
  color: #C61623;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: underline;
}

.bt-link-sm {
  font-size: 0.9rem;
}

.bt-red {
  color: #eb4e3d !important;
  border: 1px solid #eb4e3d !important;
}

.bt-blue {
  color: #ffffff !important;
  border: 1px solid #3e83a4 !important;
  background: #3e83a4;
}
.bt_gray{ color:#666; border:1px solid #eaeaea;}


.pagination {
  margin-top: 20px;
  position: relative;
  text-align: right;
}

.pagination ul {
  margin: 0 auto;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
}

.pagination ul li {
  float: left;
  padding: 0 5px;
}

.pagination ul li a {
  width: 36px;
  height: 36px;
  line-height: 34px;
  display: inline-block;
  border-radius: 4px;
  border:1px solid #DBE1E7;
  background: #fff;
}

.pagination ul li a:hover {
  color: #393534;
  border:1px solid #393534;
}

.pagination ul li.active a {
  color: #ffffff;
  background: #393534;

}

.pagination ul li.active a:hover {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  opacity: 1;
}

.pagination ul li.prev a {
  border-radius: 4px;
  background: url(../images/page_prev.svg) no-repeat center center #fff;
  overflow: hidden;
  text-indent: -100px;
}

.pagination ul li.next a {
  border-radius: 4px;
  background: url(../images/page_next.svg) no-repeat center center #fff;
  overflow: hidden;
  text-indent: -100px;
}

#tooltip {
  background: #333;
  color: white;
  font-weight: bold;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
}

/** 팝업**/
.modal_dim {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.8);
}

.modal {
  padding: 0;
  color: #343434;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 12px 14px 0 rgba(0, 0, 0, 0.2);
  z-index: 999;
  overflow: hidden;
  display:none;
}


.modal_bg{display:flex;
  justify-content:center;
  align-items:center;
  position:fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 998; background:rgba(0, 0, 0, 0.8); }


.modal_normal { max-width:460px !important; }

.modal .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background: url("../images/btn_close.svg") no-repeat center center;
  overflow: hidden;
  text-indent: -1000px;
  display: inline-block;
  opacity: 0.7;
}

.modal .btn_close:hover {
  opacity: 1;
}

.modal .modal_header {
  position: relative;
  margin-top: 0;
  margin-bottom: 0;
  padding:15px 20px;
  border-bottom:1px solid #eaeaea;
}
.modal .modal_header h2{font-size:1rem;}

.modal .modal_header .sub_txt {
  font-weight: 300;
  font-size: 12px;
}

.modal .modal_body {
  padding:0;
  width: 100%;
  min-height: 100px;
  max-height: calc(100vh - 160px);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}

.modal .modal_footer {
  position: relative;
  width: 100%;
  padding: 15px 15px;
  display: flex;
  border-top: 1px solid #eaeaea;
  justify-content:space-between;
}
.modal .modal_footer div{width:50%; display: flex; justify-content: flex-end;}
.modal .modal_footer button {
  margin: 0 5px;
  padding: 10px 15px;
  display: flex;
  border-radius: 4px;
}

.modal .info_text {
  margin-bottom: 30px;
  padding: 15px 20px;
  width: 100%;
  background: #8895b0;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 3px;
}

.modal .info_text li {
  margin: 3px 0;
  padding: 0 0 0 12px;
}

.modal .info_text span {
  color: #fffa8d;
}

.modal .info_text b {
  font-weight: 600;
}

.modal .info_text a {
  text-decoration: underline;
}

.modal .info_text a:hover {
  color: #FFF99B;
}

.modal .search input[type=radio] + label {
  width: 25%;
  word-break: break-all;
  display: inline-block;
}

.modal .search .discription {
  width: 75%;
  border-left: 1px solid #4d4f5c;
  margin-left: 10px;
  padding-left: 10px;
  font-size: 0.9em;
  word-break: break-all;
}

.modal .search {
  width: 400px;
}

.modal .search_input {
  width: 100%;
}

.modal .search_input input[type=text] {
  width: 100%;
}

.modal .search_result {
  margin: 20px -36px 0 -30px;
  padding: 30px;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 1px solid #32394e;
}

.modal .search_result li {
  margin-bottom: 15px;
  line-height: 1.2;
  display: flex;
}

.modal .search_result li:last-child {
  margin-bottom: 0;
}

.modal_sm {
  width: 100%;
  max-width: 360px;
}

.modal_md {
  width: 100%;
  max-width: 760px;
}

.modal_lg {
  width: 1004px;
}

.modal_monitoring {
  width: 400px;
}

.modal.alert .modal_body{padding:20px; min-height:100px; display: flex; align-items: center; justify-content: center; text-align: center;}

.modal .search_body ul{width:100%;}

/*# sourceMappingURL=common.css.map */

/** 대시보드 차트 추가 **/
.dashboard .section_wrap{display: flex; justify-content: space-between; margin: 0 -0.5rem;}
.dashboard section{flex-direction: column; margin: 0.5rem; flex:1}
.dashboard .card_head{position: relative;}
.dashboard .card_head label,
.dashboard .card_head span{margin:0 5px; font-size:0.875em; font-weight: normal}
.dashboard .card_head select{padding:0 15px 0 7px; font-size:0.875em; height:26px; line-height: 1; background: url(../images/ico_arrow_down.svg) no-repeat calc(100% - 5px) center transparent; background-size: 16px;}
.dashboard .card_head .btn_area{position: absolute; top:-3px; right:10px; display: flex; align-items: center;}
/*.dashboard .chart_area{margin-top:15px;}*/
.dashboard .card_head button{width:26px; height:26px; margin-left: 4px; opacity: 0.7}
.dashboard .card_head button:hover{border:1px solid #555; opacity: 1; border-radius: 4px;}
.dashboard .btn_save{background: url("../images/ico_save.svg") no-repeat center; background-size: 20px; overflow: hidden; text-indent: -100px;}
.dashboard .btn_view{background: url("../images/ico_link.svg") no-repeat center; background-size: 20px; overflow: hidden; text-indent: -100px;}
.dashboard .btn_upload{background: url("../images/ico_upload.svg") no-repeat center; background-size: 20px; overflow: hidden; text-indent: -100px;}

.delivery_status{}
.delivery_status .section{display: flex; justify-content: space-between}
.delivery_status {}
.donut_chart{position: relative;}
.donut_chart .title{position:absolute; top:30%; left:0; width:100%; text-align: center; font-size:0.75rem; z-index: 2}
.donut_chart .per{position:absolute; top:47%; left:0;width:100%; text-align: center; font-weight:600; font-size:1.25rem; z-index: 2}
.chart_wrap .detail {width:100px; margin: 0 auto;}
.chart_wrap .detail dl{display: flex; margin-top:5px; }
.chart_wrap .detail dt{margin-right:5px; border-radius: 30px; background: #efefef; padding:2px 10px; font-size:11px;}
.row_bar_chart {margin-top:20px; width: 100%;}
.row_bar_chart dl{display: flex; width: 100%; margin-bottom:10px;}
.row_bar_chart dt{width:60px; font-size: 11px; font-weight: 600;}
.row_bar_chart dd{display: flex; width:calc(100% - 60px); align-items: center; justify-content:space-between;}
.row_bar_chart dd span{width:70px; text-align: right; font-weight: 600;}
.row_fixed{display: flex;}
.chart_donut {
 /* position: relative;*/
  width: 120px;
  height: 120px;
 /* border-radius: 50%;*/
  transition: 0.3s;
  background:lightgray;
  display:inline-block;
}
/*
.chart_donut:after{ !* 가상선택자는 도넛 모양을 만들기 위함이다.*!
  content:'';
  background: #fff;  !* 백그라운드 컬러로 중앙가리기 *!
  position: absolute;
  top:50%; left:50%;
  width:90px; height:90px; !* 도넛의 너비 설정 *!
  border-radius: 50%;
  transform: translate(-50%, -50%);
}*/
.chart_donut_bar{
  width: inherit;
  height: inherit;
  border-radius: 50%;
  /* 차트 설정 */
}

.bar_chart{position:relative; display: flex; height:10px; width:100%; border-radius: 50px; background: #555;}
.bar_chart .bar{background: #C61623; border-radius: 50px;}
.bar_chart .bar1,
.bar_chart .bar2,
.bar_chart .bar3,
.bar_chart .bar4,
.bar_chart .bar5,
.bar_chart .bar6,
.bar_chart .bar7,
.bar_chart .bar8{border-radius: 50px;}
.bar_chart .bar1{background: #2048D7;}
.bar_chart .bar2{background: #F85634;}
.bar_chart .bar3{background: #FFBB00;}
.bar_chart .bar4{background: #00A768;}
.bar_chart .bar5{background: #00AAD4;}
.bar_chart .bar6{background: #7D29DC;}
.bar_chart .bar7{background: #D9D9D9;}
.bar_chart .bar8{background: #FA8A11;}
.pie_chart{margin-left:20px;width:100%;}
.table_dh table{width:100%; }
.table_dh th{border:2px solid #fff; background: #eaeaea; vertical-align: middle; padding:5px; border-radius: 6px; line-height: 1; font-size:11px;}
.table_dh th span{font-size:10px;}
.table_dh td{padding:5px 0; font-size:12px; text-align: center; border-bottom:1px solid #eaeaea;}
/*.table_dh td:first-child{text-align: left; padding-left:5px; font-weight: 600;}*/
.table_dh td:first-child{width:100px; font-weight: 600}
.table_dh td select{ padding:0 15px 0px 7px; height:26px; font-size:12px; background: url(../images/ico_arrow_down.svg) no-repeat calc(100% - 5px) center transparent; background-size: 16px;}
.dashboard .select_date{margin-bottom:10px; padding:7px 20px; display: flex; background: #fff; border-radius: 0.5rem; align-items: center;}
.dashboard .select_date .title{margin-right:20px;}


@media (max-width: 1440px) {
  .right .graph_pie {
    height: 80px;
    font-size: 1.1rem;
  }

  .right .graph_pie_bg {
    width: 100px;
    height: 100px;
  }

  .right .graph_pie_bg span.center {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 1rem;
  }

  .monitoring_wrap .right.type2 .route {
    height: 117px;
  }

  .monitoring_wrap .right.type2 .line {
    height: 120px;
  }
  .dashboard .section_wrap{flex-direction: column;}
}

.dark_temp{background: #2b2b2b; color:#eee; height:calc(100vh -50px);}
.dark_temp h1{color:#fff !important;}
.dark_temp .dashboard .select_date{background: #393534;}
.dark_temp select{border:1px solid #777; color:#eee;}
.dark_temp .card{background: #393534;}
.dark_temp .card .card_head{border-bottom:1px solid #2b2b2b;}
.dark_temp .chart_wrap .detail dt{background: #2b2b2b;}
.dark_temp .chart_donut{background: none;}
.dark_temp .table_dh th{background: #2b2b2b;border:2px solid #393534;}
.dark_temp .table_dh td{border-bottom:1px solid #2b2b2b}
.dark_temp .dashboard .btn_upload {background: url(../images/ico_upload_w.svg) no-repeat center;}
.dark_temp .dashboard .btn_save {background: url(../images/ico_save_w.svg) no-repeat center;}
.dark_temp .dashboard .btn_view {background: url(../images/ico_link_w.svg) no-repeat center;}
.dark_temp .quick_menu{background: #393534 !important; border-left:1px solid #eeeeee11 !important;;}
.dark_temp .quick_menu h3{color:#fff !important;;}
.dark_temp .quick_menu .input_date{cursor: pointer;}