@charset "UTF-8";
/* // 데스크탑 우선 미디어 쿼리 분기점 정리 */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 1025px ~ 1441px 까지 */
/* @media screen and (max-width: 1441px) {
} */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 769px ~ 1025px 까지 */
/* @media screen and (max-width: 1025px) {
} */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 482px ~ 769px 까지 */
/* @media screen and (max-width: 769px) {
} */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 481px 까지*/
/* @media screen and (max-width: 481px) {
} */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 추가 */
/* @media all and (min-width: 0) and (max-width: 320px) {
/* @media all and (min-width: 0) and (max-width: 340px) {
} */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* 
.wrapper .theme-chg {
  width: 45px !important;
}

.wrapper .theme-chg .material-icons {
  color: #fff;
  vertical-align: sub;
}

.wrapper .theme-chg .theme-select {
  line-height: 75px !important;
}

.wrapper .theme-chg .theme-select span {
  line-height: 75px !important;
}

.wrapper .theme-chg ul {
  width: 160px !important;
  right: 0;
  position: absolute;
}

.wrapper .theme-chg ul li {
  line-height: 1;
} */
/*  pc start*/
.wrapper {
  padding-top: 80px;
}
.wrapper .content-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: calc(100vh - 220px);
  /* 내용 짧은 페이지 일 때 content-wrap 여백  + footer 하단 고정 
  .wrapper padding TOP = header height
  .content-wrap min-height = header height + footer height + sub-gnb height
  기본값 header height + sub-gnb  + footer height = calc(100vh - 220px) 
  */
  /* 내용 짧은 페이지 일때  content-wrap 여백 content-wrap 여백  + footer 하단 고정 end */
}
.wrapper .content-wrap.page-error {
  min-height: calc(100vh - 160px);
}
.wrapper .content-wrap.password {
  min-height: calc(100vh - 160px);
}
.wrapper .content {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  padding-bottom: 40px;
}
.wrapper .title-area {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 110px;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.wrapper .title-area .inner {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.wrapper .title-area:before {
  content: "";
  width: 100%;
  height: 110px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.wrapper .title-area:after {
  content: "";
  width: 100%;
  height: 40px;
  border-top: 1px solid #ececec;
}
.wrapper .title-area .title {
  font-size: 22px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.wrapper .title-area .bread-crumbs {
  margin-left: auto;
}
.wrapper .title-area .bread-crumbs ul li {
  display: inline-block;
}
.wrapper .title-area .bread-crumbs ul li::after {
  content: ">";
  margin: 0 5px;
}
.wrapper .title-area .bread-crumbs ul li:last-of-type a {
  color: var(--dlsp-fontDe-color);
}
.wrapper .title-area .bread-crumbs ul li:last-of-type:after {
  content: "";
  display: none;
}
.wrapper .title-area .bread-crumbs ul li a {
  color: #707070;
}

/* sub navigation */
.sub-gnb {
  z-index: 2;
  height: 60px;
  border-bottom: 1px solid #ececec;
  background-color: #f9f9f9;
}
.sub-gnb > .inner {
  width: 100%;
  max-width: 1420px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.sub-gnb ul.menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 60px;
  width: 100%;
}
.sub-gnb ul.menu > li.home {
  width: 60px;
  height: 100%;
  line-height: 60px;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: center;
}
.sub-gnb ul.menu > li.home a {
  width: 100%;
}
.sub-gnb ul.menu > li.home a span {
  line-height: 60px;
}
.sub-gnb ul.menu > li {
  position: relative;
  width: 210px;
  max-width: 210px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.sub-gnb ul.menu > li > a {
  border-left: 1px solid #ececec;
}
.sub-gnb ul.menu > li ul.menu-sub {
  position: absolute;
  width: 100%;
  top: 60px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-bottom: 1px solid #ececec;
  border-right: 1px solid #ececec;
  border-left: 1px solid #ececec;
  display: none;
}
.sub-gnb ul.menu > li ul.menu-sub li {
  width: 100%;
  line-height: 60px;
  background-color: #f9f9f9;
}
.sub-gnb ul.menu > li ul.menu-sub li a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 60px;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.sub-gnb ul.menu > li ul.menu-sub li.on {
  display: block;
}
.sub-gnb ul.menu > li ul.menu-sub.on {
  display: block;
}
.sub-gnb ul.menu > li:last-child .menu-sub {
  border-left: 1px solid #ececec;
}
.sub-gnb ul.menu > li:last-child > a {
  border-right: 1px solid #ececec;
}
.sub-gnb ul.menu > li a {
  width: 100%;
  height: 100%;
  line-height: 60px;
  display: block;
  padding: 0 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.sub-gnb ul.menu > li span.arrow {
  position: absolute;
  right: 10px;
  cursor: pointer;
}

/* sub navigation end */
/* footer */
footer {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  height: 80px;
  border-top: 1px solid var(--dlsp-tblHthC-border);
  color: #555;
}
footer .inner {
  padding: 20px 10px 0;
  position: relative;
  width: 100%;
  max-width: 1420px;
  z-index: 1;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #555;
}
footer .inner ul,
footer .inner li,
footer .inner span,
footer .inner a {
  color: #555;
  font-size: 13px;
}
footer .footer-logo {
  width: 170px;
}
footer .footer-logo img {
  width: 100%;
}
footer .footer-nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
footer .footer-nav ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
footer .footer-nav ul li span:nth-of-type(1) {
  margin-right: 10px;
}
footer .footer-nav ul li span:nth-of-type(2) {
  margin-right: 20px;
}
footer .footer-nav ul li > a {
  margin-left: auto;
}
footer .footer-nav ul.footer-home a {
  padding: 10px 10px;
  background: transparent;
  border-radius: 100%;
  color: #fff;
  vertical-align: middle;
}
footer .footer-nav ul.footer-home a span {
  display: inline-block;
}

/* footer end */
.top-btn {
  bottom: 80px;
}

.mob-gnb-mask {
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/*  pc end*/
/*  hover event */
@media (hover: hover) {
  .sub-gnb ul.menu > li ul.menu-sub li a:hover {
    background-color: #f1f1f1;
  }
}
/*  hover event end */
/*  hover 제외 event  */
/* @media (hover: none) {} */
/*  hover 제외 event end */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 1025px ~ 1441px 까지 */
@media screen and (max-width: 1441px) {
  .wrapper .content {
    max-width: 100%;
    padding: 40px 30px;
  }
  .wrapper .title-area .title {
    text-indent: 30px;
  }
  .wrapper .title-area:after {
    height: 0;
  }
  .wrapper .title-area .bread-crumbs {
    padding-right: 30px;
  }
  .part-box {
    width: 100%;
  }
  .part-box.part2,
.part-box.part3,
.part-box.part4,
.part-box.part5 {
    gap: 40px;
  }
  .tab .tab-con > ul > li {
    padding: 30px 0;
  }
  /* .table-wrap */
  .table-wrap {
    overflow-y: auto;
    overflow-x: auto;
  }
  .table-wrap .table-type {
    min-width: 1360px;
  }
  .table-wrap .table-type.sm {
    min-width: 700px;
  }
  /* wrap-filter */
  .wrap-filter > div {
    margin-right: 10px;
  }
  .wrap-filter .elem-filter {
    width: unset;
    min-width: 100px;
    max-width: 150px;
  }
  .wrap-filter .elem-filter .type-select-under {
    width: 100%;
  }
  .wrap-filter .elem-filter .type-datepicker-under {
    width: 100%;
  }
  /* footer */
  footer .inner {
    max-width: 98vw;
    width: 96vw;
  }
  .nodata::before {
    background-size: 30% auto;
  }
  .part-box.part2 .part-box:first-child .nodata::before {
    background-size: 35% auto;
  }
  .part-box.part2 .part-box:nth-child(2) .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part3 .part-box:first-child .nodata::before {
    background-size: 60% auto;
  }
  .part-box.part3 .part-box:nth-child(2) .nodata::before {
    background-size: 35% auto;
  }
  .part-box.part4 .part-box:first-child .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part4 .part-box:nth-child(2) .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part5 .part-box:first-child .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part5 .part-box:nth-child(2) .nodata::before {
    background-size: 35% auto;
  }
  /* 기타 */
  /* 음원 상세 분석 페이지, 장르 상세 페이지 , 제목 musicMarketComb_detail.html , musicMarketGenre_detail.html */
  .part-tit.big-tit {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 15px;
  }
  .part-tit.big-tit > h2 {
    width: 100%;
  }
  .part-tit.big-tit span.artist {
    width: 100%;
  }
  /* 음원 상세 분석 페이지, 장르 상세 페이지 , 제목 musicMarketComb_detail.html , musicMarketGenre_detail.html end */
  /*  notFound.html -> error 안내 페이지  */
  .page-error .box {
    min-height: calc(100vh - 200px);
    height: 100%;
  }
  .page-error .txt-box {
    width: 50%;
  }
  .page-error .txt-box h2 {
    font-size: 5em;
  }
  .page-error .txt-box h3 {
    font-size: 2.3em;
  }
  .page-error .txt-box h4 {
    font-size: 1.8em;
  }
  .page-error .img-box {
    width: 40%;
  }
  /*  notFound.html -> error 안내 페이지 end */
  /* password 페이지 반응형 수정  */
  .card.bor .table-wrap .table-type {
    min-width: unset;
    width: 100%;
  }
  .card.bor .table-wrap .table-type .wid50 {
    width: 100% !important;
  }
  .card.bor .table-wrap .table-type tr th {
    width: 30%;
  }
  .card.bor .btn-wrap {
    margin-right: 1%;
  }
  /* password 페이지 반응형 수정 end */
}
/** 1025px ~ 1441px 까지 end */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 769px ~ 1025px 까지 */
@media screen and (max-width: 1025px) {
  button.btn-tooltip {
    position: absolute;
    right: 0;
    top: 5px;
  }
  button.btn-tooltip .cnt-tooltip {
    width: 300px;
    max-width: 100vw;
    top: 30px;
    left: unset;
    right: 0;
  }
  button.btn-tooltip .cnt-tooltip:before {
    display: none;
  }
  button.btn-tooltip:hover .cnt-tooltip, button.btn-tooltip:focus .cnt-tooltip, button.btn-tooltip:active .cnt-tooltip {
    top: 30px;
    left: unset;
    right: 0;
  }
  .tab > button.btn-tooltip {
    top: 9px;
  }
  .wrapper .content {
    padding: 40px 20px;
  }
  .wrapper .title-area {
    line-height: 60px;
  }
  .wrapper .title-area .inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .wrapper .title-area:before {
    height: 60px;
  }
  .wrapper .title-area .title {
    font-size: 18px;
    text-indent: 30px;
  }
  .card,
.tab-con > ul > li {
    padding: 30px 0;
  }
  /*  상단 설명 card - 음악로그 */
  .card.des-card {
    padding: 20px;
  }
  .card .des {
    font-size: 14px;
  }
  .tab-btn.depth1 .label-box {
    margin-left: unset;
  }
  /* .part-box */
  .part-box .part-tit.chart-tit {
    padding-right: 30px;
  }
  .part-box.part2 .part-box:first-child {
    width: 100%;
  }
  .part-box.part2 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part3 .part-box:first-child {
    width: 100%;
  }
  .part-box.part3 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part4 .part-box:first-child {
    width: 100%;
  }
  .part-box.part4 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part5 .part-box:first-child {
    width: 100%;
  }
  .part-box.part5 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part2,
.part-box.part3,
.part-box.part4,
.part-box.part5 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
  .part-box.part2 .part-box,
.part-box.part3 .part-box,
.part-box.part4 .part-box,
.part-box.part5 .part-box {
    padding-top: 20px;
  }
  .part-box.part3 .part-box.pdt0 {
    width: 100%;
  }
  /* chart-wrap + nodata 이미지 추가  */
  .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part2 .part-box:first-child .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part2 .part-box:nth-child(2) .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part3 .part-box:first-child .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part3 .part-box:nth-child(2) .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part4 .part-box:first-child .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part4 .part-box:nth-child(2) .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part5 .part-box:first-child .nodata::before {
    background-size: 40% auto;
  }
  .part-box.part5 .part-box:nth-child(2) .nodata::before {
    background-size: 40% auto;
  }
  .wrap-table-sticky {
    height: auto;
  }
  .part-box.part4 .part-box > .wrap-table-sticky {
    height: auto;
  }
  /* .part-box end */
  /* .card.des-card background-img 크기 수정 */
  .card.des-card {
    background-size: 20%;
    background-position: right 20px bottom 20px;
    padding: 20px 10px;
  }
  .tab-btn > p {
    display: none;
  }
  .wrap-select-center select + p {
    display: none;
  }
  .list-style-detail.compared {
    padding: 20px 15px;
    margin-top: 0;
  }
  .list-style-detail.compared > ul li {
    width: 50%;
  }
  .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.compared .list-title:after {
    right: 20%;
  }
  .wrap-table-sticky {
    overflow-x: auto;
  }
  .wrap-table-sticky .table-sticky {
    min-width: 700px;
  }
  /*  notFound.html -> error 안내 페이지  */
  .page-error .box {
    min-height: calc(100vh - 280px);
    height: 100%;
  }
  .page-error .txt-box {
    width: 50%;
  }
  .page-error .txt-box h2 {
    font-size: 4em;
  }
  .page-error .txt-box h3 {
    font-size: 2em;
  }
  .page-error .txt-box h4 {
    font-size: 1.6em;
  }
  .page-error .img-box {
    width: 40%;
  }
  /*  notFound.html -> error 안내 페이지 end */
}
/** 769px ~ 1025px 까지 end */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 482px ~ 769px 까지 */
@media screen and (max-width: 769px) {
  /* common style*/
  /* fons size */
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 16px;
  }
  h4 {
    font-size: 14px;
  }
  h5 {
    font-size: 12px;
  }
  h6 {
    font-size: 10px;
  }
  p,
span,
li,
textarea {
    font-size: 14px;
  }
  /* 장르상세 페이지  */
  .part-tit.big-tit > h2 {
    font-size: 30px;
  }
  /* fons size end*/
  .wrapper .content {
    padding: 40px 4%;
  }
  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    font-size: 14px;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    font-size: 14px;
  }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    font-size: 14px;
  }
  input::-ms-input-placeholder, textarea::-ms-input-placeholder {
    font-size: 14px;
  }
  input::placeholder,
textarea::placeholder,
textarea,
.textCnt,
input,
select,
.btnType.small {
    font-size: 14px;
  }
  a.btnType {
    min-width: 80px;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
  }
  .btnType.small {
    min-width: 80px;
  }
  table th,
table td {
    padding: 5px;
    font-size: 14px;
  }
  .content {
    padding: 80px 20px;
    margin-top: 100px;
  }
  /* sub navigation */
  .sub-gnb {
    margin-top: 60px;
  }
  .sub-gnb > .inner {
    width: 100%;
    max-width: 100%;
  }
  .sub-gnb ul.menu > li {
    width: 33%;
  }
  /* sub navigation end */
  .sub-gnb {
    display: none;
  }
  .wrapper {
    padding-top: 60px;
  }
  .wrapper .content-wrap {
    min-height: calc(100vh - 180px);
  }
  .wrapper .content-wrap.page-error {
    min-height: calc(100vh - 180px);
  }
  .wrapper .content-wrap.password {
    min-height: calc(100vh - 180px);
  }
  /* footer */
  footer {
    height: 120px;
    background-color: var(--cc-mainB-color);
  }
  footer .inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    padding-top: 22.5px;
    gap: 10px;
  }
  footer .inner ul,
footer .inner li,
footer .inner span,
footer .inner a {
    color: #888;
    font-size: 12px;
  }
  footer .footer-logo {
    margin: auto;
    padding: unset;
    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: 120px;
  }
  footer .footer-nav ul li {
    font-size: 10px;
    gap: 6px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    line-height: 1.4;
  }
  footer .footer-nav ul li span:nth-of-type(1), footer .footer-nav ul li span:nth-of-type(2) {
    margin-right: unset;
  }
  footer .footer-nav ul li > a {
    color: var(--dlsp-fontGl-color);
    margin-left: auto;
  }
  /* footer end */
  .top-btn {
    bottom: 100px;
  }
  .wrap-map-korea {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .tab .tab-btn > ul > li a {
    padding: 0 30px;
  }
  .datepicker.dropdown-menu {
    margin-top: 8px;
  }
  .wrap-musictab {
    margin-bottom: 30px;
  }
  /* chart-wrap + nodata 이미지 추가  */
  .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part2 .part-box:first-child .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part2 .part-box:nth-child(2) .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part3 .part-box:first-child .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part3 .part-box:nth-child(2) .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part4 .part-box:first-child .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part4 .part-box:nth-child(2) .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part5 .part-box:first-child .nodata::before {
    background-size: 50% auto;
  }
  .part-box.part5 .part-box:nth-child(2) .nodata::before {
    background-size: 50% auto;
  }
  /*   // <!-- wrap-slide-rank 슬라이드 custom common --> */
  .wrap-slide-rank {
    height: 100%;
  }
  .wrap-slide-rank .swiper {
    padding: 0 20px;
  }
  .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 {
    width: calc(var(--swiper-navigation-size) / 44 * 10);
  }
  .swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 20px;
  }
  /* // <!-- wrap-slide-rank 슬라이드 custom common end --> */
  /* .list-style-detail ( 위탁관리곡 음원목록 정보 commissionMusic.html + 음원 상세 분석 페이지 상단 musicMarketComb_detail.html ) 목록  */
  .list-style-detail > ul li {
    width: 100%;
  }
  .list-style-detail.compared {
    width: 100%;
    padding: 20px 10px;
  }
  .list-style-detail.compared > ul li {
    width: 100%;
  }
  /* wrap-filter */
  .wrap-select-box {
    width: 100%;
  }
  .wrap-select-text {
    min-width: unset;
    max-width: unset;
    width: 100%;
    margin-right: unset;
  }
  .wrap-filter {
    gap: 15px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .wrap-filter > div:nth-last-of-type(1) {
    margin-right: unset;
  }
  .wrap-filter .elem-filter + .tilde {
    margin-left: unset;
  }
  .wrap-filter .elem-filter {
    min-width: unset;
    max-width: unset;
    width: 100%;
    margin-right: unset;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .wrap-filter .elem-filter label {
    color: #888;
    width: 27%;
  }
  .wrap-filter .elem-filter .type-select-under {
    width: 70%;
  }
  .wrap-filter .elem-filter .type-select-border {
    width: 70%;
  }
  .wrap-filter .elem-filter .wrap-select-box {
    width: 70%;
  }
  .wrap-filter .elem-filter .wrap-select-box .type-select-under {
    width: 100%;
  }
  .wrap-filter .elem-filter .wrap-select-box .type-select-border {
    width: 100%;
  }
  .wrap-filter > .elem-filter > .type-datepicker-under {
    width: 70%;
  }
  .wrap-filter .wrap-select-text > .elem-filter label {
    width: 100%;
  }
  .wrap-filter .wrap-select-text > .elem-filter > .type-datepicker-under {
    width: 100%;
  }
  .wrap-filter .btn-type.icon {
    margin: auto;
  }
  .wrap-filter .type-select-under {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
  .wrap-filter .type-text-under {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
  .wrap-filter .wrap-datepicker {
    width: calc(100% - 150px);
    margin-right: unset;
  }
  .wrap-filter .wrap-datepicker > .type-datepicker-under {
    width: calc(50% - 10px);
  }
  .wrap-filter .label-box.rdo-lbl {
    margin-right: 0;
  }
  .wrap-filter .btn-type.icon {
    position: relative;
    width: 130px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .wrap-filter .btn-type.icon .txt-span {
    font-size: 14px;
  }
  .type-select-under + .type-text-under {
    margin-top: 15px;
  }
  .tab-box > .wrap-filter {
    margin-top: 0;
  }
  .tab-box .box-12 + .wrap-filter {
    margin-top: 20px;
  }
  /* wrap-filter end */
  /*  notFound.html -> error 안내 페이지  */
  .page-error .box {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    min-height: calc(100vh - 300px);
  }
  .page-error .txt-box {
    width: 100%;
  }
  .page-error .txt-box h2 {
    font-size: 3.5em;
  }
  .page-error .txt-box h2 span {
    font-size: inherit;
  }
  .page-error .txt-box h3 {
    margin-top: 1em;
    font-size: 1.8em;
  }
  .page-error .txt-box h4 {
    font-size: 1.4em;
    margin-bottom: 1em;
  }
  .page-error .txt-box a {
    padding: 0 1em;
  }
  /*  notFound.html -> error 안내 페이지 end */
}
/** 482px ~ 769px 까지 end */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/** 481px 까지*/
@media screen and (max-width: 481px) {
  /* common style*/
  /* fons size */
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 16px;
  }
  h3 {
    font-size: 14px;
  }
  h4 {
    font-size: 12px;
  }
  h5 {
    font-size: 11px;
  }
  h6 {
    font-size: 10px;
  }
  p,
span,
li,
textarea {
    font-size: 12px;
  }
  /* fons size end*/
  /* .part-box res*/
  .part-box.part2,
.part-box.part3,
.part-box.part4,
.part-box.part5 {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
  }
  .part-box.part2 .part-box:first-child {
    width: 100%;
  }
  .part-box.part2 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part3 .part-box:first-child {
    width: 100%;
  }
  .part-box.part3 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part4 .part-box:first-child {
    width: 100%;
  }
  .part-box.part4 .part-box:nth-child(2) {
    width: 100%;
  }
  .part-box.part5 .part-box:first-child {
    width: 100%;
  }
  .part-box.part5 .part-box:nth-child(2) {
    width: 100%;
  }
  .tab-con > ul > li {
    padding: 0 10px;
  }
  .part-box.part3 {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .chart005 .part-box {
    width: 100%;
  }
  .part-box.part3 .part-box.pdt0 {
    width: 100%;
  }
  /* chart-wrap + nodata 이미지 추가  */
  .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part2 .part-box:first-child .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part2 .part-box:nth-child(2) .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part3 .part-box:first-child .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part3 .part-box:nth-child(2) .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part4 .part-box:first-child .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part4 .part-box:nth-child(2) .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part5 .part-box:first-child .nodata::before {
    background-size: 80% auto;
  }
  .part-box.part5 .part-box:nth-child(2) .nodata::before {
    background-size: 80% auto;
  }
  .part-box .part-tit.chart-tit .label-box {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  /* .part-box end */
  /* footer */
  .wrapper .content-wrap {
    min-height: calc(100vh - 210px);
  }
  .wrapper .content-wrap.page-error {
    min-height: calc(100vh - 210px);
  }
  .wrapper .content-wrap.password {
    min-height: calc(100vh - 210px);
  }
  footer {
    overflow: hidden;
    height: 150px;
    background-color: var(--cc-mainB-color);
  }
  footer .inner {
    padding: 0;
    margin-top: auto;
  }
  footer .inner ul,
footer .inner li,
footer .inner span,
footer .inner a {
    font-size: 10px;
  }
  footer .inner .footer-logo {
    margin-top: 7%;
  }
  footer .inner .footer-nav ul {
    margin-top: 10px;
  }
  .wrapper .title-area .bread-crumbs {
    display: none;
  }
  .top-btn {
    bottom: 130px;
  }
  .datepicker.dropdown-menu {
    margin-top: 8px;
  }
  /* tab common*/
  .tab .tab-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    border-bottom: 2px solid var(--dlsp-fontDe-color);
  }
  .tab .tab-btn > ul {
    height: auto;
  }
  .tab .tab-btn > ul::after {
    content: "";
    clear: both;
    display: block;
  }
  .tab .tab-btn > ul > li {
    height: 40px;
    min-width: unset;
  }
  .tab .tab-btn > ul > li a {
    padding: 0 19px;
    font-size: 16px !important;
  }
  .tab .tab-btn .line {
    width: 100%;
    height: 3px;
    background-color: var(--dlsp-subC-color);
    position: absolute;
    bottom: 0;
  }
  .tab .tab-con {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .tab .tab-con > ul.bak {
    background-color: #fff;
    border-radius: 13px;
  }
  .tab .tab-con > ul > li {
    padding: 30px 0 0;
    display: none;
  }
  .tab .tab-con > ul > li.view {
    display: block;
  }
  .tab.type .tab-btn {
    margin-bottom: 0;
  }
  .tab.type.tab-con {
    background-color: transparent;
  }
  .tab.type.tab-box {
    padding: 0;
  }
  /* tab common end */
  /* 음원 유통사 tab 버튼 tab double-tab btn-tab-sm */
  .btn-tab-sm {
    text-align: center;
  }
  .btn-tab-sm > ul > li a {
    min-width: 40px;
    padding: 10px;
  }
  /*  btn-tab-sm end */
  .part-box .part-tit.chart-tit > h3 {
    font-size: 16px;
  }
  .paging .paging-box {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .paging .paging-box a {
    width: 25px;
  }
  /* .card.des-card background-img 크기 수정 */
  .card.des-card {
    background-size: 20%;
    background-position: right 20px bottom 20px;
    padding: 20px 10px;
  }
  /* wrap-musictab */
  .btn-musictab li:first-of-type div a {
    border-radius: 35px 0 0 35px;
  }
  .btn-musictab li:first-of-type div {
    border-radius: 35px 0 0 35px;
    padding-left: 10px;
  }
  .btn-musictab li:last-of-type div {
    border-radius: 0 35px 35px 0;
    padding-right: 10px;
  }
  .btn-musictab li:last-of-type div a {
    border-radius: 0 35px 35px 0;
  }
  .btn-musictab li div a {
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    font-size: 12px;
  }
  .btn-musictab li div a span:before {
    height: 35px;
    border-radius: 50px;
  }
  .btn-musictab li.on div a span {
    padding: 0 15px;
  }
  /* wrap-musictab end */
  /* // box-rank custom start */
  .part-box > .box-rank {
    height: 100%;
  }
  .box-rank {
    height: 100%;
  }
  .box-rank .rank-title {
    height: 65px;
  }
  .box-rank .rank-title span.datetime {
    font-size: 18px;
    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 ol > li .num-per {
    font-size: 12px;
  }
  .box-rank ol > li > a {
    width: calc(100% - 35px);
  }
  .box-rank ol > li .tit {
    font-size: 13px;
  }
  .box-rank.selected .box-rank {
    padding-top: 23px;
    padding-bottom: 22px;
    border: 3px solid #768294;
  }
  /* // box-rank custom end */
  /* wrap-filter mobile */
  .wrap-select-box {
    width: 100%;
  }
  .wrap-select-text {
    min-width: unset;
    max-width: unset;
    width: 100%;
    margin-right: unset;
  }
  .wrap-filter {
    gap: 15px;
    margin-top: 0;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .wrap-filter > div:nth-last-of-type(1) {
    margin-right: unset;
  }
  .wrap-filter .elem-filter + .tilde {
    margin-left: unset;
  }
  .wrap-filter .elem-filter {
    min-width: unset;
    max-width: unset;
    width: 100%;
    margin-right: unset;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .wrap-filter .elem-filter label {
    color: #888;
    width: 27%;
  }
  .wrap-filter .elem-filter .type-select-under {
    width: 70%;
  }
  .wrap-filter .elem-filter .type-select-border {
    width: 70%;
  }
  .wrap-filter .elem-filter .wrap-select-box {
    width: 70%;
  }
  .wrap-filter .elem-filter .wrap-select-box .type-select-under {
    width: 100%;
  }
  .wrap-filter .elem-filter .wrap-select-box .type-select-border {
    width: 100%;
  }
  .wrap-filter .elem-filter.sm {
    min-width: unset;
    max-width: unset;
    width: 70px;
  }
  .wrap-filter > .elem-filter > .type-datepicker-under {
    width: 70%;
  }
  .wrap-filter .btn-type.icon {
    margin: auto;
  }
  .wrap-filter .type-select-under {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
  .wrap-filter .type-text-under {
    min-width: unset;
    max-width: unset;
    width: 100%;
  }
  .wrap-filter .wrap-datepicker {
    width: 100%;
    margin-right: unset;
  }
  .wrap-filter .wrap-datepicker .type-datepicker-under {
    width: calc(50% - 10px);
  }
  .wrap-filter .label-box.rdo-lbl {
    margin-right: 0;
  }
  .wrap-filter .btn-type.icon {
    position: relative;
    width: 100px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .wrap-filter .btn-type.icon .txt-span {
    font-size: 14px;
  }
  .type-select-under + .type-text-under {
    margin-top: 15px;
  }
  .tab-box .box.box-12 + .wrap-filter {
    margin-top: 20px;
  }
  /* wrap-filter mobile end */
}
/** 481px 까지 end */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/*  소형 디바이스 추가 */
@media all and (min-width: 0) and (max-width: 340px) {
  /*  notFound.html -> error 안내 페이지  */
  .page-error .txt-box h2 {
    font-size: 3em;
  }
  .page-error .txt-box h3 {
    margin-top: 1em;
    font-size: 1.4em;
  }
  .page-error .txt-box h4 {
    font-size: 1.2em;
  }
  .page-error .img-box {
    width: 60%;
  }
  /*  notFound.html -> error 안내 페이지 end */
}
@media all and (min-width: 0) and (max-width: 320px) {
  .type-select-under.weekly {
    padding-left: 10px;
    width: 220px !important;
    font-size: 16px !important;
  }
}
/*  소형 디바이스 추가 end */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */