@import url(font-awesome.min.css);

.user-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.checkbox-container {
  flex-basis: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}


.e {
  color: #fa6868;
}

.red {
  color: #ff9595
}

.grey {
  color: rgba(0, 0, 0, 0.2)
}

.bar {
  display: inline-block;
  margin-right: 16px;
  width: 1px;
  height: 10px;
  line-height: 1em;
  background-color: rgba(0, 0, 0, 0.2);
}

.circle {
  border-radius: 100%;
}

.page {
  padding: 0 20px 20px 20px;
}

.page .page {
  padding: 0;
}

.row {
  position: relative;
}

.row.line {
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.row.line3 {
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.col-line {
  float: left;
  margin: 31px 12px 0 12px;
  height: 28px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.pull-right button+button {
  margin-left: 4px;
}

.transparent {
  background-color: transparent;
}

/******* 표준협회 모바일 메뉴 *******/
[nav-state=xs-off] #navigationListWrap {
  display: none;
}

#side-footer {
  text-align: center;
}

#side-footer .sidebar-close {
  background-color: transparent;
  border: 0;
  margin-top: 60px;
  color: #fff;
}

[nav-state=xs-on] .sidebar .sidebar-nav ul {
  position: relative;
}

[nav-state=xs-on] .sidebar .sidebar-nav ul li {
  float: left;
  width: 50%;
}

[nav-state=xs-on] .sidebar .sidebar-nav ul li a p {
  display: block;
  width: 100px;
  height: 100px;
  margin: 50px auto 12px auto;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  line-height: 100px;
  text-align: center;
  font-size: 52px;
}

[nav-state=xs-on] .sidebar .sidebar-nav ul li a .menuTx {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

[nav-state=xs-on] .sidebar .sidebar-nav ul li:last-child {
  position: absolute;
  top: 130px;
  left: 25%;
}

[nav-state=xs-on] .sidebar .sidebar-nav ul li:last-child a p {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  line-height: 64px;
  font-size: 36px;
}

.dashboard-menu ul {
  position: relative;
}

.dashboard-menu ul li {
  float: left;
  width: 50%;
}

.dashboard-menu ul li a p {
  display: block;
  width: 100px;
  height: 100px;
  margin: 50px auto 12px auto;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  line-height: 100px;
  text-align: center;
  font-size: 52px;
}

.dashboard-menu ul li a p:nth-child(2n) {
  backbround: #1185db;
}

.dashboard-menu ul li a .menuTx {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

/* .dashboard-menu ul li:last-child {
  position: absolute;
  top: 130px;
  left: 25%;
}
.dashboard-menu ul li:last-child a p {
  width: 64px;
  height: 64px;
  border-radius: 100%;
  line-height: 64px;
  font-size: 36px;
} */

#dashboard-menu {
  position: fixed;
  height: 100%;
  width: 100%;
  margin: 0 -12px;
  /* padding-top: 64px; */
  background: #1c69c7;
  overflow-y: auto;
  z-index: 99;
}

#dashboard-menu ul>li>a {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0;
  font-weight: 200;
  font-size: 15px;
}


/******* 사이드패널 *******/
.sidePanel {
  position: fixed;
  top: 0;
  right: 0;
  width: 285px;
  height: 100%;
  padding-top: 60px;
  box-shadow: 4px 4px 20px 0 #273b4a;
  background: #fff;
  z-index: 100;
}

.sidePanel_btn {
  position: fixed;
  bottom: 16px;
  right: -32px;
  width: 64px;
  height: 48px;
  padding: 6px;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #1c69c7;
  text-align: left;
}

.sidePanel_btn.open {
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  text-align: center;
  transform: rotate(180deg);
}

.sidePanel .content {
  height: 100%;
  padding: 24px 20px;
}

#timeline.panel {
  height: 430px;
}

#favorite.panel {
  height: calc(100% - 450px);
}

.sidePanel .panel .panel-header {
  height: 46px;
  margin: -1px -1px 0 -1px;
  padding: 9px 24px 8px 30px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  background-color: #1c69c7;
  color: #fff;
}

.sidePanel .panel .panel-header h2 {
  font-weight: 800;
  font-size: 18px;
  line-height: 30px;
}

.sidePanel .panel .panel-header button {
  font-size: 18px;
  line-height: 26px;
  opacity: 0.7;
}

.sidePanel .panel .panel-body {
  overflow: auto;
}

/** 사이드패널 - 타임라인 **/
.timeline_item {
  position: relative;
  height: 100%;
  padding: 16px 16px 0 16px;
}

.timeline_item:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 16px;
}

.timeline_item ul li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 16px;
}

.timeline_item ul li:before {
  display: block;
  position: absolute;
  top: 3px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: rgba(28, 105, 199, 0.8);
  content: '';
}

.timeline_item ul li a {
  width: 100%;
}

.timeline_item ul li .menu {
  margin-bottom: 5px;
  font-size: 12px;
}

.timeline_item ul li .title {
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 14px;

  line-height: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.timeline_item ul li .time {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}


/** 사이드패널 - 즐겨찾기 **/
.favorite_list {
  padding: 16px 16px 0 16px;
}

.favorite_list ul li {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  margin-bottom: 8px;
}

.favorite_list ul li a {
  display: block;
  padding: 8px 12px;
}

.favorite_list ul li span {
  font-weight: 400;
  font-size: 14px;
}

/******* //사이드패널 *******/



/******* 콘텐츠 *******/
/* 스플릿 버튼 */
.list-split {
  top: -4px;
}

.list-split span {
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
}

.list-split span:hover {
  border: 1px solid #ccc;
}

.list-split span:last-child {
  border: 1px solid #dee2e6;
}

.list-split span:last-child:hover {
  border: 1px solid #ccc;
}

/** 버튼 스타일 **/
.btn i.material-icons {
  vertical-align: middle;
}

.btn span {
  vertical-align: middle;
}

.btn.btn-big {
  min-width: 70px;
  height: 32px;
  padding: 6px 12px 6px 12px;
  border-radius: 6px;
  font-family: 'Noto Sans KR';
  font-weight: 700;
  font-size: 13px;
}

.btn.btn-big-icon {
  width: 32px;
  height: 32px;
  padding: 6px 4px;
  border-radius: 6px;
  font-family: 'Noto Sans KR';
  font-weight: 500;
  font-size: 15px;
}

.btn.btn-big-icon object {
  width: 20px;
  height: 20px;
}

.btn.btn-big-img {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
}

.btn.btn-big-img img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.btn.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0 6px;
  border-radius: 20px;
  background: rgba(28, 105, 199, 0.1);
  color: rgba(28, 105, 199, 0.8);
}

.btn.btn-big i {
  font-size: 16px;
}

.btn.btn-icon i {
  font-size: 16px;
}

.btn.btn-big-icon i {
  font-size: 20px;
}

.btn.default_btn {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  color: #101010;
}

.btn.primary_btn {
  border: 1px solid #1c69c7;
  background-color: #1c69c7;
  color: #fff;
}

.btn.delete_btn {
  border: 1px solid #1c69c7;
  background-color: #fff;
  color: #1c69c7;
}


.btn.blue_btn {
  border: 1px solid #1c69c7;
  background-color: rgba(28, 105, 199, 0.1);
  color: #1c69c7;
}

.btn.red_btn {
  border: 1px solid #fa6868;
  background-color: rgba(255, 149, 149, 0.15);
  color: #fa6868;
}

.btn.gray_btn {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #f1f1f1;
  color: #000;
}

.btn_cmt {
  min-width: 60px;
  height: 28px;
  padding: 0 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
}

.btn.active {
  background-color: #1c69c7;
  border: 1px solid #1c69c7;
  color: #fff !important;
  font-weight: 600;
}

.text_btn {
  background: transparent;
}

.text_btn.reply_btn {
  color: #1c69c7;
  font-weight: 700;
}

.more_btn {
  margin-bottom: 0;
  color: #1c69c7;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
}

.more_btn:hover {
  color: #1c69c7;
}

button.close_icon {
  position: static;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

span.move_icon {
  margin-left: 4px;
  color: rgba(0, 0, 0, 0.3);
  font-size: 20px;
}

button+.dropdown_btn {
  margin-left: 8px;
}

/** circle 스타일 **/
.circle.circle_xs {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #1c69c7;
  text-align: center;
  line-height: 1em;
  font-size: 14px;
}

.circle.circle_xs i {
  color: #1c69c7;
  font-size: 14px;
}

.circle.circle_xs object {
  position: relative;
  top: 1px;
  width: 14px;
}

.circle.circle_s {
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #1c69c7;
  text-align: center;
  line-height: 1em;
  font-size: 18px;
}

h4.sub_title {
  margin: 20px 0 0 0;
  font-weight: 600;
  font-size: 14px;
}

/** 패널 스타일 **/
.panel {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.panel.radius2 {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.panel-heading {
  padding: 15px;
  border-top-left-radius: 20px;
  border-top-right-radius: 6px;
}

.panel-header {
  margin: 10px 0 20px 0;
}

.panel-header h4 {
  line-height: 38px;
  font-weight: 800;
}

.panel-body {
  padding: 0;
}


.panel-tab>.content {
  position: relative;
  padding: 20px;
}

.panel-body>.content {
  position: relative;
  padding: 10px 20px;
}

.panel.radius2>.panel-body>.content {
  padding: 20px;
}

.panel-body>.panel-content {
  position: relative;
  padding: 0 20px;
}

.panel-content>.panel:last-child {
  margin-bottom: 0;
}

.panel-btn>.content {
  position: relative;
  padding: 20px;
}

.panel-body h2.panel_title {
  padding: 8px 20px;
  /* border-radius: 6px 6px 0 0; */
  background-color: #edeef3;
  font-weight: 800;
  font-size: 18px;
}

.panel-body h2.panel_title:before {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background-image: url('../images/title_icon.png');
  content: '';
}

.panel-body h2.desc {
  text-align: center;
  line-height: 1.5em;
  font-size: 18px;
}

.panel-body h3 {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 8px;
}

.panel-body h3.panel_sub_title {
  line-height: 32px;
}

.panel-body h3>.desc {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

.panel-body>.content>.panel {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.panel-body>.content>.panel h2.panel_title {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.panel-tab button.btn-icon {
  position: absolute;
  top: 22px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  box-shadow: 4px 4px 20px 0 rgb(0 0 0 / 10%);
  color: #29348e;
}

.panel-tab button.btn-icon i {
  font-size: 24px;
}

.panel-tab button.btn-icon.prev_btn {
  left: 14px;
}

.panel-tab button.btn-icon.next_btn {
  right: 14px;
}

.panel-default>.panel-heading {
  background-color: #fbfcfd !important;
  border-bottom: 1px solid #edf0f5 !important;
}

.panel-default>.panel-heading .fa-lg {
  color: #7f8fa4;
}

.modal-body .panel-heading button {
  position: absolute;
  top: 2px;
  right: 12px;
  height: 26px;
  background: transparent;
  border: 0;
}

.panel-heading button:hover {
  background: transparent;
  border: 0 !important;
}

.modal-nodata {
  margin-top: -20px;
}

.modal-nodata .row.nodata {
  height: 300px;
}

.modal-nodata .row.nodata h4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.panel-tab {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  box-shadow: 0 1px 5px 0 rgb(0 0 0 / 15%);
}

.panel-tab ul {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.panel-tab ul li {
  height: 44px;
  margin-right: 12px;
  border-radius: 10px;
  background-color: #f2f3f7;
  font-size: 15px;
  vertical-align: middle;
}

.panel-tab ul li:last-child {
  margin-right: 0;
}

.panel-tab ul li a {
  padding: 10px 16px;
}

.panel-tab ul li a>span {
  vertical-align: middle;
  line-height: 25px;
  font-weight: 600;
}

.panel-tab ul li .circle {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  margin-left: 5px;
  padding: 0px 6px 0 5px;
  background-color: #fff;
  color: #000;
  text-align: center;
  font-size: 12px;
  line-height: 24px;
}

.panel-tab ul li.active {
  background-color: #1c69c7;
  font-weight: 400;
}

.panel-tab ul li.active a {
  color: #fff;
}

.btn-scroll.as-sortable-dragging li a {
  padding: 10px 16px;
}

.btn-scroll.as-sortable-dragging li {
  height: 44px;
  margin-right: 12px;
  border-radius: 10px;
  background-color: #f2f3f7;
  font-size: 15px;
  vertical-align: middle;
}

.btn-scroll.as-sortable-dragging li.active {
  background-color: #1c69c7;
  font-weight: 400;
}

.btn-scroll.as-sortable-dragging li.active a {
  margin-top: 4px;
  color: #FFF;
}

/* 모달, 사업기회:복제 */
.modal-dialog.modal-normal .modal-content {
  width: 399px !important;
}

/** 모달 **/
.modal-dialog {
  margin: 50px auto;
}

.modal-content {
  padding: 10px 0 !important;
  border-radius: 20px;
}

.modal-body {
  padding: 0;
}

.modal-body .panel {
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.modal-body .panel .panel-body>.content {
  padding: 0 30px 10px 30px;
}

/* 05-03 수정 */
/* .modal-content .content { padding: 0 30px; } */
.modal-content .content {
  padding: 0 20px;
  width: 100%;
}

.modal-content .panel-body h2.panel_title {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  margin: 0 0 10px 0;
}

.modal.in .modal-dialog .modal-header {
  width: 100%;
  margin: 30px 0 20px 0;
  border-bottom: 0 !important;
  background-color: transparent !important;
}

.modal-header h3 {
  font-weight: 800;
}

.modal-footer {
  width: 100%;
  margin-top: 20px;
  padding: 20px 0 32px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}

.modal-footer .btn+.btn {
  margin-left: 12px;
}

/** 모달 스타일2 **/
.popup-header .line {
  margin-top: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.popup-header h3 {
  font-size: 20px;
}

/** 모달 크기 (xs) **/
/* 사업기회 - 진행단계 변경 */
.modal.in .modal-dialog .xs-modal .modal-header {
  margin: 0 0 20px 0;
}

.modal-dialog .xs-modal.modal-content {
  padding: 24px 0 32px 0 !important;
}

.xs-modal.modal-content .content {
  padding: 0 24px;
}

.xs-modal .modal-header h3 {
  line-height: 1.2em;
  font-size: 18px;
}

.xs-modal .modal-header .text_btn i {
  font-size: 20px;
}

.xs-modal .modal-footer {
  padding: 20px 0 0 0;
}

.xs-modal .modal-footer .btn.btn-big {
  width: calc(50% - 4px);
  min-width: auto;
}

.xs-modal .modal-footer .btn+.btn {
  margin-left: 8px;
}

/** 폼 스타일 **/
/** 폼 구조: form-field > form-group > form-input **/
.full {
  width: 100% !important;
}

.half {
  width: calc((100% - 10px)/2);
}

.half+.til {
  position: absolute;
  top: 28px;
  width: 10px;
  text-align: center;
}

/* .form-field p { line-height: 1.5em; } */

.form-group {
  position: relative;
  min-height: 0;
  margin: 10px 0;
}

.form-group:after {
  display: block;
  clear: both;
  content: '';
}

.form-group.inlabel {
  min-height: 50px;
}

.form-group p {
  position: relative;
  margin-bottom: 8px;
}

.radio-wrap>label,
.form-group p>label {
  color: #000;
  font-weight: 800;
  font-size: 14px;
}

.form-group p>button.text_btn {
  font-size: 13px;
  margin-left: 8px;
  color: #1c69c7;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
}

.form-group p>button.text_btn:hover {
  border-bottom: 1px solid #1c69c7;
  font-weight: 600;
}

.form-group .form-input[type="text"],
.form-group .form-input[type="password"],
.form-group select.form-input,
.form-group div.form-input {
  position: relative;
  height: 28px;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
  color: #000;
  font-size: 15px;
  line-height: 22px;
}

div.form-input.text_view {
  min-height: 150px;
  padding: 8px;
  line-height: 1.5em;
  overflow: auto;
}

div.form-input.bbs_text_view {
  min-height: 150px;
  padding: 8px;
  line-height: 1.5em;
  height: auto;
  overflow: auto;
}

.form-group h3 {
  font-size: 24px;
  font-weight: 800;
}

.form-group .auto-complet-wrap {
  min-height: 28px;
  /* height: 26px; */
  padding: 0;
}

.form-group .auto-complet-wrap .form-input[type="text"] {
  position: absolute;
  height: 26px !important;
  margin-top: 0;
  padding: 3px 9px !important;
  background-color: transparent;
}

.form-group .auto-complet-wrap .sz-autocomplete-item-list {
  min-width: 100%;
  max-width: 640px;
  margin-top: 28px;
}

.form-group .auto-complet-wrap.has-inner-bind .form-input[type="text"] {
  padding: 0 2px !important;
  /* margin: -5px 0; */
}

.form-group>.timer>.timepicker {
  margin: 0;
}

.form-group .form-input[type="checkbox"] {
  margin-top: 0;
  line-height: 28px;
}

.form-group div.form-input.readonly,
.form-group textarea.form-input:disabled,
.form-group textarea.form-input:read-only,
.form-group select.form-input:disabled,
.form-group .form-input[type="text"]:disabled,
.form-group .form-input[type="text"]:read-only {
  background-color: #fafafa;
}

.form-group textarea.form-input {
  padding: 16px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  font-size: 15px;
  line-height: 1.2em;
}

.form-input[type="text"].search {
  padding: 6px 36px 6px 10px;
  background-position: right 10px center;
  background-color: #fff;
  background-image: url('../images/icon_input-search.png');
  background-repeat: no-repeat;
}

div.form-input.form-box {
  padding: 3px 40px 3px 12px;
}

div.form-input.form-box>div {
  padding-bottom: 10px;
  overflow-x: hidden;
  white-space: nowrap;
}

.remind_box .input-item {
  margin-top: 5px;
}

.form-group .auto-complet-wrap.has-inner-bind {
  /* padding: 6px 5px 0 5px; */
  padding: 0;
}

.form-group .auto-complet-wrap.has-inner-bind .sz-autocomplete-item-list {
  margin-top: 0px;
}

.form-group sz-auto-complete.has-disabled .auto-complet-wrap {
  background-color: #fafafa;
}

.form-group sz-auto-complete.has-disabled .auto-complet-wrap .input-item {
  background-color: transparent;
  padding: 4px 0px 4px 0px;
}

.form-group sz-auto-complete.has-disabled .auto-complet-wrap .input-item:not(:last-child)::after {
  content: ",";
}

.form-group sz-auto-complete.has-disabled .auto-complet-wrap button {
  display: none;
}

.input-item {
  /* display: block;
  float: left; */
  /* display: inline-block; */
  display: inline-grid;
  position: relative;
  max-width: 100%;
  height: 22px;
  margin: 2px;
  /* margin-right: 5px; */
  margin-bottom: 1px;
  /* margin-top: -3px; */
  padding: 4px 22px 4px 8px;
  border-radius: 6px;
  background-color: #e5e5e5;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* .input-item:first-child { margin-left: 5px; } */
.input-item>span {
  margin: 0 !important;
}

.input-item.disable {
  background-color: rgba(28, 105, 199, 0.1);
  color: #1c69c7;
}

.input-item.disable:before {
  display: inline-block;
  margin-right: 3px;
  font-family: 'Material Icons';
  content: '\e876';
  vertical-align: middle;
}

.input-item:last-child {
  margin-right: 0;
}

.input-item .delete_btn {
  position: absolute;
  top: 4px;
  right: 5px;
  background-color: transparent;
}

.input-item .delete_btn i {
  color: #848587;
  font-size: 12px;
}

.segmentList .input-item {
  display: inline-block !important;
}

.form-group .close_icon,
.form-group .plus_icon {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 12px;
  line-height: 15px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
}

.form-group .remind_plus_icon {
  position: absolute;
  top: 28px;
  width: 18px;
  height: 18px;
  border-radius: 12px;
  line-height: 16px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;

}

.form-group .close_icon {
  border: 1px solid #e5e5e5;
  background-color: #e5e5e5;
  color: #8e8e8e;
}

.form-group .remind_plus_icon,
.form-group .plus_icon {
  border: 1px solid #1c69c7;
  background-color: #f8f8fe;
  color: #1c69c7;
}

.form-group .close_icon i {
  font-size: 14px;
}

.form-group.icon_input_wrap .form-input {
  width: calc(100% - 28px);
}

.form-group.icon_input_wrap .close_icon {
  top: auto;
  bottom: 8px;
  right: 0;
  border: 1px solid #fb9595;
  background-color: #fb9595;
  color: #fff;
}

label.custom-radio-btn {
  line-height: 30px;
  font-size: 14px;
}

label.custom-radio-btn:not(:last-child) {
  margin-right: 16px;
}

label.custom-radio-btn input[type="radio"]~.helping-el {
  top: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid #dee2e6;
}

label.custom-radio-btn input[type="radio"]:checked~.helping-el {
  border: 1px solid #1c69c7;
}

label.custom-radio-btn input[type="radio"]:checked~.helping-el:after {
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background-color: #1c69c7;
}

.form-group .radio-inline {
  line-height: 28px;
}

.custom-checkbox-btn {
  display: inline-block;
  margin-right: 16px;
}

.custom-checkbox-btn:last-child {
  margin-right: 0;
}

.custom-checkbox-btn md-checkbox.md-default-theme.md-checked .md-icon,
.custom-checkbox-btn md-checkbox.md-checked .md-icon {
  background-color: #1c69c7;
}

.custom-checkbox-btn md-checkbox.md-checked .md-icon:after {
  left: 6px;
}

.custom-checkbox-btn md-checkbox .md-container {
  background-color: #fff;
}

.custom-checkbox-btn md-checkbox .md-label {
  line-height: 20px;
  margin-left: 25px;
}

/* 버튼이 있는 인풋 */
div.form-input_button .form-input[type="text"] {
  width: calc(100% - 84px);
  margin-right: 4px;
}

div.form-input_button button.btn {
  width: 80px;
  height: 28px;
  font-size: 13px;
}

div.form-input_button button.btn i {
  font-size: 16px;
}

/* input type="file" 파일 첨부 */
.form-group .file-input:after {
  display: block;
  clear: both;
  content: '';
}

.form-group .file-input .file_path-label {
  float: left;
  position: relative;
  width: calc(100% - 88px);
  height: 28px;
  margin-right: 8px;
  padding: 3px 12px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fafafa;
  color: #000;
  font-size: 15px;
  line-height: 1em;
}

.form-group .file-input .form-input {
  display: inline-block;
  width: 100%;
}

.form-group .file-input .file_button {
  float: left;
  width: 80px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #1c69c7;
  background-color: rgba(28, 105, 199, 0.1);
  color: #1c69c7;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  vertical-align: top;
}

.form-group .file-input input[type="file"] {
  /* 파일 필드 숨기기 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


.fileList ul {
  margin: 20px 0 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.fileList ul:after {
  display: block;
  clear: both;
  content: '';
}

.fileList ul li {
  float: left;
  margin-right: 30px;
  line-height: 1.5em;
}

.fileList ul li a {
  font-size: 13px;
}

.fileList ul li .close_icon {
  position: relative;
  top: 2px;
  left: 0px;
}

.button__tab:after {
  display: block;
  clear: both;
  content: '';
}

.button__tab li {
  float: left;
  width: 25%;
  margin-right: -1px;
}

.button__tab li .btn {
  width: 100%;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.button__tab li .btn.active {
  background-color: #1c69c7;
  color: #fff;
  box-shadow: none;
}

select.sm_select {
  height: 32px;
  padding: 3px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  font-size: 12px;
}

.total dt,
.total dd {
  display: inline-block;
  line-height: 28px;
  vertical-align: middle;
}

.total dt {
  margin-right: 10px;
  font-weight: 400;
  font-size: 14px;
}

.total dd {
  color: #fa6868;
  font-weight: 700;
  font-size: 24px;
}

.plus_btn {
  width: 28px;
  height: 28px;
  border-radius: 18px;
  background-color: #41c6a7;
  color: #fff;
}

.plus_btn i {
  font-size: 20px;
}

.dropdown_btn+.btn-big {
  margin-left: 4px;
}

/** 리마인드알림설정 **/
.requiredTime-col-wrap .form-group p label {
  font-weight: 800;
}

/* 상단 검색 */
.listSearchWrap>.panel {
  background-color: #ecf2f6;
}

.listSearchWrap>.panel .content {
  padding: 10px 20px;
}

.listSearchWrap .btn.btn-big {
  height: 28px;
  padding: 4px 10px;
  font-size: 13px;
}

.listSearchWrap .btn.btn-big i {
  margin-right: 2px;
}

.listSearchWrap .row.line {
  margin: 2px 0;
}

.listSearchWrap button+button {
  margin-left: 8px;
}

/* 테이블 */
.listTableWrap .buttonWrap {
  margin-bottom: 10px;
}

.listTableWrap .buttonWrap button+button {
  margin-left: 4px;
}

.listTableWrap .buttonWrap .btn-big+.btn-big {
  margin-left: 8px;
}


.form-field.form-address>div>.form-group>p {
  padding: 0 5px;
}

.form-field.form-address>div>.form-group>div {
  float: left;
  width: 33.33333333%;
  padding: 0 5px;
}

.form-field.form-address>div>.form-group>div:after {
  display: block;
  clear: both;
  content: '';
}

[fapane-size=sm] .form-field.form-address>div>.form-group>div.zipcode {
  float: none;
  width: 50%;
  margin-bottom: 10px;
}

[fapane-size=sm] .form-field.form-address>div>.form-group>div {
  width: 50%;
}

[fapane-size=xs] .form-field.form-address>div>.form-group>div.zipcode {
  float: none;
  width: 100%;
}

[fapane-size=xs] .form-field.form-address>div>.form-group>div {
  width: 100%;
  margin-bottom: 10px;
}

/* 아이콘이 있는 dl 리스트(가로) */
dl.circle-icon__list {
  display: table;
}

dl.circle-icon__list dt {
  float: left;
}

dl.circle-icon__list dd {
  float: left;
  position: relative;
  top: 2px;
}

dl.circle-icon__list dt:before {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  /* background-image: url('../images/circle_icon.png');
  background-position: 0px 0px; */
  background-repeat: no-repeat;
  content: '';
}

dl.circle-icon__list dt span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 3px;
  /* padding-right: 12px; */
}

/* 아이콘이 있는 dl 리스트(세로) */
dl.icon__list {
  display: table;
}

dl.icon__list dt {}

dl.icon__list dd {
  position: relative;
  top: 2px;
}

dl.icon__list dt:before {
  display: table-cell;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  /* background-image: url('../images/circle_icon.png');
  background-position: 0px 0px; */
  background-repeat: no-repeat;
  content: '';
}

dl.icon__list dt span {
  display: table-cell;
  vertical-align: middle;
  padding-left: 4px;
  padding-right: 12px;
}

/* 별점 */
.rate i {
  color: rgba(0, 0, 0, 0.2);
  font-size: 16px;
}

.rate i.filled {
  color: #ffce8b;
}

.rate.red i.filled {
  color: #ff9595;
}

/* 상세검색 */
.ksa_busi {
  position: relative;
  background: #fff;
  border: 0;
  width: 100%;
  padding-bottom: 10px;
  box-sizing: border-box;
}

/* 리스트 */
.total-item__wrap {
  display: table;
  height: 32px;
}

.total-item__wrap>span {
  display: table-cell;
  vertical-align: bottom;
  font-weight: 600;
}

.total-item__wrap>span .num {
  color: #1c69c7;
  font-weight: 800;
}

.srch-access__list {
  width: 270px;
}

.srch-access__list:after {
  display: block;
  clear: both;
  content: '';
}

.srch-access__list li {
  float: right;
  width: 33.3%;
}

.srch-access__list li a {
  width: 100%;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 0;
  border-right: 0;
  background-color: #fff;
  line-height: 32px;
  text-align: center;
}

.srch-access__list li:first-child a {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.srch-access__list li:last-child a {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.srch-access__list li.active a {
  border: 1px solid #1c69c7;
  background-color: rgba(28, 105, 199, 0.2);
  color: #1c69c7;
  font-weight: 800;
}

/** 고객관리 **/
.nice_btn {
  position: absolute;
  top: -4px;
  right: 0px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #1c69c7;
  background-color: transparent;
  color: #1c69c7;
  font-weight: 400;
  font-size: 12px;
}

.form-group .form-input.addr_input {
  float: left;
  width: calc(100% - 84px);
}

.btn.zipcode_btn {
  float: right;
  width: 76px;
  min-width: auto;
  height: 28px;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.circle.grade__badge {
  display: inline-block;
  width: 32px;
  height: 32px;
  /* background-color: #64b1ea; */
  color: #fff;
  line-height: 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

.grade__badge2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  min-height: 28px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 16px;
}

/** 고객사 정보 **/
.companyTitle {
  position: relative;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: #3d4864;
  margin: -1px -1px 0 -1px;
  color: #fff;
  padding: 22px 24px;
}

.companyTitle h2 {
  display: inline-block;
  margin-right: 20px;
  line-height: 40px;
  font-weight: 800;
  font-size: 24px;
  vertical-align: top;
}

.companyTitle ul {
  display: inline-block;
  line-height: 40px;
}

.companyTitle ul li {
  height: 40px;
}

.companyTitle ul li:not(:last-child):after {
  display: inline-block;
  color: rgba(255, 255, 255, 0.5);
  content: '|';
  margin: 0 8px 0 4px;
  position: relative;
  top: -16px;
}

.companyTitle dl {
  display: inline-block;
}

.companyTitle dl dt,
.companyTitle dl dd {
  line-height: 40px;
}

.companyTitle dl dt {
  font-weight: 600;
  margin-right: 8px;
}

.companyTitle dl dt:not(:first-child):before {
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 20px;
  background-color: #fff;
  content: '';
}

.companyTitle dl .circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #21293f;
  text-align: center;
  line-height: 24px;
}

.companyTitle dl .circle i {
  font-size: 16px;
}

.companyTitle button {
  position: absolute;
  top: 24px;
  right: 24px;
}

.companyInfo {
  padding: 20px 20px 10px 20px;
}

.companyInfo>div:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.companyInfo>div {
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.companyInfo>div>div {
  position: relative;
  padding: 10px 10px 10px 0
}

.companyInfo>div>div:not(:last-child):after {
  position: absolute;
  display: inline-block;
  top: 10px;
  right: 0;
  width: 1px;
  height: 75%;
  margin: 0 20px;
  background-color: rgba(0, 0, 0, 0.15);
  content: '';
}

.companyInfo dt {
  font-size: 13px;
  margin-bottom: 5px;
}

.companyInfo dt object {
  position: relative;
  top: 4px;
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.companyInfo dt i {
  position: relative;
  top: -2px;
  color: #1c69c7;
  margin-right: 3px;
}

.companyInfo dd {
  font-weight: 600;
  font-size: 22px;
}



.companyInfo dl dt:before {
  background-image: url('../images/companyInfo_icon.png');
}

.companyInfo dl.people dt:before {
  background-position: 0px 0px;
}

.companyInfo dl.year dt:before {
  background-position: -24px 0px;
}

.companyInfo dl.sales dt:before {
  background-position: -48px 0px;
}

.companyInfo dl.profit dt:before {
  background-position: -72px 0px;
}

.companyInfo dl.profit2 dt:before {
  background-position: -96px 0px;
}



.bizInfo {
  margin: 0 0 20px 0;
}

.bizInfo button.circle {
  width: 28px;
  height: 28px;
  margin-left: 8px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  line-height: 24px;
}

.bizInfo button.circle i {
  color: #29348e;
  font-size: 16px;
}

.bizInfoList ul {
  padding: 0 0 10px 20px;
  white-space: nowrap;
  overflow: hidden;
}

.bizInfoList ul li {
  position: relative;
  display: inline-block;
  min-width: 350px;
  max-width: 500px;
  margin-right: 8px;
  padding: 14px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  cursor: default;
}

.bizInfoList dl {
  white-space: nowrap;
}

.bizInfoList dl:not(:last-child) {
  margin-bottom: 5px;
}

.bizInfoList dl:after {
  display: block;
  clear: both;
  content: '';
}

.bizInfoList dl dt {
  display: inline-block;
  width: 75px;
  overflow: hidden;
}

.bizInfoList dl dd {
  display: inline-block;
  max-width: 330px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.companyOverview .panel {
  background-color: #f1f1f3;
  padding: 20px;
}

.companyOverview ul li {
  float: left;
  width: 50%;
}

.companyOverview ul li:not(:last-child) {
  margin-bottom: 14px;
}

.companyOverview ul li dt {
  display: inline-block;
  width: 80px;
  font-weight: 800;
  overflow: hidden;
}

.companyOverview ul li dd {
  display: inline-block;
  width: calc(100% - 84px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/** 그룹관리 **/
.ksacustGroupList md-sidenav {
  padding: 10px 20px;
  border-radius: 6px 0 0 6px;
  background-color: #ecf2f6;
}

.ksacustGroupList md-sidenav .btn.btn-icon {
  width: 20px;
  height: 20px;
  min-height: auto;
  margin-top: 2px;
  padding: 2px 0;
  border-radius: 0px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: rgba(0, 0, 0, 0.6);
  vertical-align: top;
}

.ksacustGroupList md-sidenav .btn.btn-icon i {
  position: relative;
  top: -1px;
}

.ksacustGroupList md-sidenav .circle.circle_xs {
  position: relative;
  top: -2px;
  background-color: #1c69c7;
  color: #fff;
}

/* 트리구조에서 텍스트 1라인으로 */
.tree-oneline__text {
  display: inline-block;
  width: calc(100% - 80px);
  /* text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; */
}

#tree-root li {
  margin: 6px 0;
  min-height: 24px;
  line-height: 24px;
}

#tree-root>ol>li {
  margin-bottom: 20px;
}

/* #tree-root > ol > li > div span { font-weight: 800; } */
/* #tree-root > ol > li > div i { margin-right: 4px; } */
#tree-root>ol>li>div span {
  font-weight: 800;
}

md-content {
  border-radius: 0 6px 6px 0;
  background-color: #fff;
  padding: 10px 20px;
}

/** 영업현황 **/
.drType {
  border-radius: 6px;
  border: 1px solid rgba(28, 105, 199, 0.5);
  background-color: rgba(28, 105, 199, 0.1);
}

.drType ul {
  width: 80%;
  margin: 0 auto;
}

.drType ul:after {
  display: block;
  clear: both;
  content: '';
}

.drType ul li {
  float: left;
  width: 20%;
  margin: 10px 0;
  white-space: nowrap;
}

.drType ul li .circle {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 2px;
  background-color: #1c69c7;
  color: #fff;
  line-height: 32px;
  text-align: center;
  font-size: 18px;
}

.drType ul li .text {
  color: #1c69c7;
  font-weight: 600;
}

.drType ul li .num {
  position: relative;
  top: 4px;
  margin-left: 6px;
  font-weight: 800;
  font-size: 24px;
}

/** 사업기회 **/
.op_tab ul {
  margin: 0 -10px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.op_tab ul::-webkit-scrollbar {
  display: none;
}

.op_tab ul li {
  display: inline-block;
  margin: 10px 0;
  padding: 0 10px;
}

.op_tab ul li a {
  position: relative;
  display: block;
  height: 48px;
  padding: 8px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  line-height: 32px;
  font-weight: 800;
  font-size: 18px;
}

.op_tab ul li a span {
  position: absolute;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.1);
  font-size: 14px;
}


/* 사업기회 진행단계 변경 모달 */
.chg-progress-step {
  margin-bottom: 10px;
  text-align: center;
}

.chg-progress-step>span {
  display: block;
  width: 100%;
  padding: 16px 20px;

  border-radius: 8px;
  background: #ff6180;
  color: #fff;

  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.chg-progress-step:last-child {
  margin-bottom: 0;
}

/* 사업일지 영업현황 */
.op_drType.drType {
  height: 56px;
  padding: 0;
}

.op_drType.drType ul {
  width: 100%;
}

.op_drType.drType ul li {
  height: 54px;
  line-height: 54px;
}

.op_drType.drType ul li .circle {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  padding: 8px 0;
  line-height: 18px;
}

.op_drType.drType ul li .circle i {
  font-size: 20px;
}

.op_drType.drType ul li .num {
  top: 2px;
  margin-left: 5px;
  font-size: 20px;
}

.op_drType.drType ul li:not(:last-child):after {
  height: 32px;
  top: 11px;
}

.op_drType.drType ul li .text {
  position: relative;
  top: 2px;
  margin-right: 0;
}


/** 영업일지 이력 **/
.business-dr-modal {
  padding-right: 0;
  margin-right: -1px;
  border-right: 1px solid #b2b2b2;
}

.business-dr-history {
  padding-left: 0;
  border-left: 1px solid #b2b2b2;
}

.business-dr-history .panel-header .content .clear {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.business-dr-history h2.panel_title {
  padding: 12px 0;
  background-color: transparent;
}

.business-dr-history .panel-body {
  overflow: auto;
}

.business-dr-history .content {
  padding: 0 16px;
}

.dr-history-item {
  padding: 15px 20px 20px 20px;
  margin-bottom: 20px;
  border-radius: 6px;
  border: 1px solid rgba(39, 59, 74, 0.15);
  cursor: default;
}

.memo-item-present {
  border: 1px solid #1c69c7;
  background-color: rgba(28, 105, 199, 0.05);
}

.business-dr-history .item-header {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(39, 59, 74, 0.1);
}

.business-dr-history .item-header:after {
  display: block;
  clear: both;
  content: '';
}

.business-dr-history .item-header .custom-checkbox-btn {
  float: left;
  margin-top: 9px;
  margin-right: 0;
}

.business-dr-history .item-header dl {
  float: left;
  margin-top: 5px;
  margin-right: 16px;
}

.business-dr-history .item-header dt,
.business-dr-history .item-header dd {
  float: left;
  line-height: 30px;
}

.business-dr-history .item-header dt {
  margin-right: 6px;
  font-weight: 600;
  font-size: 13px;
}

.business-dr-history .item-header dd .circle {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: rgba(28, 105, 199, 0.1);
  text-align: center;
  line-height: 28px;
  font-size: 18px;
  color: rgba(28, 105, 199, 0.8);
}

.business-dr-history .item-header dd .tb_state {
  min-width: auto;
  height: 28px;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
}

.business-dr-history .item-body p {
  font-size: 15px;
  line-height: 1.5em;
}

.business-dr-history .item-footer {
  margin-top: 10px;
}

.business-dr-history .item-footer span {
  color: rgba(0, 0, 0, 0.7);
  font-size: 12px;
}

/** 테이블 **/
.table_list {
  border-top: 2px solid #3d4864;
}

.table_list th,
.table_list td {
  /* padding: 8px 10px; */
  padding: 4px;
  text-align: left;
  cursor: pointer;
}

.table_list th {
  height: 36px;
  background-color: rgba(39, 59, 74, 0.05);
  font-weight: 800;
  font-size: 14px;
}

.table_list td {
  /* height: 50px; */
  height: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.2em;
}

.table_list th span.material-icons {
  margin-left: 5px;
  color: rgba(0, 0, 0, 0.4);
  /* line-height: 0.75em; 05-08 수정*/
  cursor: pointer;
}

.tbnodata {
  height: 52px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.2em;
}

.table_list .tb_state {
  cursor: pointer;
}

/* 테이블 내 상태 표시등 */
.tb_state {
  display: inline-block;
  /* min-width: 90px; */
  min-width: 60px;
  height: 30px;
  padding: 5px 8px;
  border-radius: 6px;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  cursor: default;
}

.tb_state i {
  font-size: 8px;
  margin-right: 3px;
}

.tb_state.st_orange {
  border: 1px solid #ffb34a;
  background-color: #fff8e4;
  color: #ff9a0e;
}

.tb_state.st_blue {
  border: 1px solid #6cb5eb;
  background-color: #e9f4fc;
  color: #64b1ea;
}

.tb_state.st_green {
  border: 1px solid #41c6a7;
  background-color: #e3f6f2;
  color: #41c6a7;
}

.tb_state.st_red {
  border: 1px solid #ff9595;
  background-color: #ffefef;
  color: #ff9595;
}

.tb_state.st_purple {
  border: 1px solid #434fa5;
  background-color: #ecedf6;
  color: #434fa5;
}

.tb_state.st_gray {
  border: 1px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.05);
  color:
    rgba(0, 0, 0, 0.5);
}

.stateList .tb_state {
  width: 70px;
  min-width: auto;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  line-height: 28px;
  font-weight: 800;
  font-size: 12px;
}

/** 테이블(중복고객통합) **/
.table_list2 th,
.table_list2 td {
  height: auto;
  /* padding: 15px 20px; */
  padding: 12px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.table_list2 th {
  background-color: rgba(0, 0, 0, 0.05);
  font-weight: 700;
  font-size: 14px;
}

.table_list2 td {
  /* min-height: 50px; */
  min-height: 0;
  font-size: 15px;
}

.table_list2 td:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

/** 캘린더 테이블 **/
table.tb_calendar {
  border: 1px solid rgba(0, 0, 0, 0.2);
}

table.tb_calendar thead th {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding: 15px 0 0 0;
  text-align: center;
}

table.tb_calendar thead th:last-child {
  border-right: 0;
}

table.tb_calendar tbody td {
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top !important;
  height: 160px;
  padding: 10px 15px;
}

table.tb_calendar tbody td:last-child {
  border-right: 0;
}

table.tb_calendar tbody tr:last-child td {
  border-bottom: 0;
}

table.tb_calendar tbody td .td_header {
  position: relative;
  padding: 0 15px 15px 15px;
  text-align: center;
}

table.tb_calendar tbody td .td_header .custom-checkbox-btn {
  position: absolute;
  left: 0;
  margin-right: 0;
}

table.tb_calendar tbody td .td_header .td_date {
  text-align: center;
  line-height: 20px;
}

table.tb_calendar tbody td .td_body input[type="text"] {
  color: #000;
  font-size: 14px;
}

/** 모달 텍스트박스 **/
.textBox p {
  font-weight: 400;
  font-size: 14px;
  line-height: 2em;
}

.error_msg {
  margin-top: 20px;
  text-align: center;
}

.error_msg p {
  font-size: 14px;
}

.msg {
  margin: 10px 0;
}

.msg p {
  font-weight: 400;
  font-size: 12px;
}

.msg a {
  color: #29348e;
  text-decoration: underline;
}

/** 테이블 (고객사 스코어 배점 기준) **/
.table_list td p {
  line-height: 1.5em;
}

/** 목록(플로우) **/
.flow_list:after {
  display: block;
  clear: both;
  content: '';
}

.flow_column {
  float: left;
  padding-right: 20px;
}

.flow_item {
  margin-bottom: 16px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background-color: #fff;
}

.flow_item dl:after {
  display: block;
  clear: both;
  content: '';
}

.flow_item dl dt,
.flow_item dl dd {
  float: left;
  margin-bottom: 8px;
}

.flow_item dl dt {
  width: 110px;
  font-weight: 700;
  font-size: 14px;
}

.flow_item dl dt .circle {
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  padding: 3px 0;
  background-color: #f8f8fe;
  color: #1c69c7;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
}

.flow_item dl dd {
  width: calc(100% - 120px);
  margin-left: 10px;
  line-height: 28px;
  font-weight: 400;
  font-size: 15px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flow_item .add_btn {
  height: 40px;
  border-radius: 10px;
  border: 1px solid #1c69c7;
  background-color: transparent;
  color: #1c69c7;
  font-weight: 500;
  font-size: 14px;
}

.progress-step-bottom {
  position: fixed;
  bottom: 10px;
  display: none;
  margin-left: -16px;
}

.progress-step-bottom ul li {
  width: 33%;
  height: 48px;
  padding: 0 5px;
  font-size: 24px;
}

.progress-step-bottom ul li>div {
  height: 100%;
  border-radius: 10px;
  text-align: center;
  line-height: 46px;
  font-weight: 500;
  font-size: 18px;
}

.progress-step-bottom .as-sortable-placeholder {
  display: none !important;
}

.progress-step-bottom ul li:nth-child(1) div {
  border: 2px solid #fa6868;
  background-color: #fee1e1;
  color: #fa6868;
}

.progress-step-bottom ul li:nth-child(2) div {
  border: 2px solid #ff9a0e;
  background-color: #ffeee1;
  color: #cf6f29;
}

.progress-step-bottom ul li:nth-child(3) div {
  border: 2px solid #91c9f2;
  background-color: #e9f4fc;
  color: #64b1ea;
}

.progress-step-bottom ul li:nth-child(1):hover div {
  background-color: #f99999;
}

.progress-step-bottom ul li:nth-child(2):hover div {
  background-color: #fdc16d;
}

.progress-step-bottom ul li:nth-child(3):hover div {
  background-color: #b4d9f5;
}

/** //목록(플로우) **/

/** 진행바 **/
.progressBar ul:after {
  display: block;
  clear: both;
  content: '';
}

.progressBar li {
  position: relative;
  float: left;
  width: 20%;
}

.progressBar li div {
  display: inline-block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  vertical-align: middle;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left: 0;
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
}

.progressBar li:first-child div {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.progressBar li:last-child div {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.progressBar li.focus div {
  border: 0;
  color: #fff;
}

/** //진행바 **/

/** 타임라인 **/
.timelineWrap .tl_tb {
  min-height: 200px;
}

.timelineWrap .tl_header {
  position: relative;
}

.timelineWrap .tl_header .tl_title {
  position: relative;
  width: 200px;
  margin: 20px auto;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
}

.timelineWrap .tl_header .tl_title i {
  color: rgba(0, 0, 0, 0.4);
}

.timelineWrap .tl_header .tl_title button {
  position: absolute;
  top: 0px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.timelineWrap .tl_header .tl_title button.prev_btn {
  left: 0;
}

.timelineWrap .tl_header .tl_title button.next_btn {
  right: 0;
}

.timelineWrap .tl_header .tl_title .title {
  display: inline-block;
  height: 32px;
  line-height: 26px;
  cursor: pointer;
}

.timelineWrap .tl_header .tl_title .datetime-input.date .edit-popover {
  left: -20px;
}

.timelineWrap .tl_header .tl_setting {
  position: absolute;
  top: 0;
  right: 0;
}

.timelineWrap .tl_header .tl_setting button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.4);
}

.timelineWrap .tl_header .tl_setting button i {
  font-size: 18px;
}

.timelineWrap .tl_header .tl_setting select {
  min-width: 80px;
  height: 32px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.timelineWrap .tl_body {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.tl_tb td {
  padding: 20px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  text-align: left;
  vertical-align: top !important;
}

.tl_tb td:last-child {
  border-right: 0;
}

.tl_tb td p {
  font-weight: 300;
  font-size: 14px;
  margin-bottom: 8px;
  text-align: center;
}

.tl_tb td div {
  margin: 15px 0;
}

td .circle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
  /* margin: 8px 6px; */
  margin: 4px;
  padding: 7px 0;
  background-color: #f2f3f7;
  color: #1c69c7;
  text-align: center;
  vertical-align: middle;
}

td .circle .alarm {
  position: absolute;
  top: -5px;
  left: 24px;
  min-width: 15px;
  padding: 2px 4px 2px 2px;
  border-radius: 2px;
  background-color: #41c6a7;
  color: #fff;
  text-align: center;
  font-weight: 300;
  font-size: 11px;
}

td .circle i {
  font-size: 18px;
}

td .yearly .circle {
  margin-bottom: 20px;
}

td .yearly .circle .alarm {
  top: auto;
  left: 50%;
  bottom: -20px;
  transform: translate(-50%, 0);
}


.pull-left.datetime-input {
  width: auto;
}

/** //타임라인 **/

/** 화의view **/
.meeting_view {
  height: 500px;
  overflow-y: auto;
}

.meeting_view_item {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.meeting_view_item h4 {
  line-height: 32px;
}

.meeting_view_item .btn.red_btn {
  width: 80px;
  height: 32px;
  font-size: 14px;
}

.meeting_view_item table div {
  margin-bottom: 20px;
  line-height: 1.5em;
}


/** 싱글뷰 **/
h3.sv_title {
  display: inline-block;
  height: 32px;
  /* margin: 10px 0 12px 0; */
  margin: 3px 0 5px 0;
  font-weight: 800;
  font-size: 18px;
  line-height: 32px;
}

h3.sv_title .desc {
  margin-left: 5px;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-size: 12px;
}


#clientDefaultInfo .panel {
  margin: 10px 0;
}

/** 싱글뷰 - 의견공유 **/
.op-contents-item {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding: 20px 0;
  font-size: 14px;
}

.op-contents-item .date {
  color: rgba(0, 0, 0, 0.5);
}

.op-contents-item .op-contents-cnt {
  margin: 15px 0 20px 0;
  font-size: 15px;
}

.cmt_option button {
  color: rgba(0, 0, 0, 0.4);
}

.op-comment-list,
.op-comment-item {
  width: 95%;
  margin: 20px auto 0 auto;
}

.cmt_option .dropdown-menu {
  left: -40px;
  min-width: auto;
}

/** 싱글뷰 - 그래프, 대시보드 **/
.dashboard .table_list {
  table-layout: fixed;
}

/* .dashboard .table_list td { height: 36px; } */
.dashboard_title .sv_title .btn,
.graph_title .sv_title .btn {
  position: relative;
  top: -2px;
  height: 32px;
  padding: 8px 16px;
  font-size: 12px;
  line-height: 1em;
}

.dashboard_title .more_btn {
  line-height: 32px;
  /* margin: 10px 0 12px 0; */
  margin: 3px 0;
}

.graph_title .more_btn {
  line-height: 32px;
}

/* .dashboard_title .sv_title .btn,
.graph_title .sv_title .btn {
  position: relative;
  top: -2px;
  height: 32px;
  padding: 8px 16px;
  font-size: 12px;
  line-height: 1em;
} */
.dashboard_title .sv_title .btn,
.graph_title .sv_title .btn,
.dashboard_title button.btn,
select.graph_select {
  min-width: 56px;
  height: 32px;
  margin: 3px 2px 5px 2px;
  /* margin: 10px 0 12px 0; */
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #000;
  font-size: 12px;
}

select.graph_select {
  padding: 3px 24px 3px 8px;
}

.dashboard .panel {
  min-height: 220px;
}

.graph_sub_panel>div {
  height: 170px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

#clientScoreChart,
#clientLevelChart {
  height: 173px;
}

[fapane-size=xs] .graph_sub_panel>div {
  margin-bottom: 30px;
  border-right: 0;
}

.graph_sub_panel>div:last-child {
  border-right: 0;
  margin-bottom: 0;
}

#clientScoreChart .desc {
  position: absolute;
  bottom: 6px;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
}

.graph_sub_panel h4.sub_title {
  margin: 0 0 12px 0;
  text-align: center;
  font-size: 14px;
}

.data_null {
  position: relative;
}

.graph_alert,
.graph_null {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  margin-top: -20px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.graph_alert i,
.graph_null i {
  font-size: 70px;
}

.data_null .graph_null i {
  font-size: 46px;
}

/* .graph_alert i { color: #ff9595; } */
/* .graph_null i { color:rgba(0, 0, 0, 0.2); } */
.graph_alert p,
.graph_null p {
  width: 100%;
  margin-top: 10px;
  font-weight: 600;
}

.graph_alert p span:not(:last-child):after {
  display: inline-block;
  margin: 0 5px;
  color: rgba(0, 0, 0, 0.2);
  font-size: 12px;
  content: '|';
}

li>.graph_null {
  margin-top: 0;
}

li>.graph_null i {
  font-size: 40px;
}

#clientScore .circle {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-weight: 500;
  font-size: 54px;
}

#clientRank ul li:not(:last-child) {
  margin-bottom: 10px;
}

#clientRank li dl {
  width: 100%;
}

#clientRank li dl dt {
  font-weight: 800;
  font-size: 13px;
  float: left;
}

#clientRank li dl dd {
  float: right;
}

#clientRank li dl dt:before {
  background-image: url('../images/circle_icon.png');
}

#clientRank li:nth-child(1) dl dt:before {
  background-position: 0px 0px;
}

#clientRank li:nth-child(2) dl dt:before {
  background-position: -26px 0px;
}

#clientRank li:nth-child(3) dl dt:before {
  background-position: -52px 0px;
}

#clientRank li:nth-child(4) dl dt:before {
  background-position: -78px 0px;
}

#clientRank li:nth-child(5) dl dt:before {
  background-position: -104px 0px;
}

[fapane-size=xs] #clientLevel .plot-container .svg-container {
  margin: 0 auto;
}

[fapane-size=xs] #clientLevel,
[fapane-size=xs] #clientRank {
  text-align: center;
}

/** 지도 **/
.map_wrapper {
  width: 100%;
  height: 520px;
}

.map-biz-info label {
  display: inline-block;
  margin: 0 6px 4px 0;
}

.map-biz-info .bar {
  margin-right: 8px;
}

.map_wrapper>#map_canvas,
.map_wrapper>#roadview {
  width: 100%;
  height: 100%;
}

.map_btn {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05);
  background-color: #fff;
  color: rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 1em;
  z-index: 1;
}

/* .map_btn:hover, */
.map_btn.active {
  background-color: #1c69c7;
  color: #fff;
}

.map_btn.distance {
  top: 20px;
  right: 22px;
}

.map_btn.streetview {
  top: 20px;
  right: 70px;
}

.map_btn.gps {
  top: 137px;
  right: 20px;
}

.map_btn.zoomin {
  border-radius: 0;
  top: 193px;
  right: 20px;
}

.map_btn.zoomout {
  border-radius: 0;
  top: 228px;
  right: 20px;
}

.map-list-wrap {
  overflow: auto;
  height: 500px;
}

.map-list-wrap ul.map-list li {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px 6px 6px 6px;
  margin-bottom: 6px;
  cursor: pointer;
}

.map-list-wrap .title {
  font-size: 15px;
}

.map-list-wrap .addr {
  margin: 8px 0 4px 0;
  color: rgba(0, 0, 0, 0.5);
  line-height: 1.2em;
  font-size: 12px;
}

.map-list__item dl dt {
  margin-right: 8px;
}

.map-list-wrap .paging a,
.map-list-wrap .paging strong {
  /* width: 25px; */
  /* 05.03 수정 */
  height: 25px;
  padding: 5px 0;
}

.map-list-wrap .pagination>.active>a,
.map-list-wrap .pagination>.active>span,
.map-list-wrap .pagination>.active>a:hover,
.map-list-wrap .pagination>.active>span:hover,
.map-list-wrap .pagination>.active>a:focus,
.map-list-wrap .pagination>.active>span:focus {
  width: 25px;
}

.map-list-wrap .paging .prev {
  background-position: -48px -126px;
}

.map-list-wrap .paging .first {
  background-position: -5px -126px;
}

.map-list-wrap .paging .next {
  background-position: -88px -126px;
}

.map-list-wrap .paging .last {
  background-position: -132px -126px;
}

.map-list-wrap>.custom-checkbox-btn {
  margin: 0 6px;
}


/** 지도 api **/
.dot {
  overflow: hidden;
  float: left;
  width: 12px;
  height: 12px;
  background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/mini_circle.png');
}

.dotOverlay {
  position: relative;
  bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  border-bottom: 2px solid #ddd;
  float: left;
  font-size: 12px;
  padding: 5px;
  background: #fff;
}

.dotOverlay:nth-of-type(n) {
  border: 0;
  box-shadow: 0px 1px 2px #888;
}

.number {
  font-weight: bold;
  color: #ee6152;
}

.dotOverlay:after {
  content: '';
  position: absolute;
  margin-left: -6px;
  left: 50%;
  bottom: -8px;
  width: 11px;
  height: 8px;
  background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white_small.png')
}

.distanceInfo {
  position: relative;
  top: 5px;
  left: 5px;
  list-style: none;
  margin: 0;
}

.distanceInfo .label {
  display: inline-block;
  width: 50px;
  color: #000
}

.distanceInfo:after {
  content: none;
}


/** 휴일관리 **/
.monthList li {
  margin-bottom: -1px;
}

.monthList .btn {
  width: 40px;
  height: 28px;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-right: -1px;
  /* border-right: 0px; */
  background-color: #fff;
}

.monthList li:last-child .btn {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.monthList .btn.active {
  background-color: #1c69c7;
  color: #fff;
  box-shadow: none;
}


/** 캠페인 - 세그먼트 **/
.segmentList li.input-item {
  height: 32px;
  margin: 4px 8px 0 0;
  padding: 8px;
  font-size: 14px;
  line-height: 16px;
}

/** 캠페인관리 - 타게팅 목록 **/
.campaignTargetList>ul {
  margin: 0 -10px;
}

.campaignTargetList>ul:after {
  display: block;
  clear: both;
  content: '';
}

.campaignTargetList>ul>li {
  position: relative;
  float: left;
  width: calc(20% - 20px);
  height: 340px;
  margin: 0 10px 20px 10px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

@media (max-width: 1720px) {
  .campaignTargetList>ul>li {
    width: calc(25% - 20px);
  }
}

@media (max-width: 1430px) {
  .campaignTargetList>ul>li {
    width: calc(33.3% - 20px);
  }
}

@media (max-width: 1200px) {
  .campaignTargetList>ul>li {
    width: calc(50% - 20px);
  }
}

@media (max-width: 992px) {
  .campaignTargetList>ul>li {
    width: calc(100% - 20px);
  }
}

.targetList_header:after {
  display: block;
  clear: both;
  content: '';
}

.targetList_header .circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  text-align: center;
  line-height: 21px;
  cursor: pointer;
}

.targetList_header .circle i {
  color: rgba(0, 0, 0, 0.3);
  font-size: 15px;
}

.targetList_header .circle.favorite i {
  color: #ff4848;
}

.targetList_header .text_btn i {
  color: rgba(0, 0, 0, 0.4);
  font-size: 22px;
}

.targetList_footer button+button {
  margin-left: 8px;
}

.targetList_content h2.title {
  height: 60px;
  margin: 6px 0;
  text-align: center;
  line-height: 1.2em;
  font-weight: 800;
  font-size: 24px;
}

.targetList_content p.desc {
  height: 48px;
  margin: 14px 0;
  color: #000;
  font-size: 14px;
  line-height: 1.6em;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* 라인수 */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}

.targetList_content .item_list ul {
  margin: 0 -2px;
}

.targetList_content .item_list ul:after {
  display: block;
  clear: both;
  content: '';
}

.targetList_content .item_list ul li {
  float: left;
  margin: 2px;
  padding: 6px 8px;
  border-radius: 6px;
  background-color: #f2f3f7;
  font-size: 13px;
}

.targetList_content .item_list ul li.more {
  background-color: rgba(106, 121, 227, 0.1);
  color: #29348e;
  font-weight: 800;
  font-size: 12px;
}

.targetList_footer {
  position: absolute;
  bottom: 0;
  padding: 20px 0 32px 0;
}

.targetList_footer .btn.default_btn {
  width: 120px;
}

.targetList_footer .btn.default_btn i {
  color: rgba(0, 0, 0, 0.3)
}

.targetList_footer .btn i {
  position: relative;
  top: -1px;
  margin-right: 2px;
}

.targetList_footer dl.customerNum {
  position: relative;
  display: inline-block;
  width: 120px;
  margin-right: 8px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  height: 32px;
  vertical-align: middle;
}

.targetList_footer dl.customerNum:after {
  display: block;
  clear: both;
  content: '';
}

.targetList_footer dl.customerNum dt {
  float: left;
  font-weight: 800;
  font-size: 12px;
  line-height: 32px;
}

.targetList_footer dl.customerNum dd {
  float: right;
  font-size: 12px;
  line-height: 32px;
}

/** 캠페인 관리 - 조건 검색 투입 (모달) **/
#extCustWrap .col {
  height: 600px;
}

#extCustWrap .col .col_content {
  height: 560px;
}

/* 현재기준고객수 */
.ec_cust_list .form-group {
  margin-bottom: 20px;
}

.ec_cust_list .form-group a {
  display: block;
}

/** 공지사항 비밀번호 입력창 **/
.pw_field {
  width: 95%;
  max-width: 500px;
  margin: 0 auto;
  padding: 50px 0 50px 0;
  text-align: center;
}

.pw_field h2 {
  font-weight: 800;
  font-size: 24px;
}

.pw_field input[type="password"] {
  width: 100%;
  height: 36px;
  max-width: 240px;
  margin: 0 auto;
}

.pw_field button+button {
  margin-left: 8px;
}


/** 커스텀 row (ex. 조건검색투입) **/
.custom_row {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 0;
}

.custom_row:after {
  display: block;
  clear: both;
  content: '';
}

.custom_row .col {
  float: left;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.custom_row.col_in_2 .col {
  width: 50%;
}

.custom_row.col_in_3 .col {
  width: 33.3333333%;
}

.custom_row .col .col_header {
  height: 40px;
  background-color: #1c69c7;
  color: #fff;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

.custom_row .col .col_content {
  padding: 20px 24px;
  overflow-y: auto;
}

/** 트리 구조 **/
.tree>li {
  font-size: 14px;
}

.tree>li {
  border-top: 1px solid #e5e5e5;
}

.tree>li:first-child {
  border-top: 0;
}

.tree>li>a {
  height: 40px;
  margin-bottom: -1px;
  border-bottom: 1px solid #e5e5e5;
  line-height: 40px;
  font-weight: 800;
}

.tree>li a {
  display: block;
}

.tree>li a:after {
  display: block;
  clear: both;
  content: '';
}

.tree>li>a i {
  color: rgba(0, 0, 0, 0.4);
}

.tree__depth2 {
  margin: 12px 20px;
}

.tree__depth2>li {
  line-height: 2em;
}

/* 세그먼트 */
.segment_list ul li {
  margin-bottom: 8px;
  border-radius: 6px;
  border: 1px solid rgba(106, 121, 227, 0.8);
  background-color: rgba(106, 121, 227, 0.05);
}

.segment_list ul li a {
  display: block;
  padding: 8px 12px;
}

.segment_list ul li a:after,
.segment_list ul li dl:after {
  display: block;
  clear: both;
  content: '';
}

.segment_list ul li dt {
  float: left;
  width: 110px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.segment_list ul li dd {
  float: left;
}

.segment_list button.close_icon {
  margin-top: 2px;
  background-color: #ff9595;
  color: #fff;
}


/** 즐겨찾기 관리 **/
#bookmarkWrap .select_btn {
  position: absolute;
  left: -18px;
  right: auto;
  top: 56px;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: #fff;
  color: #1c69c7;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.2);
}

#bookmarkWrap .select_btn i {
  position: relative;
  left: 1px;
  font-size: 20px;
}

#bookmarkWrap .col {
  height: 600px;
}

#bookmarkWrap .col .col_content {
  height: 560px;
}

#bookmarkWrap .col.favoriteWrap {
  position: relative;
}

.ksacustGroupList .bookmark__sidenav {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;

  width: 720px;
  max-width: 720px;
  padding: 0;
  background-color: #fff;
}

.bookmark__sidenav #bookmarkWrap.custom_row {
  border: 0;
}


/** 고객통계 **/
.report__list {
  position: relative;
  padding: 10px 20px;
}

.report__list ul {
  display: inline-block;
  width: calc(100% - 32px);
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.report__list ul::-webkit-scrollbar {
  display: none;
}

.report__list .report__item {
  display: inline-block;
  margin: 1px 4px 1px 0;
}

.report__list .report__item a {
  display: inline-block;
  height: 30px;
  padding: 0 10px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  line-height: 30px;
}

.report__list .report__item.focus a {
  border: 1px solid rgba(28, 105, 199, 0.1);
  background-color: rgba(28, 105, 199, 0.1);
  color: #1c69c7;
  font-weight: 600;
}

.report__list .report__item.focus a:before {
  display: inline-block;
  margin-right: 5px;
  font-family: 'Material Icons';
  content: '\e876';
  vertical-align: middle;
}

.report__btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

/** 캠페인 통계 **/
.stats__list {
  margin: 0 -6px;
}

.stats__list:after {
  display: block;
  clear: both;
  content: '';
}

.stats__list li {
  float: left;
  width: 188px;
  height: 95px;
  margin: 3px 6px;
  padding: 16px 12px;
  border-radius: 6px;
  color: #fff;
}

.stats__list dl dt .circle {
  width: 28px;
  height: 28px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
}

.stats__list dl dd {
  margin-left: 30px;
  font-weight: 600;
  font-size: 28px;
}

.stats__list li:nth-child(1) {
  background-color: #393838;
}

.stats__list li:nth-child(2) {
  background-color: #1c69c7;
}

.stats__list li:nth-child(3) {
  background-color: #29348e;
}

.stats__list li:nth-child(4) {
  background-color: #3d4864;
}

.stats__list li:nth-child(5) {
  background-color: #2289a6;
}

/** 지도 - 회사 정보 **/
.company-info__bubble {
  position: relative;
  /* bottom: 58px; */
  top: -48px;
  width: 148px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #1c69c7;
  background-color: #fff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}

.company-info__bubble.short {
  display: inline-block;
  width: auto;
}

.company-info__bubble .bubble-btn__wrap {
  position: absolute;
  top: -32px;
  left: 0;
}

.company-info__bubble .bubble-btn__wrap .bubble__btn {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid #1c69c7;
  background-color: #fff;
  color: #1c69c7;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.company-info__bubble .bubble-btn__wrap .bubble__btn2 {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid #1c69c7;
  background-color: #fff;
  color: #1c69c7;
  line-height: 28px;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.company-info__bubble .bubble__header {
  margin-bottom: 5px;
}

.company-info__bubble .bubble__header .text_btn i {
  font-size: 16px;
}

.company-info__bubble .bubble__body .bubble-title i {
  position: relative;
  font-size: 16px;
  color: #1c69c7;
}

.company-info__bubble .bubble__body .bubble-title span {
  position: relative;
  top: 2px;
  display: inline-block;
  width: calc(100% - 16px);
  line-height: 1.2em;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.company-info__bubble .bubble__body .line {
  margin: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.company-info__bubble .bubble__body .bubble-info dt {
  width: 50px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.company-info__bubble .bubble__body .bubble-info dd {
  width: calc(100% - 50px);
  text-align: right;
  font-size: 12px;
}

.company-info__bubble:after {
  display: inline-block;
  content: '';
  width: 10px;
  /* 사이즈 */
  height: 10px;
  /* 사이즈 */
  border-top: 1px solid #1c69c7;
  /* 선 두께 */
  border-right: 1px solid #1c69c7;
  /* 선 두께 */
  background-color: #fff;
  transform: rotate(135deg);
  /* 각도 */
  position: absolute;
  bottom: -6px;
  /* 기본 0px 값으로 해주세요 */
  left: 46.5%;
  /* 기본 0px 값으로 해주세요 */
}


/** 기본정보관리 - 역할관리 **/
.sortableContainer>.sortable-row.sortable-root-scope {
  padding: 0;
  background: transparent;
  border: 0;
}

/** 사용자정의화면 수정 **/
.sortable-root-scope {
  border: 0;
}




/* 2023-05-03 지도 */

.modal-body>.map-body {
  padding: 18px 10px 12px 10px;
  background: #F5FAFE;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  margin: 0 20px;
}

label.label-name {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;


}

.form-group>label.label-name:first-child {
  margin-top: 0;
}

.modal-body>.map-body>.content {
  padding: 0;
}

/* .panel-body> .map-search-btn-wrap{
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
} */

/* .map-search-btn-bottom{
  margin-top: 12px;
  margin-bottom: 0;

} */

/* 지도위에 아이콘 + 텍스트 */
.map-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.map-info-txt {
  font-size: 11px;
}

/* 지도 주소 화살표 */
.form-group>.address-info-group select {
  background: url(../images/expand_more.png) no-repeat 98% 50%;
  background-color: #FFFFFF;
}

.form-group>.address-info-group .form-control[disabled] {
  background-color: #f1f3f5;
}


/* 지도화면 */

.map-list-wrap {
  padding: 0 10px;
}

.icon_map_btn_wrap {
  display: flex;
  flex-direction: row;
  gap: 4px;
  justify-content: center;
  align-items: center;
}

.map-info-color {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.map-color-box {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.map-info-color>span {
  font-size: 11px;
  font-weight: 400;
}

.btn_ks>.map-color-box {
  background: #1C69C7;
}

.btn_ISO>.map-color-box {
  background: #EB6464;
}

.btn_company>.map-color-box {
  background: #28C76F;
}

.btn_jo>.map-color-box {
  background: #7A6EF1;
}

/* 조회할 데이터 없습니다*/
.map-list-wrap>.map-list {
  height: 100%;
}

.no-data-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #F5F5F5;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  /* margin: auto 16px; */
}

/* 위치정보 지도 주소 */

.address-info-group .half:nth-of-type(1) {
  float: left;
}

.address-info-group .half:nth-of-type(2) {
  float: right;
}

/* 지도 모달창  */
@media screen and (min-width:1220px) {
  .ctrl-kakaomapconfigmodalctrl-wrap .modal-dialog {
    width: 1200px;
  }
}

/* 내문서함 */
.document-main-wrap {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;

}

.bg-circle-icon {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;


}

.bg-circle-icon>i {
  position: absolute;
  color: #FFFFFF;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.documnet-main-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;

}

.document-main-txt {
  font-size: 18px;
  font-weight: 700;


}

.documnet-main-txt-wrap .document-main-num {
  font-size: 16px;
  font-weight: 700;
  color: #1C69C7;
}

/* .document-main-num:hover{
  color: #1C69C7;

}
 */

.info-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  width: 100%;
  min-height: 82px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

.info-box-txt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 13px;
  color: #0C2C54;
  word-break: break-all;
  text-align: center;
}

.info-box-num {
  width: 100%;
  min-height: 32px;
  background-color: #E9F4FC;
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  line-height: 32px;

}

.info-box-num a {
  width: 100%;
  color: #64B1EA;
}

.info-box-num a:hover {
  color: #1C69C7;
}

/* 안에 숫자  */
.bg-number {
  width: 100%;
  height: 32px;
  background-color: #E9F4FC;

}

/* 나의 문서함 정렬--------- */
.list-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
}

.list-flex-row>.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.list-flex-row>.year-sales {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.info-box-wrap {
  display: flex;
  gap: 10px;
}

@media screen and (max-width:360px) {
  .info-four-box {
    flex-wrap: wrap;
  }

  .info-four-box>.info-box {
    flex: 45%;
  }

}

/* 대시보드  */
.customer-info-wrap {
  padding: 10px 20px;
}

/* 대시보드 sub-title */
p.sv_title2 {
  /* font-family: 'Malgun Gothic'; */
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
}

svg.excel-down {
  width: 20px;
  height: 20px;

}

.button_icon {
  display: flex;
  flex: row;
  justify-content: center;
  align-items: center;
  gap: 2px;

}

/* 대시보드 차트버튼 */
.report-line-wrap {
  padding-left: 0;
  margin-bottom: 20px;
  width: 100%;

}

.report-line-wrap>ul {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.report-line-wrap>ul {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.report-line-wrap ul::-webkit-scrollbar {
  display: none;
}

.report-line-wrap li {
  position: relative;
  display: inline-block;
  padding: 0 20.5px;
}

.report-line-wrap li a {
  display: inline-block;
  line-height: 30px;
}

.report-line-wrap li.focus a {
  color: #1c69c7;
  font-weight: 700;
  /* border-bottom: 3px solid #1C69C7; */
}

.report-line-wrap li.focus a::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 3px;
  background-color: #1C69C7;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);

}

/* 대시보드 타이틀 */
.dashboard_title {
  margin-bottom: 12px;
}

.top-srch-access__list {
  width: 320px;
}

.top-srch-access__list li {
  width: 25%;
}

.srch-access__list li a {
  border-left: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

/* 캠페인 버튼*/
.camp-btn-wrap {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.camp-btn {
  display: inline-block;
  width: 100%;
  color: #FFFFFF;
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.camp-btn:hover,
.camp-btn:focus {
  color: #FFFFFF;
}

.camp-btn:first-child {
  background-color: #64B1EA;

}

.camp-btn:last-child {
  background-color: #28C76F;
}

.camp-btn>span {
  height: 22px;
  line-height: 22px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 0 4px;

}

/* 대시보드 정렬 */
.dashboard-flex-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-right: -6px;
  margin-left: -6px;
}

.dashboard-flex-row>.panel {
  flex: 1;
}

.dashboard-flew-row-center {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  */
@media (max-width: 1260px) {
  .boashboard_title-bottom {
    margin-bottom: 52px;
  }
}

/* 영업일지 목록 텍스트 버튼  */
tbody>tr>td.cols-body-DRTitle .btn-primary,
tbody>tr>td.cols-body-ClientNm .btn-primary,
tbody>tr>td.cols-body-EncryptNms .btn-primary {
  border: none;
  background: none;
  font-family: 'Noto Sans KR';
  color: #000 !important;
  font-size: 15px;
  padding: 0;
  white-space: unset;
  word-break: break-all;
  text-align: left;
}

/*tbody > tr > td.cols-body-EncryptNms .btn-primary:hover{*/
/*  background: none;*/

/*}*/
tbody>tr>td.cols-body-DRTitle .btn-primary:hover,
tbody>tr>td.cols-body-ClientNm .btn-primary:hover,
tbody>tr>td.cols-body-EncryptNms .btn-primary:hover {
  border: none;
  background: none;
  color: #0461c5 !important;
  font-size: 15px;
  padding: 0;
  text-decoration-line: underline;
}

.customer-list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.customer-list tr td:first-of-type {
  color: #808080;
}

/* 고객사 목록 */
.customer-img {
  text-align: center;
}

.customer-img>i {
  font-size: 100px;
  margin-bottom: 20px;
  color: gray;
  text-align: center;
  cursor: default;
}


.customer-list-wrap>.table_list {
  border: none;
}

.customer-list-wrap>.table_list td {
  border: none;
  height: 30px;
}

.customer-list-wrap>.table_list td:first-child {
  font-size: 13px;
}

/* 부서 */
.user-row {
  justify-content: flex-start;
}

.user-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-container>.user-img {
  position: relative;
}

.user-container>.user-img input {
  position: absolute;
  top: 0;
  left: 4px;
}


.user-container>.user-img i {
  color: #bdbbbb;
  border: 1px solid #E0E0E0;
  font-size: 50px;
  border-radius: 6px;
  cursor: default;
}

.checkbox-container {
  flex-basis: 16.66%;
}

/* 확인버튼 호버 */
.content .btn-primary-hover:hover {
  color: #FFF !important;
}

/* 고객사 고객구분 */
td.cols-BusiInfo button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  background: none;
  border: none;
}

td.cols-BusiInfo button span {
  color: #000;
}

td.cols-BusiInfo button:hover {
  background: none;
  border: none;
}

td.cols-BusiInfo button span.businfo-box-O {

  width: 100%;
  color: #FFF;
  padding: 2px 5px;
  border: 1px solid #1cade4;
  background: #1cade4;
  border-radius: 2px;

}

td.cols-BusiInfo button span.businfo-box-X {

  width: 100%;
  color: #000;
  border: 1px solid #aaa;
  padding: 2px 5px;
  background: #FFF;
  border-radius: 2px;


}

/* 영업일지 모달 */
.panel-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
  padding: 0 10px;

}

.panel-modal-header .input-group {
  display: flex;
  flex-direction: row;

}

.header-button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0;
}

.panel-modal-header .form-group .input-modal {
  width: 100%;
  min-width: 50px;
  height: 32px;
  border-radius: 6px;

}

.panel-modal-header .form-group .input-modal+button {
  margin-left: 5px;
}

.panel-footer {
  background: #FFF;
  text-align: right;
}

.modal-panel-body {
  height: 380px;
}

.modal-panel-body md-content {
  padding: 10px;
}

.modal-paging-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.modal-paging-wrap .modal-input-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.modal-paging-wrap .btn-group {
  display: flex;
  flex: 1;
  padding: 0;
  flex-wrap: nowrap;
}

.modal-paging-wrap .form-group {
  flex: 1;
  margin: 0;
}

.modal-paging-wrap .form-group .input-group .input-modal {
  text-align: right;
}

.modal-paging-wrap .form-group .input-modal {

  height: 32px;
  border-radius: 6px;
  width: 45px;
}

.panel-modal-header .checkbox-group {
  display: flex;
  align-items: center;
}

.panel-modal-under-header {
  padding: 5px 10px;
  justify-content: flex-start;
  gap: 20px;
}

.preview-option-btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.modal-panel-wrap {
  display: flex;
  gap: 10px;
}

.modal-panel-wrap .modal-panel {
  flex: 1;
}

.panel-modal-header .form-group .button-group {
  display: flex;
  flex-wrap: nowrap;
}

.modal-panel .noline_btn {
  min-width: 50px;
  border: none;
}


.modal-contentz {
  padding-left: 10px;
  padding-right: 10px;
}

@media (max-width: 1539px) {
  .reset-button {
    display: none;
  }
}

@media (max-width: 1450px) {
  .search-button {
    display: none;
  }
}


.custom-row-height td {
  margin: 0;
  padding-top: 0;
  /* 상단 패딩을 조정하여 간격을 줄입니다. */
  padding-bottom: 0;
  /* 하단 패딩을 조정하여 간격을 줄입니다. */
  /*   font-size: 0.8em; */
}

.table_listz tr td {
  height: 30px;
  /* 원하는 높이 값으로 설정하세요. */
  line-height: 30px;
  /* 라인 높이도 동일하게 설정하여 텍스트가 중앙에 위치하도록 합니다. */
  white-space: nowrap;
  /* 텍스트가 셀을 넘어가지 않게 합니다. */
  overflow: hidden;
  /* 넘치는 부분은 숨깁니다. */
  text-overflow: ellipsis;
  /* 넘치는 텍스트를 ...으로 표시합니다. */
  border-bottom: 1px solid #e0e0e0;
  /* 연한 선 색상으로 설정 */
}

.table_listz tr {
  border-bottom: 1px solid #e0e0e0;
  /* 연한 선 색상으로 설정 */
}

.table_listz tr:last-child {
  border-bottom: none;
  /* 마지막 줄에는 선을 추가하지 않음 */
}


.custom-cursorz .plotly-graph-div .nsewdrag {
  cursor: pointer !important;
}


.js-plotly-plot .plotly .nsewdrag {
  cursor: pointer !important;
}

.table th,
.table td {
  border: 1px solid #e0e0e0;
  /* 경계선 색상을 옅은 회색으로 설정 */
}

.sms_mail tr {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 50px;
}



/* 모달, 사업기회:복제 */
.modal-dialog.modal-normal .modal-content2 {
  width: 1200px !important;
}


.modal-content2 {
  padding: 10px 0 !important;
  border-radius: 20px;
  width: 1230px;
}


#secarr {
  margin-left: -12px;
}

#secsend {
  margin-left: -12px;
  margin-top: -25px;
}

#senddeny {
  margin-top: 5px;
}

#previewClose {
  position: absolute;
  top: 10px;
  right: 10px;
}

#previewMargin {
  width: 800px;
  margin: 0 auto;
  position: relative;
  padding: 5px 20px;
}

#contentArea {
  max-height: 800px;
  overflow-y: auto;
  overflow-x: hidden;
  word-wrap: break-word;
}

.dropdown-wrapper {
  position: relative;
  display: inline-block;
}

.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;

  background: #fff;
  border: 1px solid #ccc;
  padding: 8px 10px;
  z-index: 1000;

  min-width: max-content;
  max-width: 420px;

  text-align: left;
}

.dropdown-panel label {
  display: flex;
  align-items: center;
  gap: 6px;

  white-space: nowrap;
  cursor: pointer;

  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
}

.dropdown-panel input[type="checkbox"] {
  margin: 0;
  flex-shrink: 0;
}

.arrow-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0;
}
.btn-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #d6dae3;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5a6072;
  font-size: 16px;
  line-height: 1;
  padding-bottom: 2px;
  transition: all .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.btn-arrow:hover {
  background: #3b5bdb;
  border-color: #3b5bdb;
  color: #fff;
  box-shadow: 0 2px 8px rgba(59,91,219,.3);
}
.btn-arrow.remove:hover {
  background: #e03131;
  border-color: #e03131;
}

.btn-sm {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #d6dae3;
    background: #fff;
    color: #5a6072;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
  }

  .btn-sm:hover { background: #f1f3f7; border-color: #b0b8c8; color: #1a1d23; }

  .panel-header2 {display: flex;align-items: center; justify-content: end; padding: 10px 14px; gap: 6px;}