@charset "UTF-8";
.part-box {
  padding-top: 40px;
}

.part-tit {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.part-box .list-top .part-tit {
  margin-bottom: 0;
  line-height: 30px;
}

.table-type.verti tbody td textarea {
  width: 100%;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 150px;
}

.post-area .post-header .post-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.title-sort {
  padding: 0 10px;
  height: 25px;
  line-height: 23px;
  border-radius: 0;
  font-size: 12px;
  margin-right: 13px;
  border: 1px solid var(--dlsp-subC-color);
  color: var(--dlsp-subC-color);
  display: inline-block;
}

.table-type .title-sort {
  margin-right: 6px;
}

.faq-list ul li {
  border: 1px solid #ececec;
  margin-bottom: 15px;
  -webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.faq-list ul li > div {
  padding: 20px;
}

.faq-list ul li h1, .faq-list ul li p {
  display: inline-block;
}

.faq-list ul li p, .faq-list ul li span {
  vertical-align: middle;
}

.faq-list ul li h1 {
  font-size: 24px;
  margin-right: 10px;
}

.faq-list ul li .question {
  cursor: pointer;
}

.faq-list ul li .question span {
  font-size: 27px;
  float: right;
}

.faq-list ul li .answer {
  background-color: #f5f5f5;
  display: none;
}

.faq-list ul li .answer h1 {
  color: var(--cc-mainA-color);
}

.qna-list .table-guide .table-info {
  margin-bottom: 10px;
}

.qna-list .table-guide .table-info p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.qna-list .table-guide .table-info p span.number {
  margin-left: 5px;
  margin-right: 1px;
}

.qna-list .table-guide .table-info .btn-type {
  float: right;
}

.qna-list .table-guide .table-type {
  width: 100%;
}

.qna-list .table-guide .table-type th, .qna-list .table-type td {
  min-width: 0;
}

/* .search-box .search-inner .label-box.txt-lbl, */
/* .search-box .search-inner .label-box .txt { */
/*   width: 100%; */
/* } */
.post-area .table-type .label-box {
  float: left;
}

.post-area .table-type .txt-lbl, .post-area .table-type .select-box, .post-area .table-type .text-box {
  width: 100%;
}

.table-type.verti tr:hover {
  background-color: #fff;
}

.table-type .rdo-lbl, .table-type .chk-lbl {
  display: inline-block;
}
.table-type .rdo-lbl input:focus + label, .table-type .rdo-lbl input:checked + label, .table-type .chk-lbl input:focus + label, .table-type .chk-lbl input:checked + label {
  color: inherit;
}

.table-type .select-box, .table-type .txt {
  width: 100%;
}

/* 0321 */
.table-type.pad10 th, .table-type.pad10 td {
  padding: 10px;
}

.search-area .search-box.type-3 .search-inner.f20 {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 20%;
          flex: 1 1 20%;
}

.search-area .search-box .lbl-txt {
  -ms-flex-preferred-size: 70px;
      flex-basis: 70px;
  line-height: 40px; /* min-width: 90px; */
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-right: 0;
}

.wid50 {
  width: 50% !important;
}

.part-box .text-box {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.layerPop {
  width: 100%;
  max-width: 905px;
  height: auto;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 100;
  display: none;
  -webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.2);
  border-radius: 5px 5px 0 0;
  border-radius: 5px;
}

.layerPop.big {
  max-width: 1400px;
}

.layerPop .box:last-child {
  margin-bottom: 0;
}

.layerPop .layerPopTop {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 20px;
  border-bottom: 1px solid #e2e2e2;
  background-color: var(--cc-mainA-color);
  border-radius: 5px 5px 0 0;
}

.layerPop .layerPopTop h4 {
  display: inline-block;
  line-height: 60px;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  min-height: 60px;
}

.layerPop .layerPopTop a {
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: #7b7b7b;
  font-size: 24px;
}

.layerPop .layerPopTop a:hover {
  text-decoration: none;
}

.layerPop .layerPopBody {
  width: 100%;
  height: auto;
  max-height: 450px;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
  margin-top: 1px;
}

.layerPop .layerPopBody .row {
  margin-bottom: 0;
}

.layerPop .layerPopBtm {
  width: 100%;
  height: auto;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 20px;
  border-top: 1px solid #e2e2e2;
}

.layerPop.sm {
  max-width: 350px;
  z-index: 102;
}

.layerPop.sm .layerPopBody {
  padding: 50px 20px;
  text-align: center;
}

.layerPop.sm .layerPopBtm {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.layerPop .search-area {
  padding: 10px 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #f7f7f7;
}

.pop-btn{
	display: flex;
    justify-content: end;
}

/* 231018 예측분석 */
.layerPop.md {
  max-width: 1200px;
  height: 650px;
}

.layerPopBody .layer-wrap-table{
    position: relative;
    width: 100%;
    height: 380px;
    max-height: 430px;
    overflow-y: auto;
/*     border-top: 3px solid var(--cc-mainB-color); */
/*     border-bottom: 1px solid var(--cc-mainB-color); */
}

.layerPopBody .layer-wrap-table .layer-table{
    width: 100%;
    border-spacing: 0;
    text-align: center;
    border-collapse: collapse;
}
.layerPopBody .layer-wrap-table .layer-table thead{
    position : relative;
    background-color : #fff;
}

.layerPopBody .layer-wrap-table .layer-table thead tr{
    position: sticky;
    background-color: #fff;
    top: 0;
    left: 0;
    height: 50px;
/*     border: none; */
/*     outline: none; */
}
.layerPopBody .layer-wrap-table .layer-table thead tr th{
    border-top:none !important;
    border-bottom:none !important;
}
.layerPopBody .layer-wrap-table .layer-table thead tr th:before {
	position:absolute;
	height:1px;
	content:"";
	width:100%;
	top:0;
	right:0;
	background: var(--cc-mainB-color);
}
.layerPopBody .layer-wrap-table .layer-table thead tr th:after {
	position:absolute;
	height:1px;
	content:"";
	width:100%;
	bottom:0;
	right:0;
	background: var(--cc-mainB-color);
}

.layerPopBody .layer-wrap-table .layer-table tbody tr{
	pointer-events : none;
}


.layerPopBody .tblBodyList td{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}


.mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99;
  display: none;
}

/* tree */
.menu-tree-wrap {
  width: 40%;
}

.menu-tree-wrap .menu-tree {
  border: 1px solid #ccc;
  height: calc(100% - 84px);
}

.menu-info {
  width: 70%;
}

.treeList label.chkBox {
  display: inline-block;
  width: 100%;
  line-height: 41px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  color: #000;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.treeList .depth2 label.chkBox {
  display: inline-block;
  line-height: 26px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #333;
}

.treeList .depth3 label.chkBox {
  display: inline-block;
  line-height: 28px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: #333;
}

.treeList label.chkBox span {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  line-height: 20px;
  text-indent: -9999px;
  background-size: 20px auto;
  background-position: center top;
  background-repeat: no-repeat; /* transition:all .3s ease; */
}

.treeList label.chkBox.on span {
  background-position-y: -20px;
}

.treeList .chkArea {
  width: 100%;
  margin-right: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*Lnb Menu*/
.treeList {
  width: 100%;
  padding: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.treeList span {
  cursor: pointer;
}

.treeList.depth1 li span.menuArea {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-left: 25px;
  margin: 5px 0;
  line-height: 41px;
  font-size: 15px;
  color: #000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.treeList.depth1 li span.menuArea > label {
  font-size: 15px;
}

.treeList.depth1 li label.chkBox.on, .treeList.depth1 li span.chkArea.on {
  color: #335bbd;
  font-weight: bold;
  text-decoration: underline;
}

.treeList.depth1 > li.collapsable {
  padding-bottom: 10px;
}

.treeList.depth1 > li.collapsable .depth2 > li.collapsable {
  padding-bottom: 5px;
}

.treeList.depth1 > li.collapsable .depth2 > li {
  padding-bottom: 0px;
}

.treeList.depth1 > li.collapsable .depth2 > li:last-child {
  padding-bottom: 0px;
}

.treeList .depth2 li span.menuArea {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-left: 45px;
  margin: 5px 0;
  line-height: 26px;
  font-size: 14px;
  color: #333;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: none;
}

.treeList .depth3 li span.menuArea {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  padding-left: 60px;
  margin: 5px 0;
  line-height: 28px;
  font-size: 14px;
  color: #333;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: none;
  word-break: keep-all;
  position: relative;
}

.treeList li span.menuArea .label-box {
  margin: 0;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5px;
}

.treeList li span.menuArea .label-box .chkbox {
  -ms-flex-preferred-size: 18px;
      flex-basis: 18px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* tree */
.verti colgroup col:nth-child(odd) {
  width: 20%;
}

.v_img {
  min-height: 300px;
  background-color: #ccc;
  text-align: center;
  border: 1px solid #000;
  display: block;
  line-height: 300px;
}

.table-type.hori tbody td .select-box {
  width: 100%;
  float: none;
}

.table-type.verti tbody td .btn-set input[type=text] {
  width: auto;
}

/* 하나의 card 안에 part-box 좌우 분할 > 약관관리 등록 & 메뉴관리 */
/* .part-box { */
/*   overflow: hidden; */
/* } */
.part-box .half-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 300px;
}

.part-box .half-wrap .terms-cont {
  height: 300px;
  overflow-y: auto;
  padding: 0;
}

.part-box .half-wrap .terms-cont.view-box {
  padding: 20px;
}

.part-box .half-wrap textarea {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-height: 250px;
}

.table-type.autho-table .chk-lbl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5px 0;
}

.table-type th {
  word-break: keep-all;
}

.file-view .file-btn {
  padding-bottom: 10px;
}

.file-view .file-name .file:first-child {
  padding-top: 0;
}

.table-type select {
  width: 100%;
}

/*20220324 이용약관 style 정의*/
.para-title {
  font-weight: 500;
  font-size: 16px;
}

.para-list {
  text-indent: 1em;
}

/*main and mydashboard*/
.w30per {
  width: 30%;
}

.w70per {
  width: 70%;
}

.w100per {
  width: 100%;
}

.dash-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.cnt-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
}

.cnt-box [class^=icon-box-] {
  width: 60px;
  height: 60px;
  border-radius: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.cnt-box [class^=icon-box-] span {
  color: var(--dlsp-bgWh-color);
  font-size: 30px;
}

.cnt-box .icon-box-01 {
  background-color: #c3e4df;
}

.cnt-box .icon-box-02 {
  background-color: #b1d5f3;
}

.cnt-box .icon-box-03 {
  background-color: #f2c1b6;
}

.cnt-box .cnt-info {
  margin-left: auto;
  text-align: right;
  font-weight: 500;
}

.cnt-box .cnt-info .cnt-title {
  font-size: var(--dlsp-fontDe-size);
  padding-bottom: 10px;
}

.cnt-box .cnt-info .cnt-total {
  font-size: var(--dlsp-fontDe-size);
}

.cnt-box .cnt-info .cnt-total .cnt {
  font-size: 24px;
}

.dash-box-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 25px;
  position: relative;
  padding-left: 20px;
}

.dash-box-top h4 {
  font-weight: 500;
  font-size: 18px;
}

.dash-box-top .more {
  margin-left: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.new-flag {
  display: inline-block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  background-color: var(--dlsp-subC-color);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 300;
  text-align: center;
  margin-right: 5px;
}

.faq-icon {
  font-size: 12px;
}

.my-chart {
  height: 227px; /* 	border : 1px solid #ddd; */
}

.my-chart > div {
  margin: 0 auto !important;
}

button {
  border: 0;
}

/* chart-wrap + nodata 이미지 추가  */
.nodata::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  background-image: url(../img/nodata.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 350px auto;
}

/* chart-wrap + word-cloud height: 500px; 고정 */
.chart-wrap {
  width: 100%;
  height: 500px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  display: block;
  border: 1px solid var(--dlsp-tblHthC-border);
}

.chart-wrap-no-bor {
  width: 100%;
  height: 500px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  display: block;
}


.word-cloud {
  border: 1px solid #ececec;
  width: 100%;
  height: 500px;
}

/* chart-wrap + word-cloud height: 500px; 고정 end */
/* hidden  */
.hidden {
  display: none;
  -ms-touch-action: none;
      touch-action: none;
  cursor: not-allowed;
}

::-moz-selection {
  color: #fff; /* background-color: rgba(255, 126, 0, .7); */
  background-color: rgba(15, 20, 36, 0.3333333333);
}

::selection {
  color: #fff; /* background-color: rgba(255, 126, 0, .7); */
  background-color: rgba(15, 20, 36, 0.3333333333);
}

.wrapper > .gnb-wrap .gnb-top .ham-btn {
  display: none;
  color: #fff;
  padding-left: 30px;
}

.wrapper > .gnb-wrap .gnb-menu .close-btn {
  display: none;
}

.wrapper > .gnb-wrap .gnb-menu.top ul li .depth2 ul { /* padding-left: 240px; */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.faq-list ul li p {
  width: calc(100% - 67px);
}

.is-open {
  overflow: hidden !important;
  -ms-touch-action: none;
      touch-action: none;
  min-height: 100%;
}

.my-dashboard-wrap .my-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}

.my-dashboard-wrap .my-info .user-name {
  word-break: keep-all;
}

.my-dashboard-wrap .my-status ul li:last-child {
  margin-bottom: 0;
}

.my-dashboard-wrap .my-info .user-access br {
  display: none;
}

.board-wrap .board-list li .infoBox p br {
  display: none;
}

.faq-list ul li .question, .faq-list ul li .answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 페이지 상단 설명 card  */
.card.des-card {
  background: url(../img/online_back.png), #f1f7fd;
  background-repeat: no-repeat;
  background-position: right 25px center;
  padding: 25px 30px;
  margin-bottom: 20px;
}

.card .des {
  font-size: 16px;
  line-height: 1.8;
  color: var(--dlsp-fontDg-color);
}
.card .des > a {
  text-decoration: underline;
  color: var(--dlsp-fontGl-color);
  cursor: pointer;
}

.tab-btn.center-btn {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.tab-btn .lbl-txt {
  margin-right: 10px;
}

.tab .tab-btn > ul > li.on a > p {
  color: #fff;
}

.part-box .part-tit.chart-tit {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-bottom: 15px;
  line-height: 30px;
  background: left no-repeat url(../img/logo/logo_03.svg);
  background-size: 10px 30px;
  background-position: left top;
  padding-left: 24px;
  word-break: keep-all;
}
.part-box .part-tit.chart-tit > h3 {
  font-size: 18px;
}
.part-box .part-tit.chart-tit p,
.part-box .part-tit.chart-tit .tab-btn p {
  color: var(--dlsp-btn-etc);
}
.part-box .part-tit.chart-tit img{
	margin-left: auto;
	width: 180px;
}
.part-box .part-tit.chart-tit a {
	margin-left: auto;
}

.part-box .part-tit.chart-tit a img{
	width: 180px;
}
.part-box .part-tit.chart-tit .period {
  position: absolute;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--dlsp-fontDe-color);
}
.part-box .part-tit.chart-tit .period p {
  color: var(--dlsp-fontDe-color);
}
.part-box .part-tit.chart-tit .period p.month {
  margin-bottom: 5px;
}

/* double-tab 탭 - 곡 유통사/제작사 실연/제작자 */
.double-tab {
  width: 100%;
}

/*   double-tab > tab 버튼 tab double-tab btn-tab-sm */
.btn-tab-sm {
  text-align: center;
}
.btn-tab-sm > ul {
  display: inline-block;
  border: 1px solid #c6c6c6;
  text-align: center;
  overflow: hidden;
  border-radius: 5px;
}
.btn-tab-sm > ul > li {
  float: left;
  background: #fff;
  cursor: pointer;
  /* padding: 5px 15px; */
  border-right: 1px solid #c6c6c6;
}
.btn-tab-sm > ul > li:last-of-type {
  border: none;
}
.btn-tab-sm > ul > li a {
  display: block;
  padding: 10px 20px;
}
.btn-tab-sm > ul > li a:focus {
  outline-offset: -2px;
}
.btn-tab-sm > ul > li.on {
  color: white;
  background-color: var(--cc-mainB-color);
}
.btn-tab-sm > ul > li.on a {
  color: white;
}

/*  btn-tab-sm end */
/* button.ques ? 설명 버튼 */
button.ques {
  content: "?";
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 20px;
  height: 20px;
  background-color: var(--cc-mainA-color);
  border-radius: 50%;
  color: #fff;
  border: none;
  margin-left: 15px;
}

.ques-con {
  background-color: var(--dlsp-tblHthC-border);
  padding: 20px;
  border-radius: 10px;
  line-height: 1.5em;
  position: absolute;
  top: -20px;
  left: 250px;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  z-index: 97;
  display: none;
  word-break: keep-all;
  max-width: 300px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.slide-box {
  position: relative;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.slide-btn {
  background-color: transparent;
  border: none;
  position: absolute;
}

.slide-btn.left-btn {
  left: -30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.slide-btn.right-btn {
  right: -30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.slide-box .slide-btn span {
  font-size: 30px;
  padding: 30px 0;
}

.music-ranking {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* gap: 20px; */
  margin-bottom: 20px;
}

.music-ranking > li { /* flex: 1 1 25%; */
  line-height: 28px;
}

.music-ranking > li p {
  text-align: center;
  margin-bottom: 16px;
  font-weight: 500;
}

.music-list {
  background-color: #f8f8f8;
  border: 1px solid #f0f0f0;
  padding: 45px 40px;
}
.music-list li {
  font-size: 16px;
}
.music-list li span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #f0f0f0;
  color: #989898;
  font-size: 12px;
  background-color: #fff;
  text-align: center;
  line-height: 18px;
  margin-right: 10px;
  border-radius: 5px;
}
.music-list li:hover {
  cursor: pointer;
}
.music-list li:hover a {
  color: var(--dlsp-fontDe-color);
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
}
.music-list li:hover span {
  color: #fff;
  background-color: var(--cc-mainA-color);
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
}

.music-ranking p span {
  font-weight: bold;
  font-size: 16px;
}

.search-box .select-box {
  min-width: 100px;
}

.main-img img {
  width: 100%;
}

.main-cont {
  min-width: 250px;
}
.main-cont .dash-box-top.big-top {
  padding: 0;
}
.main-cont .dash-box-top.big-top h4 {
  font-size: 40px;
  line-height: 1.8em;
  font-weight: bolder;
}
.main-cont .dash-box-top.big-top h4::before {
  display: none;
}
.main-cont .dash-box-top.big-top + ul li {
  line-height: 1.8em;
  word-break: keep-all;
}

.main-cont > ul > li {
  line-height: 1.5em;
}
.main-cont > ul > li > p {
  font-size: 18px;
  margin-bottom: 10px;
}

.main-cont > ul > li, .main-cont > ul > li a {
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.25em;
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
}

.main-cont ul li a:hover {
  color: var(--cc-mainA-color);
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
}

.main-cont ul li:last-child {
  margin-bottom: 0;
  margin-right: 0;
}

.main-cont .menu-link {
  height: auto;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  margin-left: 30px;
}
.main-cont .menu-link > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 5px;
  border-radius: 8px;
  height: 30px;
  align-items: center;
  border-radius: 8px;
}
.main-cont .menu-link > li > a {
  min-width: 50px;
  height: 25px;
  line-height: 23px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
  margin-bottom: 0;
  cursor: pointer;
  color: var(--dlsp-fontDe-color);
  background-color: var(--dlsp-subB-color);
  -webkit-transition: all ease 0.2s;
  transition: all ease 0.2s;
  opacity: 0.5;
  padding: 0 10px;
}
.main-cont .menu-link > li > a:hover {
  color: #000;
  opacity: 0.7;
}
.main-cont .menu-link > li:last-child::after {
  display: none;
}

.dash-box-top.box-faq {
  background-color: #F6F6F6;
}

.dash-box-top.box-use + ul > li {
  line-height: 30px;
}
.dash-box-top.box-use + ul > li:last-child {
  margin-bottom: 0;
}

/* .main-cont .menu-link li::after{
  content: "|";
  margin: 0 5px;
} */
.dash-box-top h4 {
  font-size: 24px;
}

.dash-box-top h4::before {
  content: "";
  width: 3px;
  height: 35px;
  background-color: var(--cc-mainA-color);
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

.dash {
  padding-top: 50px;
  gap: 20px;
}

.dash .w100per .main-img img {
  width: 450px;
}

.dash .box.w100per {
  border: none;
}

.dash .box.w100per .card {
  background: #f9f9fa;
}

.dash .box:not(.w100per) { /* border: 1px solid var(--dlsp-tblHthB-border); */
  border-radius: 10px;
  -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1098039216);
          box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1098039216);
}

.table-type tr.bor-top {
  border-top: 1px solid var(--dlsp-tblHth-border);
}

.table-type tr.bor-top td:hover {
  cursor: pointer;
}

.table-type tr.bor-none td {
  border-bottom: none;
}

.part-box.part2, .part-box.part3, .part-box.part4, .part-box.part5, .part-box.part6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 50px;
}

.part-box.part2 .part-box:first-child {
  width: 70%;
}

.part-box.part2 .part-box:nth-child(2) {
  width: 30%;
}

.part-box.part3 .part-box:first-child {
  width: 40%;
}

.part-box.part3 .part-box:nth-child(2) {
  width: 60%;
}

.part-box.part4 .part-box:first-child {
  width: 50%;
}

.part-box.part4 .part-box:nth-child(2) {
  width: 50%;
}

/*  .part-box.part5 {} */
.part-box.part5 .part-box:first-child {
  width: 30%;
}

.part-box.part5 .part-box:nth-child(2) {
  width: 70%;
}

.part-box.part6 .part-box:first-child {
  width: 33%;
}

.part-box.part6 .part-box:nth-child(2) {
  width: 33%;
}

.part-box.part6 .part-box:nth-child(3) {
  width: 33%;
}

.part-box.part4 .table-wrap {
  max-height: 402px !important;
  overflow-y: scroll;
}

.table-type.no-bor th, .table-type.no-bor td {
  border: none !important;
}

.table-type.no-bor tr:first-child th, .table-type.no-bor tr:first-child td {
  border-top: none !important;
}

.table-type.no-bor tr:last-child th, .table-type.no-bor tr:last-child td {
  border-bottom: none !important;
}

.table-type.no-bor th {
  background-color: #fff;
}

.card.bor {
  border: 1px solid #ececec;
}

.table-type.table-sm th, .table-type.table-sm td {
  padding: 10px;
}

.tab {
  position: relative;
}

.ques-con.view {
  display: block;
}

/* 음원 상세 분석 페이지, 장르 상세 페이지 , 제목 musicMarketComb_detail.html , musicMarketGenre_detail.html */
.part-tit.big-tit {
  position: relative;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  margin-bottom: 20px;
  gap: 20px;
}
.part-tit.big-tit > h2 {
  display: inline-block;
  font-size: 40px;
  line-height: 1.5;
}
.part-tit.big-tit span.sort {
  min-width: 45px;
  height: 20px;
  line-height: 18px;
  padding: 0 10px;
  border: 1px solid var(--dlsp-btn-blue);
  color: var(--dlsp-btn-blue);
  border-radius: 5px;
  font-size: 12px;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.part-tit.big-tit span.sort.area {
  border: 1px solid var(--dlsp-btn-blue);
  color: var(--dlsp-btn-blue);
}
.part-tit.big-tit span.sort.genre {
  border: 1px solid var(--dlsp-btn-excel);
  color: var(--dlsp-btn-excel);
}
.part-tit.big-tit span.sort.soundtrack {
  border: 1px solid var(--dlsp-btn-red);
  color: var(--dlsp-btn-red);
}
.part-tit.big-tit span.artist {
  font-weight: initial;
  font-size: 18px;
}

/* 231026 음원상세 수정*/
.part-tit.big-tit .track-title{
  position: relative;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
/*   margin-bottom: 20px; */
  gap: 20px;
  display:inherit;
}
.part-tit.big-tit .track-title h2 {
  display: inline-block;
  font-size: 40px;
  line-height: 1.5;
}
.part-tit.big-tit .track-title span.sort {
  min-width: 45px;
  height: 20px;
  line-height: 18px;
  padding: 0 10px;
  border: 1px solid var(--dlsp-btn-blue);
  color: var(--dlsp-btn-blue);
  border-radius: 5px;
  font-size: 12px;
  -ms-flex-item-align: start;
      align-self: flex-start;
}
.part-tit.big-tit .track-title span.sort.area {
  border: 1px solid var(--dlsp-btn-blue);
  color: var(--dlsp-btn-blue);
}
.part-tit.big-tit .track-title span.sort.genre {
  border: 1px solid var(--dlsp-btn-excel);
  color: var(--dlsp-btn-excel);
}
.part-tit.big-tit .track-title span.sort.soundtrack {
  border: 1px solid var(--dlsp-btn-red);
  color: var(--dlsp-btn-red);
}
.part-tit.big-tit .track-title span.artist {
  font-weight: initial;
  font-size: 18px;
}

/* 음원 상세 분석 페이지, 장르 상세 페이지 , 제목 musicMarketComb_detail.html , musicMarketGenre_detail.html end */
.part-tit.tac {
  position: relative;
  line-height: 30px;
  margin-bottom: 10px;
  margin-top: 30px;
  text-align: center;
  -webkit-box-align: unset;
      -ms-flex-align: unset;
          align-items: unset;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.music-top {
  height: 302px;
  background: #f8f8f8;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid #f0f0f0;
}

.music-top .music-list {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 26px;
  border: 0;
  padding: 0 45px;
}

.table-wrap th.br {
  border-right: 1px solid var(--dlsp-tblHth-border);
}

/*231018 예측 테이블 수정*/
.table-wrap.fcst-tbl .compl-tr{
	cursor:pointer;
/* 	background-color:#f0f8ff !important; */
}
.table-wrap.fcst-tbl .compl-tr:hover{
	background-color:#f0f8ff !important;
}
.table-wrap.fcst-tbl .compl-td{
	color:#006bde;
}


.con-end {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

.dash .box:not(.w100per) {
  border: 1px solid #ececec;
  margin-bottom: 15px;
  -webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.3);
          box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* view-tooltip 공통사항 */
button.btn-tooltip {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 20px;
  padding: 0 10px;
  font-size: 18px;
  background-color: transparent;
  color: #fff;
  border: none;
  -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button.btn-tooltip::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  content: "?";
  position: absolute;
  width: 20px;
  height: 20px;
  line-height: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--cc-mainA-color);
  background-color: #fff;
  border: 1px solid var(--cc-mainA-color);
  border-radius: 50%;
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1882352941);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1882352941);
  -webkit-transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button.btn-tooltip .cnt-tooltip {
  display: none;
  position: absolute;
  margin: 0;
  z-index: 10;
  width: 360px;
  max-width: 480px;
  border-radius: 10px;
  padding: 14px;
  background-color: var(--dlsp-tblHthC-border);
  color: var(--dlsp-tblHth-border);
  line-height: 1.5em;
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1882352941);
          box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1882352941);
  font-size: 15px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  /* // event 추가 */
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /*       // opacity: 0;
        // pointer-events: none; */
  top: -16px;
  right: 0;
}

/* 231130 신청상태 tooltip 수정 */
.status-box{
	display:flex; 
	padding-left:22px;
}
button.btn-tooltip .status-tooltip {
  display: none;
  position: absolute;
  margin: 0;
  z-index: 10;
  width: 1020px;
  border-radius: 10px;
  padding: 18px;
  background-color: var(--dlsp-tblHthC-border);
  color: var(--dlsp-tblHth-border);
  line-height: 1.5em;
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1882352941);
          box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1882352941);
  font-size: 15px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  top: -16px;
  right: 44px;
}

button.btn-tooltip .status-tooltip:before {
  content: "";
  position: absolute;
  top: 14px;
  right: -12px;
  border-style: solid;
  border-width: 10px 14px 10px 0;
  border-color: transparent var(--dlsp-tblHthC-border) transparent transparent;
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform: scaleX(-1);
}

button.btn-tooltip:hover .status-tooltip, button.btn-tooltip:focus .status-tooltip, button.btn-tooltip:active .status-tooltip {
  display: block;
  right: 44px;
}

button.btn-tooltip .cnt-tooltip:before {
  content: "";
  position: absolute;
  top: 16px;
  left: -14px;
  border-style: solid;
  border-width: 10px 14px 10px 0;
  border-color: transparent var(--dlsp-tblHthC-border) transparent transparent;
  -webkit-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
button.btn-tooltip:hover, button.btn-tooltip:focus, button.btn-tooltip:active {
  -webkit-box-shadow: 0 0 0 #fff;
          box-shadow: 0 0 0 #fff;
}
button.btn-tooltip:hover::after, button.btn-tooltip:focus::after, button.btn-tooltip:active::after {
  margin-top: 1px;
  margin-left: 1px;
  -webkit-box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1882352941);
          box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.1882352941);
  color: #fff;
  background-color: var(--cc-mainA-color);
}
button.btn-tooltip:hover .cnt-tooltip, button.btn-tooltip:focus .cnt-tooltip, button.btn-tooltip:active .cnt-tooltip {
  display: block;
  top: -15px;
  left: 50px;
}

.tab-btn.depth1 > .btn-tooltip::after {
  color: var(--dlsp-fontDe-color);
  background-color: #fff;
  border: 1px solid var(--dlsp-fontDe-color);
}

.tab-btn.depth1 > .btn-tooltip:hover::after, .tab-btn.depth1 > .btn-tooltip:focus::after, .tab-btn.depth1 > .btn-tooltip:active::after {
  color: #fff;
  background-color: var(--dlsp-fontDe-color);
}

/* view-tooltip 공통사항 end */
/* // guide, common class 추가  */
.gap10 {
  gap: 10px;
}

.gap20 {
  gap: 20px;
}

.gap30 {
  gap: 30px;
}

.gap40 {
  gap: 40px;
}

.gap50 {
  gap: 50px;
}

.gap60 {
  gap: 60px;
}

.gap70 {
  gap: 70px;
}

.gap80 {
  gap: 80px;
}

.gap90 {
  gap: 90px;
}

.gap100 {
  gap: 100px;
}

/* projectArea.html 지역 table-wrap height 관련 수정 start */
.part-box.part3 .table-wrap {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: auto;
  max-height: 645px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* projectArea.html 지역 table-wrap height 관련 수정 end */
/* // 이용약관 페이지 수정  */
.search-box + .btn-type.icon {
  padding: 0 0 0 0;
}

.search-area .search-box.type-4 .search-inner {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 5%;
          flex: 1 1 5%;
}

/* // 이용약관 페이지 수정  end */
.tab-btn.depth1.center-btn .label-box {
  gin: auto;
}

.double-tab .tab-btn.depth1.center-btn .label-box {
  width: 20%;
  margin-bottom: 30px;
}

.tab-btn.depth1 + .double-tab .tab-btn.depth1.center-btn .label-box {
  width: 20%;
  margin-top: 30px;
  margin-bottom: 30px;
  border-bottom: 0;
}

.tab-btn > p {
  font-size: var(--fs-content-p);
  color: var(--dlsp-fontGy-color);
  margin-left: auto;
  margin-top: 20px;
}

.btn-tooltip + .label-box {
  margin-left: auto;
}

.tab-btn.depth1.center-btn {
  border-bottom: 1px solid var(--dlsp-tblHthC-border);
}
.tab-btn.depth1.center-btn .date-compo {
  margin: 30px auto;
}

.tab-btn.depth1.center-btn + p {
  font-size: var(--fs-content-p);
  color: var(--dlsp-fontGy-color);
  text-align: right;
  height: 35px;
  line-height: 35px;
  position: absolute;
  right: 0;
  top: 0;
}

.depth1 + .double-tab .tab-btn.depth1.center-btn + p {
  top: 30px;
}

/*  btn-badge 테이블 내 버튼 디자인  */
.btn-badge {
  display: inline-block;
  width: auto;
  padding: 0 6px;
  text-align: center;
  line-height: 1.5;
  color: #333399;
  border: 1px solid #333399;
  border-radius: 5px;
}

/*  btn-badge 테이블 내 버튼 디자인 end */
/*   // <!-- wrap-slide-rank 슬라이드 custom common --> */
.wrap-slide-rank {
  position: relative;
  margin: 0 auto 30px;
  width: 100%;
  height: 500px;
}
.wrap-slide-rank .swiper {
  width: 100%;
  padding: 0 40px;
}
.wrap-slide-rank .swiper-button-prev, .wrap-slide-rank .swiper-container-rtl .swiper-button-next {
  left: 0;
}
.wrap-slide-rank .swiper-button-next, .wrap-slide-rank .swiper-container-rtl .swiper-button-prev {
  right: 0;
}

.swiper-button-prev, .swiper-button-next {
  z-index: 4;
}

.wrap-slide-rank.nodata .btn-slide {
  display: none;
}

/* // <!-- wrap-slide-rank 슬라이드 custom common end --> */
/* // box-rank(슬라이드 내부 순위 + TOP10 박스)  custom start  */
/* // box-rank custom end */
.box-rank {
  width: 100%;
  height: 500px;
  padding: 10px 15px;
  border: 1px solid var(--dlsp-tblHthC-border);
  border-radius: 4px;
  background: #fff;
}
.box-rank.active {
  border: solid 2px #aab0bf;
}
.box-rank .rank-title {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 96px;
  position: relative;
  margin: 0;
  font-size: 22px;
  color: var(--dlsp-fontDe-color);
  text-align: center;
}
.box-rank .rank-title:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 96%;
  height: 1px;
  background: #e9edf0;
}
.box-rank .rank-title .title-cell {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}
.box-rank .rank-title span.datetime {
  font-size: 20px;
  vertical-align: top;
}
.box-rank .rank-title .period {
  display: block;
  margin-top: 10px;
}
.box-rank .rank-title .period em {
  font-size: 14px;
  color: #888;
  font-weight: normal;
}
.box-rank ul, .box-rank ol, .box-rank li {
  list-style: unset;
  list-style-type: unset;
  list-style-position: unset;
}
.box-rank ol {
  list-style: decimal;
  list-style-type: decimal;
  list-style-position: inside;
  padding: 10px 0;
}
.box-rank ol > li {
  position: relative;
  margin-top: 12px;
  letter-spacing: 0;
  line-height: 30px;
  color: var(--dlsp-fontDe-color);
}
.box-rank ol > li:nth-of-type(1) {
  margin-top: 0;
}
.box-rank ol > li .num-per {
  color: #335bbd;
  text-align: right;
  font-size: 13px;
  position: absolute;
  right: 0;
  bottom: -2px;
}
.box-rank ol > li p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.box-rank ol > li p > span {
  width: 30%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  text-align: end;
  color: #335bbd;
}
.box-rank ol > li p cite {
  width: 69%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: var(--dlsp-fontGy-color);
  cursor: pointer;
}
.box-rank ol > li > p {
  -webkit-box-pack: unset;
      -ms-flex-pack: unset;
          justify-content: unset;
  -webkit-box-align: unset;
      -ms-flex-align: unset;
          align-items: unset;
  width: calc(100% - 24px);
  height: 20px;
  display: inline-block;
  vertical-align: bottom;
}
.box-rank ol > li > a {
  display: inline-block;
  width: calc(100% - 24px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  color: var(--dlsp-fontDe-color);
  text-indent: 5px;
}
.box-rank ol > li > a:hover, .box-rank ol > li > a:focus, .box-rank ol > li > a:active {
  cursor: default !important;
}
.box-rank ol > li > a > span {
  text-indent: 5px;
}
.box-rank ol > li .tit {
  font-size: 16px;
  color: var(--dlsp-fontGy-color);
  text-indent: 5px;
  width: calc(100% - 24px);
}
.box-rank.selected .box-rank {
  padding-top: 23px;
  padding-bottom: 22px;
  border: 3px solid #768294;
}

/* // box-rank custom end */
.swiper-wrapper .box-rank .rank-title {
  height: 85px;
}
.swiper-wrapper .box-rank ol {
  padding: 0;
}
.swiper-wrapper .box-rank ol > li {
  margin-top: 10px;
  line-height: 28px;
}
.swiper-wrapper .box-rank ol > li > a {
  width: calc(100% - 50px);
  cursor: unset;
}
.swiper-wrapper .box-rank ol > li > a:hover, .swiper-wrapper .box-rank ol > li > a:focus, .swiper-wrapper .box-rank ol > li > a:active {
  cursor: unset;
}

/* //  slide-soundtrack  a link 추가 */
.slide-soundtrack .box-rank ol > li > a:hover, .slide-soundtrack .box-rank ol > li > a:focus, .slide-soundtrack .box-rank ol > li > a:active {
  cursor: pointer !important;
  text-decoration: underline;
}
.slide-soundtrack .box-rank ol > li > a:hover .tit, .slide-soundtrack .box-rank ol > li > a:focus .tit, .slide-soundtrack .box-rank ol > li > a:active .tit {
  color: var(--dlsp-fontDe-color);
  text-decoration: underline;
}

.slide-distributor .box-rank ol > li > a {
  width: calc(100% - 70px);
}
.slide-distributor .box-rank ol > li > a .tit {
  width: unset;
}


/* 230628 이상징후 곡 리스트 noslide */
.noslider {
	margin-right : 44px;
	padding : 10px 48px;
	width : 424px;
}
.noslider:last-child {
	margin-right : 0px;
}
.noslider-box li > a {
	width : calc(100% - 100px) !important;
}
.vertical-rank li > a:hover, .vertical-rank > li > a:focus, .vertical-rank > li > a:active {
  cursor: pointer !important;
  text-decoration: underline;
}
.vertical-rank{
	height: 310px !important;
}
.comp-slide {
	height: 310px;
}
.comp-slide > div{
	display:flex;
	justify-content:left;
	margin:10px 0;
}
.comp-slide .box-rank {
	width: 1230px; 
	margin-right: 20px; 
	height:50px; 
	margin :10px auto;
}

.comp-slide .box-rank div ul {
	display:flex; 
	list-style-type: none; 
}

.comp-slide .box-rank div ul li {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height:26px;
}
.comp-slide .box-rank div ul li:not(:last-child) {
	margin:0 20px;
}

.comp-slide .box-rank div ul li:last-child {
	width:100px; 
	text-align:right;
}

.up-song{
	color: #e53757 !important;
}
.dwn-song{
	color: #335bbd !important;
}

.comp-slide .comp-txt{
	display:flex;
	justify-content:space-between;
	line-height:26px;
	border-bottom:1px solid #eeeff0;
}
.comp-slide img{
	width:30px;
	float:left;
}

.swiper-container .vertical-btn-prev,
.swiper-container .vertical-btn-next
 {
	transform : rotate(90deg);
}
.swiper-container .vertical-btn-prev {
	left : 1294px;
	top : 116px;
}
.swiper-container .vertical-btn-next {
	right : -4px;
	top : 168px;
}
.swiper-container .vertical-btn-prev:after,
.swiper-container .vertical-btn-next:after {
	font-size : 20px;
}

/* .wrap-noslide-rank { */
/*   position: relative; */
/*   margin: 0 auto 30px; */
/*   width: 100%; */
/*   height: 500px; */
/* } */
/* .vertical-rank > .nodata::before { */
/*   background-size: 280px auto !important; */
/* } */
/* 230628 이상징후 곡 리스트 noslide END */


/* 유통/제작사 말줄임표 수정 */
/* //  slide-soundtrack  a link 추가 end */
/*  .box-rank -> chart-wrap height 500px 일 때 height  */
.part-box > .box-rank {
  height: 545px;
  padding: 10px 20px;
}
.part-box > .box-rank > ol {
  height: auto;
}
.part-box > .box-rank > ol > li > a {
  cursor: auto;
}
.part-box > .box-rank > ol > li > .tit {
  width: 130px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/*   .box-rank -> chart-wrap height 500px 일 때 height  end */
/* // box-list ( 시즌송 10곡 지정 등 순위 없는 노래 목록) custom start */
.box-list {
  width: 100%;
  height: 500px;
  border: 1px solid var(--dlsp-tblHthC-border);
  border-radius: 4px;
  background: #fff;
}
.box-list ol,
.box-list ul,
.box-list li {
  list-style: unset;
  list-style-type: unset;
  list-style-position: unset;
}
.box-list > ul {
  list-style: circle;
  list-style-type: circle;
  list-style-position: inside;
  padding: 20px 0;
}
.box-list > ul > li {
  padding-right: 20px;
  padding-left: 25px;
  margin-top: 12px;
  letter-spacing: 0;
  line-height: 35px;
  color: var(--dlsp-fontDe-color);
}
.box-list > ul > li:nth-of-type(1) {
  margin-top: 0;
}
.box-list > ul > li p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.box-list > ul > li span {
  width: 30%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  text-align: end;
  color: var(--dlsp-fontGl-color);
}
.box-list > ul > li cite {
  width: 69%;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  color: var(--dlsp-fontGy-color);
}
.box-list > ul > li > p {
  -webkit-box-pack: unset;
      -ms-flex-pack: unset;
          justify-content: unset;
  -webkit-box-align: unset;
      -ms-flex-align: unset;
          align-items: unset;
  width: calc(100% - 22px);
  height: 35px;
  display: inline-block;
  vertical-align: bottom;
}
.box-list > ul > li > a {
  width: calc(100% - 22px);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  color: var(--dlsp-fontDe-color);
  cursor: pointer;
}
.box-list > ul > li > a:hover {
  text-decoration: underline;
}
.box-list > ul > li > a:hover .tit {
  text-decoration: underline;
  color: var(--dlsp-fontDe-color);
}
.box-list > ul > li > a .num {
  display: inline-block;
  width: 20px;
  margin-right: 0px;
  text-align: left;
  border: 0;
  font-weight: bold;
  background: transparent;
  color: var(--dlsp-fontDe-color);
}
.box-list > ul > li > a .tit {
  font-size: 16px;
  font-weight: 100;
  color: #333;
  color: var(--dlsp-fontGy-color);
}

/* box-list & table-type 의 td 내부 제목 태그 <cite> 삽입 시 text-align: left; */
cite {
  font-style: initial;
}

.table-type th cite, .table-type td cite {
  display: block;
  text-align: left;
}

/* box-list & table-type 의 td 내부 제목 태그 <cite> 삽입 시 text-align: left;  end */
/* // box-list ( 시즌송 10곡 지정 등 순위 없는 노래 목록)  custom end */
/* // bootstrap-datepicker3.standalone.min.css custom  */
.datepicker-dropdown:after {
  border-bottom-color: #0F1424;
}

.datepicker {
  padding: 0;
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.06);
  -webkit-box-shadow: 0 3px 30px rgba(0, 0, 0, 0.06);
  border: 0;
}

.datepicker .prev,
.datepicker .next,
.datepicker .datepicker-switch {
  background: #0F1424;
  color: #fff;
  border-radius: 0;
  padding: 20px;
}

.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker .datepicker-switch:hover {
  background: rgba(15, 20, 36, 0.8666666667);
  color: #fff;
}

.datepicker .dow,
.datepicker .day {
  height: 35px;
  width: 35px;
  border-radius: 10px;
}

.datepicker .month,
.datepicker .year {
  border-radius: 10px;
}

.datepicker table tr td span.focused {
  border-radius: 10px;
}

.datepicker .today.day {
  background: rgba(15, 20, 36, 0.2);
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.datepicker .today.day:hover {
  background: rgba(15, 20, 36, 0.2);
}

.datepicker .active.day {
  background: #0F1424 !important;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.datepicker .active.day:hover {
  background: #0f1424 !important;
}

.datepicker.dropdown-menu {
  margin-top: 8px;
}

.datepicker table tr td, .datepicker table tr th {
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: none;
}

.datepicker table tr td span.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active:hover {
  background-color: #0F1424;
  border-color: rgba(15, 20, 36, 0.8666666667);
}

.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover:active {
  background-color: #0F1424;
  border-color: rgba(15, 20, 36, 0.8666666667);
}

.bootstrap-datetimepicker-widget tr:hover {
  background-color: #808080;
}

/* 20230718 datepicker 수정*/
/* endDate 있을 때 다음달 표시 */
.datepicker .next.disabled {
	visibility: visible;
	background-color : #ddd;
	color : #0F1424;
	cursor: none;
}

/* // bootstrap-datepicker3.standalone.min.css custom end */
/* .datepicker ( 일간)
.datepicker-month ( 월간 )
.datepicker-week ( 주간 )
.type-datepicker-under
.type-select-under */
.datepicker-month {
  min-width: 130px;
  height: 35px;
  border: 1px solid #ccc;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 5px;
  background-image: url(../img/guide/calendar.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.datepicker-month.disabled {
  border-color: #ccc;
  background-image: url(../img/guide/calendar_disable.png);
}

.datepicker-week {
  min-width: 150px;
  height: 35px;
  border: 1px solid #ccc;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 5px;
  background-image: url(../img/guide/calendar.png);
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.datepicker-week.disabled {
  border-color: #ccc;
  background-image: url(../img/guide/calendar_disable.png);
}

.type-datepicker-under {
  font-size: var(--dlsp-fontDe-size);
  cursor: pointer;
  color: var(--cc-mainB-color);
  resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 150px;
  height: 35px;
  line-height: 33px;
  padding: 0 15px 0 10px;
  border: none;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--cc-mainB-color);
  background: transparent url("../img/guide/calendar.png") no-repeat no-repeat right center;
  background-size: 18px;
  cursor: pointer;
}
.type-datepicker-under.center {
  font-size: 16px;
  font-weight: bold;
  width: 130px;
  text-indent: -10px;
  padding: 0;
  text-align-last: center;
  text-align: center;
  text-align: -webkit-center;
  text-align-last: -webkit-center;
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  border-bottom: 2px solid var(--cc-mainB-color);
}
.type-datepicker-under:focus {
  outline: 0;
}

/* // .type-select-under & type-select-border & center & type-text-under custom */
.type-select-under {
  font-size: var(--dlsp-fontDe-size);
  cursor: pointer;
  color: var(--cc-mainB-color);
  resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  width: 150px;
  height: 35px;
  line-height: 33px;
  padding: 0 15px 0 10px;
  border: none;
  border-top: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid var(--cc-mainB-color);
  background: transparent url("../img/guide/arrow_down.png") no-repeat no-repeat right center;
  background-size: 18px;
}
.type-select-under.center {
  font-size: 18px;
  font-weight: bold;
  width: 130px;
  text-indent: 0;
  padding: 0;
  text-align-last: center;
  text-align: center;
  text-align: -webkit-center;
  text-align-last: -webkit-center;
  -ms-text-align-last: center;
  -moz-text-align-last: center;
}
.type-select-under.weekly {
  font-size: 16px;
  font-weight: bold;
  width: 240px;
  text-indent: 0;
  padding: 0;
  padding-left: 15px;
  padding-right: 15px;
}
.type-select-under:focus {
  outline: 0;
}

.type-select-border {
  font-size: var(--dlsp-fontDe-size);
  cursor: pointer;
  color: var(--cc-mainB-color);
  resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  min-width: 150px;
  height: 35px;
  line-height: 33px;
  padding: 0 15px 0 10px;
  border: 1px solid var(--cc-mainB-color);
  border-radius: 5px;
  background: transparent url("../img/guide/arrow_down.png") no-repeat no-repeat right center;
  background-size: 18px;
  text-align: left;
}
.type-select-border.center {
  font-size: 18px;
  font-weight: bold;
  width: 130px;
  padding: 0;
  text-indent: 0;
  text-align-last: center !important;
  text-align: center !important;
  text-align: -webkit-center;
  text-align-last: -webkit-center;
  -ms-text-align-last: center !important;
  -moz-text-align-last: center !important;
}
.type-select-border:focus {
  outline: 0;
}

.type-text-under {
  font-size: var(--dlsp-fontDe-size);
  color: var(--cc-mainB-color);
  resize: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
  border-radius: 0;
  width: 150px;
  height: 35px;
  line-height: 33px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-bottom: 1px solid var(--cc-mainB-color);
  margin-top: auto;
  cursor: pointer;
}
.type-text-under.sm {
  width: 100px;
}
.type-text-under.md {
  width: 200px;
}
.type-text-under.lg {
  width: 250px;
}

.type-datepicker-under.nosel,
.type-select-under.nosel {
  background: none !important;
  color: #d9d9d9 !important;
  color: var(--dlsp-fontGy-color) !important;
  text-indent: unset;
  cursor: text;
}

/* // .type-select-under & type-select-border & center & type-text-under custom end*/
/* ************************************************************* */
/* ************************************************************* */
/* ************************************************************* */
/* // .wrap-select-box select-box start */
.wrap-filter {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  margin-top: 20px;
  margin-bottom: 20px;
}
.wrap-filter > div {
  margin-right: 20px;
}
.wrap-filter > label {
  line-height: 35px;
  color: var(--cc-mainB-color);
  font-size: 14px;
}
.wrap-filter .btn-type.icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--cc-mainB-color);
  height: 35px;
  min-width: 80px;
  padding: 0 15px 0 10px;
}
.wrap-filter .elem-filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-width: 150px;
  width: 150px;
  line-height: 35px;
  padding: 0;
  font-size: 14px;
}
.wrap-filter .elem-filter > label {
  width: 100%;
  line-height: 35px;
  color: var(--cc-mainB-color);
  font-size: 14px;
  word-break: keep-all;
}
.wrap-filter .elem-filter.row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
.wrap-filter .elem-filter.row > label {
  margin-right: 20px;
}
.wrap-filter .elem-filter.sm {
  min-width: 80px;
  width: 80px;
  margin-right: 5px;
}
.wrap-filter .elem-filter.sm label {
  width: 100%;
}
.wrap-filter .elem-filter.sm .type-select-under {
  width: 80px;
}
.wrap-filter .elem-filter.sm .wrap-select-text {
  margin-right: unset;
}


.wrap-filter .elem-filter.lg {
  min-width: 80px;
  width: 250px;
  margin-right: 5px;
}
.wrap-filter .elem-filter.lg label {
  width: 100%;
}
.wrap-filter .elem-filter.lg .type-select-under {
  width: 80px;
}
.wrap-filter .elem-filter.lg .wrap-select-text {
  margin-right: unset;
}
/* ************************************************************* */
/* Daily / Monthly tab 내부 하단 area-datepicker 영역  */
/* // wrap-select-center - strat */
.wrap-select-center {
  position: relative;
  width: 100%;
  border-bottom: 1px solid var(--dlsp-tblV-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding-bottom: 20px;
}
.wrap-select-center .type-select-under {
  border-bottom: 2px solid var(--cc-mainB-color);
}
.wrap-select-center .wrap-select-box {
  min-width: unset;
  width: 130px;
}
.wrap-select-center .wrap-select-box .type-select-under {
  font-size: 18px;
  font-weight: bold;
  width: 130px;
}
.wrap-select-center select + p {
  font-size: var(--fs-content-p);
  color: var(--dlsp-fontGy-color);
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 20px;
}
.wrap-select-center select {
  text-align-last: center;
  text-align: center;
  text-align: -webkit-center;
  text-align-last: -webkit-center;
  -ms-text-align-last: center;
  -moz-text-align-last: center;
}

.tab-con > .wrap-select-center {
  padding-top: 30px;
}

/* // wrap-select-center end  */
/* // > wrap-datepicker 상위 wrap */
/* //area-datepicker Center */
.area-datepicker {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-bottom: 1px solid var(--dlsp-tblHthC-border);
  margin: 0 auto 30px;
  padding-bottom: 30px;
}
.area-datepicker .wrap-datepicker {
  width: auto;
}
.area-datepicker .type-select-under {
  border-bottom: 2px solid var(--cc-mainB-color);
}
.area-datepicker .type-datepicker-under {
  border-bottom: 2px solid var(--cc-mainB-color);
}

/* //area-datepicker Center end*/
/* textarea 입력창 왼쪽 검색 조건 selectbox 정렬)*/
/*
.wrap-filter > .wrap-select-text >
<div class="elem-filter sm">
    <label>검색조건</label>
      <select name="" id="" class="type-select-under">
          <option value="">전체</option>
          <option value="">메뉴ID</option>
          <option value="">메뉴명</option>
      </select>
</div>
  <div class="elem-filter">
      <input class="txt type-text-under" type="text">
  </div>
*/
.wrap-select-text {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.wrap-select-text > label {
  display: block;
  line-height: 35px;
  color: var(--cc-mainB-color);
  font-size: 14px;
  word-break: keep-all;
}

/*  textarea 검색 창 왼쪽 검색 조건 selectbox 정렬) end */
/* // wrap-radio-box custom  // rdobtn button custom  */
.wrap-radio-box {
  position: absolute;
  right: 0;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-left: auto;
}

/* // wrap-datepicker start */
.wrap-datepicker {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.tilde {
  position: relative;
  width: 20px;
  height: 35px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}
.tilde::after {
  content: "~";
  color: var(--cc-mainB-color);
  border: none;
  font-size: 18px;
}

.elem-filter + .tilde {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

/* // wrap-datepicker end */
/* .wrap-filter 추가 수정  */
.wrap-filter .wrap-datepicker {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.wrap-filter .wrap-datepicker .type-datepicker-under {
  background: transparent url(../img/guide/calendar.png) no-repeat no-repeat 96% center;
  background-size: 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--cc-mainB-color);
}
.wrap-filter .elem-filter .type-datepicker-under {
  background: transparent url(../img/guide/calendar.png) no-repeat no-repeat 96% center;
  background-size: 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--cc-mainB-color);
}
.wrap-filter .label-box.rdo-lbl {
  height: 35px;
}

/* // musicMarketComb_detail.html 상단 정보 수정  start  */
/* .list-style-detail ( 위탁관리곡 음원목록 정보 commissionMusic.html + 음원 상세 분석 페이지 상단 musicMarketComb_detail.html ) 목록  */
.list-style-detail {
  border-top: 1px dotted var(--cc-mainB-color);
  border-bottom: 1px dotted var(--cc-mainB-color);
  background: #fff;
  padding: 20px 10px;
}
.list-style-detail > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.list-style-detail > ul li {
  width: 50%;
  font-size: 15px;
  margin: 8px 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.list-style-detail > ul li .list-title {
  width: 30%;
  font-size: 14px;
  color: var(--dlsp-fontGl-color);
  position: relative;
}
.list-style-detail > ul li .list-title:after {
  content: "";
  display: block;
  position: absolute;
  right: 10%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: #d6d6d6;
}
.list-style-detail > ul li .list-title + span {
  width: 70%;
}
.list-style-detail.compared {
  width: 100%;
  padding: 20px 30px;
  margin-top: 30px;
}
.list-style-detail.compared > ul li {
  width: 25%;
}
.list-style-detail.compared > ul li .rank-number {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.list-style-detail.compared .list-title {
  width: 50%;
}

/* .list-style-detail ( 위탁관리곡 음원목록 정보 commissionMusic.html + 음원 상세 분석 페이지 상단 musicMarketComb_detail.html ) 목록  end */
/* // musicMarketComb_detail.html 상단 정보 수정 end */
/* 사용자 수 추이 변경 버튼 */
.wrap-musictab {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 30px;
}

.btn-musictab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn-musictab li {
  position: relative;
  margin: 0 auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn-musictab li div {
  position: relative;
  display: block;
  float: left;
  width: auto;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 15px rgba(38, 70, 166, 0.2);
          box-shadow: 0 5px 15px rgba(38, 70, 166, 0.2);
  text-align: center;
}
.btn-musictab li div a {
  position: relative;
  display: block;
  width: 100%;
  height: 68px;
  line-height: 68px;
  padding: 0 25px;
  background-color: #fff;
  font-size: 14px;
  color: #222;
  font-weight: bold;
  z-index: 2;
}
.btn-musictab li div a span {
  position: relative;
}
.btn-musictab li div a span:before {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  width: 100%;
  height: 48px;
  border-radius: 30px;
  background: #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: -1;
  opacity: 0;
  filter: Alpha(opacity=0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.btn-musictab li:first-of-type div a {
  border-radius: 40px 0 0 40px;
}
.btn-musictab li:first-of-type div {
  border-radius: 40px 0 0 40px;
  padding-left: 10px;
}
.btn-musictab li:last-of-type div {
  border-radius: 0 40px 40px 0;
  padding-right: 10px;
}
.btn-musictab li:last-of-type div a {
  border-radius: 0 40px 40px 0;
}
.btn-musictab li.on div a {
  padding: 0;
  color: #fff;
  z-index: 4;
}
.btn-musictab li.on div a span {
  padding: 0 30px;
  text-align: center;
}
.btn-musictab li.on div a span:before {
  opacity: 1;
  filter: Alpha(opacity=100);
  background: linear-gradient(45deg, #00bcd4, #4099ff, rgba(103, 105, 235, 0.8352941176));
}

/* 사용자 수 추이 변경 버튼 */
.btn-pagechange {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 50px;
  border-radius: 50px;
  height: 150px;
}
.btn-pagechange ul {
  position: relative;
  margin: 0 auto;
  text-align: center;
}
.btn-pagechange ul li {
  position: relative;
  display: block;
  width: auto;
  background-color: #fff;
  -webkit-box-shadow: 0 10px 15px rgba(38, 70, 166, 0.1);
          box-shadow: 0 10px 15px rgba(38, 70, 166, 0.1);
  text-align: center;
}
.btn-pagechange ul li a {
  position: relative;
  display: block;
  width: 100%;
  height: 68px;
  line-height: 68px;
  padding: 0 30px;
  background-color: #fff;
  font-size: 18px;
  color: #222;
  font-weight: 600;
  z-index: 2;
}
.btn-pagechange ul li a span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 48px;
  background: #fff;
  border-radius: 30px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: -1;
  opacity: 0;
  filter: Alpha(opacity=0);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

/* 순위 안내 숫자 (위탁관리곡 확인 )  */
.rank-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 14px;
}
.rank-number .num {
  position: relative;
  color: #888;
}
.rank-number .num::before {
  content: "";
  font-family: "Material Icons", "NotoSans", sans-serif;
  font-size: 16px;
  text-align: center;
  z-index: 1;
  vertical-align: middle;
}
.rank-number .num.static {
  color: #888;
}
.rank-number .num.static::before {
  content: "-";
  position: relative;
}
.rank-number .num.up {
  color: var(--cc-mainA-color);
}
.rank-number .num.up::before {
  content: "arrow_drop_up";
  /*  // content: "\e5ce"; */
  font-size: 20px;
}
.rank-number .num.down {
  color: #8cbefa;
}
.rank-number .num.down::before {
  content: "arrow_drop_down";
  /* // content: "\e5cf";  */
  font-size: 20px;
}
.rank-number .num.new {
  color: var(--ct-teal);
  padding-left: 0;
  font-style: italic;
}
.rank-number .num.new::before {
  content: "New";
  position: relative;
  font-family: "NotoSans", -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Segoe UI, Malgun Gothic, 맑은 고딕, sans-serif;
  font-size: 14px;
}
.rank-number .num.hot {
  color: var(--ct-danger);
  padding-left: 0;
  font-style: italic;
}
.rank-number .num.hot::before {
  content: "Hot";
  position: relative;
  font-family: "NotoSans", -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Segoe UI, Malgun Gothic, 맑은 고딕, sans-serif;
  font-size: 14px;
}
.rank-number .num.hot2 {
  color: var(--ct-danger);
  font-style: italic;
}
.rank-number .num.hot2::before {
  content: "local_fire_department";
  font-size: 14px;
}

/* 순위 안내 숫자 custom */
/*  써클차트 바로가기(더보기) 버튼 wrap-link-circle */
.wrap-link-circle {
  display: block;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  cursor: pointer;
  margin-top: -5px;
}
.wrap-link-circle a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  font-size: 14px;
}
.wrap-link-circle a img {
  width: 80px;
}
.wrap-link-circle a span {
  padding-left: 10px;
}
.wrap-link-circle a span.material-icons {
  font-size: 15px;
}
.wrap-link-circle a:hover span {
  color: var(--ct-danger);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* 상태 안내 custom ( 태이블 내 반려, 신청 상태 등) */
.table-type .status p {
  display: inline-block;
  color: var(--dlsp-fontGy-color);
  position: relative;
  text-indent: 10px;
}
/* 231130 tooltip 추가*/
.table-type .ttip {
  margin-bottom:6px
}
.table-type .ttip p {
  display: inline-block;
  color: var(--dlsp-fontGy-color);
  position: relative;
  text-indent: 10px;
  margin-right:14px;
  font-size: 15px;
  font-weight:600;
}
.table-type .status p::before {
  content: "";
  display: block;
  position: absolute;
  left: -8px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--dlsp-fontGy-color);
  border-radius: 50%;
}
.table-type .ttip p::before {
  content: "";
  display: block;
  position: absolute;
  left: -4px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: var(--dlsp-fontGy-color);
  border-radius: 50%;
}
/* 231130 tooltip 추가 끝*/

.table-type .status.inner-table {
  padding: 0 5px;
}
.table-type .status.insti p {
  color: var(--dlsp-fontGy-color);
}
.table-type .status.insti p::before {
  background: #0f1424;
}
.table-type .status.app p {
  color: var(--dlsp-subD-color);
}
.table-type .status.app p::before {
  background: var(--dlsp-subD-color);
}
.table-type .status.rej p {
  color: var(--dlsp-btn-red);
}
.table-type .status.rej p::before {
  background: var(--dlsp-btn-red);
}
.table-type .status.ack p {
  color: var(--dlsp-btn-blue);
}
.table-type .status.ack p::before {
  background: var(--dlsp-btn-blue);
}
.table-type .status.stop p {
  color: var(--dlsp-fontGl-color);
}
.table-type .status.stop p::before {
  background: var(--dlsp-fontGl-color);
}

.status.notice {
  background-color: var(--ct-danger);
  color: #fff;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  width: 30px;
  height: 25px;
  border-radius: 4px;
}
.status.notice::before {
  content: "공지";
  display: block;
  position: absolute;
  font-size: 13px;
  text-align: center;
  z-index: 1;
}

/* 상태 안내 custom ( 태이블 내 반려, 신청 상태 등) end*/
/* // .table-type style 수정 */
.table-type:not(.verti) tbody tr:nth-child(odd) {
  background-color: rgba(200, 224, 253, 0.0549019608);
}
.table-type:not(.verti) tr:hover a:not(.btn-download) {
  text-decoration: underline;
}

/* checkbox custom // wrap-filter-checkbox  */
.wrap-filter-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.wrap-filter-checkbox ul.wrap-checkbox {
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
.wrap-filter-checkbox ul.wrap-checkbox > li {
  display: block;
  width: 50px;
  height: 40px;
  line-height: 38px;
  margin-bottom: 20px;
  text-align: center;
}
.wrap-filter-checkbox ul.wrap-checkbox > li label {
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100px;
  height: 40px;
  line-height: 38px;
  color: var(--cc-mainA-color);
  cursor: pointer;
  font-family: "Youth", sans-serif;
  border: 1px solid var(--cc-mainA-color);
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
}
.wrap-filter-checkbox ul.wrap-checkbox > li label:hover {
  color: #fff !important;
  border-color: var(--cc-mainA-color) !important;
  background-color: var(--cc-mainA-color) !important;
}
.wrap-filter-checkbox ul.wrap-checkbox > li label.disabled {
  color: #bbbbbb !important;
  background-color: #f1f1f1 !important;
  border: 1px solid #f1f1f1 !important;
  cursor: default !important;
}
.wrap-filter-checkbox ul.wrap-checkbox > li label.disabled:hover {
  color: #bbbbbb !important;
  background-color: #f1f1f1 !important;
  border-color: #f1f1f1 !important;
  cursor: default !important;
}
.wrap-filter-checkbox ul.wrap-checkbox > li label.on {
  color: #fff !important;
  border-color: var(--cc-mainA-color) !important;
  background-color: var(--cc-mainA-color) !important;
}
.wrap-filter-checkbox ul.wrap-checkbox > li label input {
  height: 30px;
  line-height: 28px;
  padding: 0;
  border: none;
}

.wrap-checkbox li label input {
  cursor: pointer;
  font-size: 14px;
}

.btn-wrap.tar {
  position: relative;
  height: 35px;
  padding-top: 0;
  margin-top: 20px;
}
.btn-wrap.tar .btn-type {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}
.btn-wrap.tar .btn-type.outlined {
  margin-right: auto;
}

.card + .btn-wrap.tar {
  padding-top: 0;
}

/*231017 예측분석 버튼*/
.btn-wrap.fcst-btn {
  display : flex;
  justify-content : end;
  position: absolute;
  bottom:2px;
  right:0;
  width:100%;
}

.btn-wrap .btn-type.blk{
	background-color: #0f1424;
}

.naver_img{
	width: 100%;
    display: flex;
    justify-content: end;
    position: relative;
    bottom: 60px;
    right: 48px;
}
.chart-wrap .naver_img img{
	width:180px;
}


/* // FAQ 페이지 내  faq-acr custom start  */
.faq-acr .faq-que {
  position: relative;
  padding: 12px 0;
  cursor: pointer;
  font-size: 15px;
}
.faq-acr .faq-que.on > span {
  font-weight: bold;
  color: var(--cc-color-10);
}
.faq-acr .faq-que .arrow-wrap {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.faq-acr .faq-anw {
  display: none;
  overflow: hidden;
  font-size: 14px;
  background-color: #f5f5f5;
  padding: 25px 20px;
  border-radius: 4px;
  text-align: left;
}
.faq-acr .faq-que .arrow-top {
  display: none;
}
.faq-acr .faq-que .arrow-bottom {
  display: block;
  color: #888;
}
.faq-acr .faq-que.on .arrow-bottom {
  display: none;
}
.faq-acr .faq-que.on .arrow-top {
  display: block;
  color: var(--cc-color-10);
}

/* // FAQ 페이지 내  faq-acr custom end  */
.link-title .new-flag {
  margin-left: 4px;
}

.msg-check {
  color: var(--cc-color-06);
  font-size: 12px;
  line-height: 1.5;
}

.btn-file-delete {
  position: relative;
}
.btn-file-delete::before {
  content: "X";
  display: block;
  position: absolute;
  top: 0;
  right: 20px;
  font-size: 24px;
  color: #000;
  width: 25px;
  height: 25px;
}

/*  textarea 결과 text ( Q&A 답변 수정 페이지 등) */
.textarea-cnt {
  min-height: 300px;
  padding: 10px;
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  line-height: normal;
}

/*  textarea 결과 ( Q&A 답변 수정 페이지 등) end */
/* 지역검색 page - projectArea map */
.wrap-map-korea {
  width: 100%;
  min-height: 640px;
  overflow: hidden;
  border: 1px solid var(--dlsp-tblHthC-border);
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wrap-map-korea object {
  width: 100%;
}

/* 지역검색 page - projectArea  end */
/* 지역검색 page - table custom sticky 수정 */

/* 230531 문체부 외부데이터관리  */
.mcst-table th {
	min-width:120px;
}
.mcst-table th,
.mcst-table td{
	padding: 0 20px;
}

.wrap-table-sticky {
  position: relative;
  width: 100%;
  height: 640px;
  max-height: 640px;
  overflow-y: auto;
  border-top: 3px solid var(--cc-mainB-color);
  border-bottom: 1px solid var(--cc-mainB-color);
}
.wrap-table-sticky .table-sticky {
  width: 100%;
  border-spacing: 0;
  text-align: center;
  border-collapse: collapse;
}
.wrap-table-sticky .table-sticky th,
.wrap-table-sticky .table-sticky td {
  height: 40px;
  border-collapse: collapse;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.wrap-table-sticky .table-sticky td {
  font-size: var(--fs-table-td);
  font-weight: initial !important;
  color: var(--dlsp-fontGy-color);
  border-bottom: 1px solid var(--dlsp-tblHthB-border);
}
.wrap-table-sticky .table-sticky td:first-child {
  border-left: none;
}
.wrap-table-sticky .table-sticky td:last-child {
  border-right: none;
}
.wrap-table-sticky .table-sticky thead {
  position: relative;
  background-color: #fff;
}
.wrap-table-sticky .table-sticky thead tr {
  background-color: #fff;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  height: 50px;
  border: none;
  outline: none;
}
.wrap-table-sticky .table-sticky thead tr th {
  position: relative;
  height: 50px;
  padding: 0;
  border: none;
  outline: none;
  background-color: #fff;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(1) > th {
  background-color: #f8fbff;
  font-size: 16px;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(1) > th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) {
  top: 50px;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th {
  font-size: var(--fs-gnb-3d);
  font-weight: 500;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th:nth-of-type(1) {
  height: 100px;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th:nth-of-type(2) {
  height: 50px;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th:nth-of-type(3) {
  height: 50px;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 50px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th::before {
  top: 0;
  left: 0;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(2) > th:nth-of-type(1)::before {
  width: 0;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(3) {
  top: 100px;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(3) > th {
  font-weight: 300;
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(3) > th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(3) > th::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 50px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky .table-sticky thead tr:nth-of-type(3) > th::before {
  bottom: 0;
  left: 0;
}
.wrap-table-sticky tbody tr:hover {
  background-color: var(--dlsp-bggr-color);
  cursor: pointer;
}
.wrap-table-sticky tbody tr:hover a {
  text-decoration: underline;
}

/* 231108 통합분석 슬라이드 테이블 */
.wrap-table-sticky .slide-td{
	max-width:100px;
	text-wrap:nowrap;
	overflow:hidden;
	padding: 0 8px;
}
.custom-chart-container {
  position: relative;
  width: 100%;
  height: 640px;
  max-height: 640px;
  overflow-y: auto;
  border-top: 1px solid var(--cc-mainB-color);
  border-bottom: 1px solid var(--cc-mainB-color);
 }
.custom-chart-table {
  width: 100%;
  border-spacing: 0;
  text-align: center;
  border-collapse: collapse; /* collapse로 변경 */
}

/*온라인 서비스 사업자 TOP100 차트*/
.custom-chart-table th,
.custom-chart-table td {
  height: 40px;
  border: 1px solid #e0e0e0; /* 테두리 추가 */
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 5px; /* 내용과 테두리 사이 여백 추가 */
}
.custom-chart-table thead tr:nth-of-type(1) > th {
  background-color: #fff;
  font-size: 16px;
}
.custom-chart-table thead tr:nth-of-type(2) > th {
  background-color: #fff;
  font-weight: bold;
}
.custom-chart-table tbody tr:hover {
  background-color: #fff;
  cursor: pointer;
}
.custom-chart-table tbody tr:hover {
  background-color: var(--dlsp-bggr-color);
  cursor: pointer;
}
.custom-chart-table tbody tr:hover a {
  text-decoration: underline;
}
.custom-chart-table thead tr:nth-of-type(1) {
  top: 0;
}
.custom-chart-table thead tr:nth-of-type(2) {
  top: 50px;
}

/*230801 매장음악서비스 이상징후 */
.anom-shop-table {
	height:614px !important;
	max-height: none !important;
}
.anom-shop-table .table-sticky thead > tr > th{
	font-weight:normal;
}
.anom-sch-box{
	position:absolute;
	right:0;
}
.anom-info-wrap{
	overflow-y: hidden !important;
}
.anom-info-wrap table{
	min-width:0;
}
.anom-info-wrap .table-type thead > tr {
	background-color: #f5f5f5;
}
.anom-info-wrap .table-type thead > tr > th {
	font-size:14px;
}
.anom-shop-chart{
	width: 100%;
	height: 500px;
	margin-top:20px;
}

/* 지역검색 page table custom end */
@supports (position: sticky) or (position: -webkit-sticky) {
  .wrap-table-sticky .table-sticky thead tr { /* 사파리 브라우저 지원 */
    position: sticky;
    top: 0;
  }
  .wrap-table-sticky .table-sticky thead tr:nth-of-type(2) {
    top: 50px;
  }
  .wrap-table-sticky .table-sticky thead tr:nth-of-type(3) {
    top: 100px;
  }
}
.part-box.part4 .part-box > .wrap-table-sticky {
  height: 500px;
  max-height: 500px;
}

.box.box-12 > .wrap-table-sticky {
  max-height: unset;
  height: auto;
}

.h640 {
  height: 640px;
}

/* // 사용자 정보  메뉴 변경  메뉴명 중복체크 버튼 */
.wrap-flex-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrap-flex-box .btn-type.small {
  line-height: 33px;
}

/*  파일 업로드 버튼 ( 테이블 내부 ) td.rel */
.btn-download {
  color: #335bbd;
  text-align: center;
  cursor: pointer;
}
.btn-download > span {
  text-indent: 5px;
}
.btn-download:hover > span {
  text-decoration: underline;
}
.btn-download:hover .material-icons {
  text-decoration: none !important;
}
.btn-download::before {
  content: "\e226";
  font-family: "Material Icons", "NotoSans", -apple-system, BlinkMacSystemFont, Apple SD Gothic Neo, Segoe UI, Malgun Gothic, 맑은 고딕, sans-serif;
  font-size: 20px;
  text-decoration: none !important;
  text-align: center;
}

.wrap-file-result {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  line-height: 35px;
}
.wrap-file-result .btn-download {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrap-file-result > span {
  cursor: pointer;
}
.wrap-file-result .btn-type.small {
  line-height: 33px;
}
.wrap-file-result + .wrap-file-up {
  margin-top: 10px;
}

.wrap-file-up {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrap-file-up .btn-type.small {
  line-height: 33px;
}
.wrap-file-up input[type=text] {
  width: unset;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
.wrap-file-up .btn-type {
  width: 100px;
  padding: 0 5px;
}
.wrap-file-up .material-icons {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
}

/* 파일 업로드 버튼 ( 테이블 내부 )td.rel */
/*  notFound.html -> error 안내 페이지  */
.page-error {
  background-color: #231557;
  background-image: linear-gradient(0deg, #231557 0%, rgba(3, 211, 142, 0) 70%), linear-gradient(135deg, #5f1afa 10%, rgba(103, 105, 235, 0.8352941176) 80%), linear-gradient(225deg, #00bcd4 10%, rgba(3, 196, 221, 0) 80%), linear-gradient(315deg, #231557 100%, rgba(170, 9, 211, 0) 70%);
}
.page-error .box {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  min-height: calc(100vh - 200px);
  height: 100%;
}
.page-error .txt-box {
  width: 40%;
  text-align: center;
}
.page-error .txt-box h2 {
  font-size: 6em;
  color: #fff;
  color: #ffb200;
}
.page-error .txt-box h3 {
  font-size: 3em;
  margin-top: 0.5em;
  margin-bottom: 1em;
  color: #fff4cf;
}
.page-error .txt-box h4 {
  font-size: 2em;
  line-height: 2;
  margin-bottom: 0.5em;
  margin-bottom: 0.5em;
  color: #fff;
}
.page-error .txt-box a {
  display: inline-block;
  font-size: 1.5em;
  line-height: 1.8em;
  vertical-align: middle;
  padding: 0 2em;
  border-radius: 1em;
  cursor: pointer;
  color: #fff;
  background-color: #c211a1;
}
.page-error .img-box {
  width: 40em;
}
.page-error .img-box img {
  display: block;
  width: 100%;
  height: 100%;
}

/*  notFound.html -> error 안내 페이지 end */
/* preloader 페이지 로딩 custom */
.wrap-preloader {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10100;
  overflow: hidden;
  font-size: 10px;
}
.wrap-preloader .preloader {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 10em;
  height: 50em;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10000;
  color: #fff;
  margin: auto;
}
.wrap-preloader .preloader > i {
  background-color: currentColor;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.2em;
  margin-right: 0.2em;
  -webkit-animation: preloader-bar 1s ease-in-out infinite;
          animation: preloader-bar 1s ease-in-out infinite;
}
.wrap-preloader .preloader > i:nth-child(2n) {
  -webkit-animation-name: preloader-bar-2;
          animation-name: preloader-bar-2;
}
.wrap-preloader .preloader > i:nth-child(2) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.wrap-preloader .preloader > i:nth-child(3) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.wrap-preloader .preloader > i:nth-child(4) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.wrap-preloader .preloader > i:nth-child(5) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@-webkit-keyframes preloader-bar {
  0% {
    height: 0.6em;
    opacity: 0.5;
  }
  15% {
    opacity: 1;
    height: 2em;
  }
  30% {
    height: 2em;
  }
  45% {
    opacity: 1;
    height: 0.6em;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    height: 0.6em;
    opacity: 0.5;
  }
}
@keyframes preloader-bar {
  0% {
    height: 0.6em;
    opacity: 0.5;
  }
  15% {
    opacity: 1;
    height: 2em;
  }
  30% {
    height: 2em;
  }
  45% {
    opacity: 1;
    height: 0.6em;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    height: 0.6em;
    opacity: 0.5;
  }
}
@-webkit-keyframes preloader-bar-2 {
  0% {
    height: 0.6em;
    opacity: 0.5;
  }
  15% {
    opacity: 1;
    height: 2em;
  }
  30% {
    height: 2em;
  }
  45% {
    opacity: 1;
    height: 0.6em;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    height: 0.6em;
    opacity: 0.5;
  }
}
@keyframes preloader-bar-2 {
  0% {
    height: 0.6em;
    opacity: 0.5;
  }
  15% {
    opacity: 1;
    height: 2em;
  }
  30% {
    height: 2em;
  }
  45% {
    opacity: 1;
    height: 0.6em;
  }
  60% {
    opacity: 0.7;
  }
  100% {
    height: 0.6em;
    opacity: 0.5;
  }
}


.fontRed {
  color: var(--cc-color-06) !important;
}

/* 보고서 출력 css */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 이상징후 240928 */
.wrap-table-sticky2 {
  position: relative;
  width: 100%;
  height: 50x;
  max-height: 758px;
  overflow-y: auto;
  border-top: 1px solid var(--cc-mainB-color);
  border-bottom: 1px solid var(--cc-mainB-color);
}

.wrap-table-sticky2 thead{
  background-color: #fff;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
  height: 50px;
  border: none;
  outline: none;
}
.wrap-table-sticky2 .table-type thead tr:first-child th{
	font-weight: bold;
	background-color: #f8fbff;
}
.wrap-table-sticky2 .table-type thead tr:first-child th::after {
  content: "";
  position: absolute;
  bottom: 48px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky2 .table-type thead tr th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky2 .table-type thead tr th::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--cc-mainB-color);
}
.wrap-table-sticky2 tr{
	cursor: pointer;
}
.wrap-table-sticky2 td,
.music-table td{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.detail-btn{
	position: absolute;
	right: 0;
	top: 82px; 
	z-index:1
}

/*  preloader end */



/*20240414 추가*/
.table-type.verti td.flex03 {
	display:flex;
	gap:10px;
	min-height:67.5px;
	border-top:none !important;
	width:1207px;
	max-height: 68px;
	}
.song-list-container {
	max-height: 210px;
	overflow-y: auto;
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 5px;
	margin-bottom: 20px;
	clear: both;
  }
  .song-list {
	list-style-type: none;
	padding: 0;
  }
  .song-list li {
	margin: 10px 0;
	padding: 10px;
	background-color: #f1f1f1;
	border-radius: 5px;
	display: flex;
	justify-content: space-between;
	font-size: 15px;
  }
  .empty-message {
	text-align: center;
	color: #777;
	font-style: italic;
  }
 input[type="date"] {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    height: 35px;
    padding: 0 10px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #ccc;
}
 .graph-container {
    margin: 20px 0;
    padding: 30px 20px 0px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
}
#transmissionGraph {
	/* width: 100%; */
	height: 500px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	position: relative;
	display: block;

}

.list-style-detail > ul li:nth-child(3):last-child {
	width:100%;
}
.list-style-detail > ul li:nth-child(3):last-child .list-title {
	max-width:210px;
}
/* 신탁관리리단체별 방송 통계*/
.pie-charts-wrapper {
    width: 100%;
    display: block;
    background: #fff;
    border-radius: 8px;
}

#pie_chart_container {
    width: 100%;
    font-size: 0; /* inline-block 간격 제거 */
}

.pie-chart-wrapper {
    width: 50%;
    height: 450px;
    display: inline-block;
    vertical-align: top;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px; /* 폰트 사이즈 복원 */
}

/* ✅ 요약 카드 전체 컨테이너 */
.summaryBox {
  display: flex;
  flex-wrap: wrap;              /* 줄바꿈 허용 */
  justify-content: space-between;
  gap: 12px;
  margin: 25px 0;
}

/* ✅ 각 카드 스타일 */
.summaryItem {
  flex: 1 1 18%;                /* 한 줄에 5개씩 자동 배분 */
  min-width: 180px;             /* 너무 좁아지지 않게 */
  background: #fafafa;
  border-radius: 10px;
  padding: 15px 10px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease;
}

.summaryItem:hover {
  transform: translateY(-2px);
}

.summaryItem p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.summaryItem h3 {
  margin-top: 6px;
  font-size: 22px;
  font-weight: bold;
  color: #FF6600;
}

/* ✅ 반응형 (화면 작아질 때 2~3개씩 줄바꿈) */
@media (max-width: 1000px) {
  .summaryItem { flex: 1 1 30%; }
}

@media (max-width: 600px) {
  .summaryItem { flex: 1 1 45%; }
}


/* 긴 경로 말줄임 */
#tblBodyList td.ellipsis {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 상태 배지 */
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:12px; font-weight:600; }
.badge-up  { background:#e8f7ee; color:#1e9e52; border:1px solid #bfe5cd; }
.badge-dn  { background:#eef3ff; color:#3366ff; border:1px solid #cdd8ff; }
.badge-etc { background:#f5f5f5; color:#666;    border:1px solid #ddd;  }

/* 크기 경고 */
.size-warn { color:#e74c3c; background:#fff3e8; border:1px solid #ffd1b3; border-radius:6px; padding:2px 6px; font-weight:600; }
.size-ok   { color:#333; }

/* 행 전체 약한 하이라이트(선택) */
.row-warn td { background: #fff9f4; }


/* ================================
   방송 편성표 타임라인 전용 스타일
   ================================ */

/* JSP에서 감싸는 컨테이너 */
#scheduleContainer {
  position: relative;
}

/* 1. 전체 컨테이너: 세로 스크롤 담당 */
.schedule-shell {
  width: 100%;
  height: 550px;       /* 높이 고정 */
  
  /* 세로 스크롤은 여기서 처리, 가로 스크롤은 숨김 (내부 main이 담당) */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* 안쪽은 flex 레이아웃만 담당 */
.schedule-scroll {
  display: flex;
  align-items: flex-start;
}



.time-column-inner {
  position: relative;
}

.time-cell {
  height: 40px; /* JS의 ROW_HEIGHT_PX 와 동일해야 함 */
  padding: 2px 8px;
  font-size: 11px;
  color: #6b7280;
  border-bottom: 1px dashed #e5e7eb;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* 2. 본문 영역: 가로 스크롤바 강제 표시 */
.schedule-main {
  position: relative;
  flex: 1 1 auto;
  
  /* ★ 수정: 하단 가로 스크롤바가 무조건 보이도록 'scroll'로 설정 */
  overflow-x: scroll !important;
  overflow-y: hidden !important;
}

/* (선택사항) 본문 하단의 기본 가로 스크롤바 숨기기 (상단바만 쓰기 위해) */
.schedule-main::-webkit-scrollbar {
  height: 0px;
  background: transparent;
}


/* 3. 헤더 영역: 배경 끊김 방지 및 상단 고정 */
.schedule-header-wrapper {
  position: sticky;
  top: 0;            /* 세로 스크롤 시 상단 고정 */
  z-index: 30;
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;

  /* ★ 핵심: 채널이 많아도 배경색이 끊기지 않도록 너비 자동 확장 */
  width: max-content; 
  min-width: 100%;
}


/* 4. 왼쪽 시간 컬럼: 고정 */
.time-column {
  flex: 0 0 80px;
  border-right: 1px solid #e5e7eb;
  background: #f9fafb;
  position: sticky;
  left: 0;
  z-index: 20; 
}

/* 채널 헤더는 이제 sticky 아님 (래퍼가 sticky) */
.channel-header-row {
  position: relative;
  top: auto;
  z-index: auto;
  background: transparent;
  border-bottom: none;
}

.channel-header-row-inner {
  display: inline-flex;
  min-width: 100%;
}

/* 5. 상단 스크롤바: 다시 보이도록 설정 */
.schedule-scrollbar-top {
  display: block !important; /* ★ 수정: 상단 스크롤바 보이게 복구 */
  height: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: #f3f4f6;
  position: relative;
  z-index: 31;
}

/* 실제 너비만 맞추는 더미 div */
.schedule-scrollbar-top-inner {
  height: 1px;
}


.channel-header-cell {
  min-width: 160px;
  padding: 6px 10px;
  border-right: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  box-sizing: border-box;
}

/* ▒ 채널별 세로 열 + 프로그램 박스 영역 ▒ */
.channel-scroll {
  position: relative;
}

.channel-columns {
  position: relative;
  display: inline-flex;
}

.channel-column {
  position: relative;
  min-width: 160px;
  border-right: 1px solid #f3f4f6;
  box-sizing: border-box;
}

.channel-column-inner {
  position: relative;  /* 프로그램 블록 absolute 기준 */
  box-sizing: border-box;
}

/* ▒ 프로그램 박스 (본방 기본) ▒ */
.program-block {
  position: absolute;
  left: 4px;
  right: 4px;

  border-radius: 6px;
  padding: 3px 5px;
  font-size: 10px;

  background: #e3f2fd;       /* 연한 블루 */
  border: 1px solid #64b5f6; /* 블루 테두리 */
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);

  overflow: hidden;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #0f172a;
  box-sizing: border-box;
}

/* 재방송 프로그램 박스 (1안 색상) */
.program-block.rebroadcast {
  background: #fff7e0;   /* 연한 옐로우 */
  border-color: #fbbf24; /* 골드 테두리 */
  color: #111827;
}

/* 프로그램 타이틀 + 뱃지 라인 */
.program-header {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 재방송 동그라미 RE 뱃지 */
.program-badge-re {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #f59e0b;
  background: #fffbeb;

  font-size: 10px;
  color: #92400e;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 프로그램 제목 */
.program-title {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;

  overflow: hidden;
  text-overflow: ellipsis;

  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 두 줄까지만 보이게 */
  -webkit-box-orient: vertical;
}

/* 방송 시간, EP/PART 정보 */
.program-meta {
  font-size: 10px;
  color: #4b5563;
}

/* ▒ 데이터 없을 때 ▒ */
.schedule-empty {
  padding: 40px 16px;
  text-align: center;
  font-size: 13px;
  color: #6b7280;
}

/* ▒ 로딩 오버레이 ▒ */
#scheduleContainer.is-loading::after {
  content: "로딩 중...";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  color: #4b5563;
  z-index: 10;
}




/* ================================
   방송 편성표 타임라인 최종 수정 (헤더 고정 최적화)
   ================================ */

/* 1. 전체 껍데기: 모든 스크롤(가로/세로)을 여기서 담당 */
.schedule-shell {
  width: 100%;
  height: 550px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  
  /* ★ 핵심: 가로/세로 스크롤 모두 허용 */
  overflow: auto !important; 
  position: relative;
}

/* 2. 내부 레이아웃: 플렉스 박스가 찌그러지지 않게 설정 */
.schedule-scroll {
  display: flex;
  /* 내용물이 많으면 부모(shell)보다 더 넓어지도록 허용 */
  min-width: max-content; 
}

/* 3. 본문 영역: 자체 스크롤 권한을 포기하고 부모(shell)에 위임 */
.schedule-main {
  position: relative;
  flex: 1 1 auto;
  
  /* ★ 핵심: sticky가 작동하도록 overflow를 visible로 설정 (스크롤 트랩 해제) */
  overflow: visible !important; 
  display: block;
}

/* 4. 헤더 영역: 상단 고정 (Sticky) */
.schedule-header-wrapper {
  position: sticky;
  top: 0;            /* 세로 스크롤 시 상단에 딱 붙음 */
  z-index: 30;       /* 내용물보다 위에 오도록 */
  background: #f3f4f6;
  border-bottom: 1px solid #e5e7eb;
  
  /* 배경이 잘리지 않도록 꽉 채움 */
  width: 100%;
}

/* 5. 왼쪽 시간 컬럼: 좌측 고정 (Sticky) */
.time-column {
  position: sticky;
  left: 0;           /* 가로 스크롤 시 왼쪽에 딱 붙음 */
  z-index: 40;       /* 헤더보다 더 위에 오도록 */
  background: #f9fafb;
  border-right: 1px solid #e5e7eb;
  flex: 0 0 80px;    /* 너비 고정 */
}

/* 6. 상단 스크롤바 숨김 (JS와 충돌 방지) */
/* 구조 변경으로 인해 JS 상단 스크롤바는 작동하지 않으므로 숨깁니다. 
   대신 하단에 생기는 브라우저 기본 스크롤바를 사용하세요. */
.schedule-scrollbar-top {
  display: none !important;
}

/* 7. (선택사항) 하단 스크롤바 디자인 (눈에 잘 띄게) */
.schedule-shell::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: #f1f1f1;
}
.schedule-shell::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 6px;
  border: 2px solid #f1f1f1;
}


/* ================================
   방송 편성표 최종 (5분 지원 + 툴팁)
   ================================ */

/* 1. 시간 격자 높이: JS의 ROW_HEIGHT_PX(120px)와 동일해야 함 */
.time-cell {
  height: 120px !important;  /* 30분당 120px (1분당 4px) */
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
  border-bottom: 1px dashed #e5e7eb;
}

/* 2. 프로그램 박스 기본 디자인 */
.program-block {
  border: 1px solid #90caf9;
  background-color: #e3f2fd;
  box-sizing: border-box;
  overflow: visible !important; /* ★ 툴팁이 밖으로 튀어나와도 보이게 설정 */
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 4px;
}

/* 짧은 방송(높이가 작은)도 마우스 올리면 잘 보이게 */
.program-block:hover {
  z-index: 100 !important;
  background-color: #bbdefb;
  border-color: #2196f3;
}

/* 3. 툴팁 박스 스타일 (평소엔 숨김) */
/* 1. 기본: 무조건 오른쪽으로 띄움 */
.program-tooltip {
  display: none;
  position: absolute;
  left: 100%;    /* 기본: 오른쪽으로 표시 */
  top: 0;
  width: 200px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 10px;
  border-radius: 6px;
  z-index: 9999; /* ★ 시간바(z-index:40)보다 훨씬 높게 설정 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
}

/* 마우스 오버 시 툴팁 표시 */
.program-block:hover .program-tooltip {
  display: block;
}

/* 만약 오른쪽 끝이라 툴팁이 잘린다면? (CSS로 간단 처리: 오른쪽 채널들은 왼쪽으로 띄움) */
/* 2. 예외 처리: 오른쪽 끝 채널들은 왼쪽으로 띄움 
   ★ 수정: :not(:first-child)를 추가하여 '채널이 1개뿐일 때'는 제외 */
.channel-column:last-child:not(:first-child) .program-tooltip,
.channel-column:nth-last-child(2):not(:first-child) .program-tooltip {
  left: auto;
  right: 100%; /* 왼쪽으로 표시 */
}

/* 3. (혹시 모를 안전장치) 첫 번째 채널은 무조건 오른쪽 강제 */
.channel-column:first-child .program-tooltip {
  left: 100% !important;
  right: auto !important;
}

/* 4. 툴팁 내부 꾸미기 */
.program-tooltip .tt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.program-tooltip .tt-channel {
  font-weight: bold;
  color: #ffcc80; /* 강조색 */
}
.program-tooltip .tt-badge-re {
  background: #ff9800;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
.program-tooltip .tt-badge-live {
  background: #4caf50;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
}
.program-tooltip .tt-time {
  color: #ddd;
  font-size: 11px;
  margin-bottom: 3px;
}
.program-tooltip .tt-title {
  font-size: 13px;
  font-weight: bold;
  word-break: break-all;
}

/* 신탁관리 단체 조회화면*/
.trust-file-list {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 20px;
}

.trust-file-list .page-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
}

.year-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}

.year-nav-btn {
    width: 40px;
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.year-nav-btn:hover {
    background-color: #e0e0e0;
    border-color: #999;
}

.year-btn {
    min-width: 80px;
    height: 40px;
    padding: 0 20px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.3s ease;
}

.year-btn:hover {
    background-color: #e3f2fd;  /* 옅은 파란색 호버 */
    border-color: #90caf9;
}

.year-btn.active {
    background-color: #bbdefb;  /* 옅은 파란색 */
    border-color: #42a5f5;      /* 진한 파란색 테두리 */
    color: #1565c0;             /* 진한 파란색 텍스트 */
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(66, 165, 245, 0.3);
}

.year-btn.active:hover {
    background-color: #90caf9;  /* 호버 시 더 진한 파란색 */
    border-color: #1976d2;
}

.search-area {
    display: flex;
    align-items: center;
    gap: 8px;  /* 기존 10px에서 8px로 축소 */
    margin-bottom: 20px;
    flex-wrap: wrap;  /* 화면이 좁을 때 줄바꿈 */
}

.search-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    min-width: fit-content;  /* 기존 60px에서 내용에 맞게 변경 */
    margin-right: 4px;  /* 라벨과 셀렉트 박스 사이 간격 */
}

.search-select {
    min-width: 140px;  /* 기존 150px에서 140px로 축소 */
    height: 40px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

.search-select:focus {
    border-color: #999;
}

.search-btn {
    min-width: 80px;
    height: 40px;
    padding: 0 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;  /* 검색 버튼 왼쪽 간격 */
    transition: all 0.2s;
}

.search-btn:hover {
    background-color: #555;
}

.search-area-compact {
    display: flex;
    align-items: center;
    gap: 6px;  /* 더 좁은 간격 */
    margin-bottom: 20px;
}

.search-area-compact .search-label {
    font-size: 13px;
    margin-right: 3px;
}

.search-area-compact .search-select {
    min-width: 120px;  /* 더 좁게 */
    height: 38px;
    font-size: 13px;
}

.result-count {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.result-count .count {
    color: #ff5722;
    font-weight: 700;
}

.trust-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
}

.trust-table thead tr {
    background-color: #f9f9f9;
    border-top: 2px solid #333;
    border-bottom: 1px solid #ddd;
}

.trust-table thead th {
    padding: 15px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-align: center;
}

.trust-table tbody tr {
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.trust-table tbody tr:hover {
    background-color: #f9f9f9;
}

.trust-table tbody td {
    padding: 15px 10px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.trust-table tbody td.title {
    text-align: left;
}

.trust-table tbody td.title a {
    color: #333;
    text-decoration: none;
    font-weight: 500;
}

.trust-table tbody td.title a:hover {
    color: #ff5722;
    text-decoration: underline;
}

.trust-table tbody td.empty {
    padding: 60px 20px;
    text-align: center;
    color: #999;
    font-size: 14px;
}

.download-btn {
    padding: 8px 16px;
    background-color: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.download-btn:hover {
    background-color: #d0d0d0;
}

.paging {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.paging-box {
    display: flex;
    gap: 5px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.paging-box li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s;
}

.paging-box li a:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.paging-box li.active a {
    background-color: #ff5722;
    border-color: #ff5722;
    color: #fff;
    font-weight: 600;
}

.register-btn-wrap {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.register-btn {
    padding: 12px 24px;
    background-color: #ff5722;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.register-btn:hover {
    background-color: #e64a19;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.trust-reg-wrapper {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
}

.trust-reg-container {
    width: 100%;
    max-width: 900px;
}

.page-header {
    margin-bottom: 50px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.form-content {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.field-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.field-label .required {
    color: #ff5722;
    margin-left: 3px;
}

.field-select,
.field-input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 12px;
    font-size: 14px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: all 0.2s;
}

.field-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.field-input {
    padding: 0 12px;
}

.field-select:focus,
.field-input:focus {
    background-color: #fff;
    border-color: #999;
}

.field-input::placeholder {
    color: #999;
}

/* 파일 업로드 영역 */
.file-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-upload-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-file-select {
    height: 44px;
    padding: 0 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-file-select:hover {
    background-color: #555;
}

.file-name-display {
    font-size: 14px;
    color: #666;
}

.file-help-text {
    font-size: 12px;
    color: #999;
}

.form-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.btn {
    height: 44px;
    padding: 0 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-submit {
    background-color: #ff5722;
    color: #fff;
}

.btn-submit:hover {
    background-color: #e64a19;
}

.btn-cancel {
    background-color: #999;
    color: #fff;
}

.btn-cancel:hover {
    background-color: #777;
}

.trust-table tbody tr.clickable-row {
    cursor: pointer;
    transition: all 0.2s;
}

.trust-table tbody tr.clickable-row:hover {
    background-color: #f0f7ff !important;  /* 옅은 파란색 배경 */
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.trust-table tbody td {
    padding: 15px 10px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/*신탁관리 단체 수정*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.trust-upd-wrapper {
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
}

.trust-upd-container {
    width: 100%;
    max-width: 900px;
}

.page-header {
    margin-bottom: 50px;
}

.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.form-content {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field.full-width {
    grid-column: 1 / -1;
}

.field-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.field-label .required {
    color: #ff5722;
    margin-left: 3px;
}

.field-select,
.field-input {
    width: 100%;
    height: 44px;
    padding: 0 40px 0 12px;
    font-size: 14px;
    color: #333;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    transition: all 0.2s;
}

.field-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.field-input {
    padding: 0 12px;
}

.field-select:focus,
.field-input:focus {
    background-color: #fff;
    border-color: #999;
}

.field-input::placeholder {
    color: #999;
}

/* 기존 파일 표시 */
.current-file-info {
    display: inline-flex;
    align-items: center;
    padding: 10px 15px;
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 4px;
    margin-bottom: 10px;
}

.current-file-info a {
    color: #1976d2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.current-file-info a:hover {
    text-decoration: underline;
}

/* 파일 업로드 영역 */
.file-upload-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-upload-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-file-select {
    height: 44px;
    padding: 0 20px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.btn-file-select:hover {
    background-color: #555;
}

.file-name-display {
    font-size: 14px;
    color: #666;
}

.file-help-text {
    font-size: 12px;
    color: #999;
}

/* 버튼 영역 */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}

.btn {
    height: 44px;
    padding: 0 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-list {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
}

.btn-list:hover {
    background-color: #f5f5f5;
}

.btn-submit {
    background-color: #ff5722;
    color: #fff;
}

.btn-submit:hover {
    background-color: #e64a19;
}

.btn-delete {
    background-color: #333;
    color: #fff;
}

.btn-delete:hover {
    background-color: #555;
}

.btn-cancel {
    background-color: #999;
    color: #fff;
}

.btn-cancel:hover {
    background-color: #777;
}





/* 대시보드 전용 스타일 (기존 디자인 시스템 상속) */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3단 배열 */
    gap: 20px;
    margin-bottom: 20px;
}

/* KPI 카드 내부 */
.kpi-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
}

.kpi-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 8px;
}

.kpi-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.kpi-label {
    font-size: 14px;
    color: #666; /* 기존 회색 폰트 */
    font-weight: 500;
}

.kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #333; /* 기존 진한 폰트 */
}

.kpi-hint {
    font-size: 13px;
    color: #888;
    text-align: right;
    margin-top: 4px;
}

/* 증감 표시 색상 */
.delta.up { color: #e53757; } /* 상승 - 빨강 */
.delta.down { color: #3279f4; } /* 하락 - 파랑 */

/* 차트 높이 고정 */
.chart-container-custom {
    width: 100%;
    height: 380px;
    position: relative;
}

/* 반응형 (모바일 등) */
@media screen and (max-width: 1025px) {
    .kpi-grid {
        grid-template-columns: 1fr; /* 모바일에서 1단 배열 */
    }
    .chart-dual {
        flex-direction: column;
    }
    .chart-dual > div {
        margin-bottom: 20px;
    }
}