/*basic-set*/
.component-box {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  height: 160px; }
  .component-box:first-child {
    margin-top: 50px; }
  .component-box + .component-box {
    margin-top: 50px; }

article.market-price-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 300;
  width: 320px; }
  article.market-price-layer * {
    line-height: 1;
    box-sizing: border-box; }
  article.market-price-layer:before, article.market-price-layer:after {
    display: none; }
  article.market-price-layer *:before, article.market-price-layer *:after {
    display: none; }
  article.market-price-layer .market-price-wrap {
    height: 160px;
    position: relative;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--main_Y, #FBBE18);
    background: var(--W, #FFF);
    box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.2);
    padding: 20px; }
    article.market-price-layer .market-price-wrap .price-head-box .head-box {
      display: flex;
      justify-content: space-between;
      align-items: center; }
      article.market-price-layer .market-price-wrap .price-head-box .head-box .subject-box {
        flex: 1;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        font-weight: 700;
        font-size: 20px;
        letter-spacing: -0.04em;
        color: #333; }
      article.market-price-layer .market-price-wrap .price-head-box .head-box .option-box {
        margin-left: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center; }
        article.market-price-layer .market-price-wrap .price-head-box .head-box .option-box .close-btn {
          width: 20px;
          height: 20px;
          background: url("../images/ic_close.svg") no-repeat center/cover; }
    article.market-price-layer .market-price-wrap .price-head-box .head-sub-box {
      padding-top: 5px;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      color: #999;
      font-size: 12px;
      letter-spacing: -0.05em;
      line-height: 17px; }
    article.market-price-layer .market-price-wrap .price-body-box {
      padding-top: 25px; }
      article.market-price-layer .market-price-wrap .price-body-box .bar-range {
        display: flex;
        position: relative; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.disable.disable-all {
          padding-top: 10px; }
          article.market-price-layer .market-price-wrap .price-body-box .bar-range.disable.disable-all .disable-txt {
            top: auto;
            bottom: -5px;
            transform: none; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.disable .label-box {
          color: #999 !important; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.disable .range-bar {
          display: none; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.disable .disable-txt {
          display: block; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.type-old .label-box {
          color: #EC9601; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.type-old .range-box .range-txt {
          top: 14px;
          bottom: auto;
          color: #EC9601; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.type-old .range-box .range-bar {
          background: linear-gradient(90deg, #FBBE18 0%, #FAEECE 100%); }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.type-new .label-box {
          color: #626EFC; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.type-new .range-box .range-txt {
          color: #626EFC; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range.type-new .range-box .range-bar {
          background: linear-gradient(90deg, #4B59FE 0%, #CBD1FE 100%); }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range .disable-txt {
          display: none;
          text-align: center;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          right: 0;
          position: absolute;
          font-size: 12px;
          line-height: 15px;
          color: #999;
          font-weight: 700;
          letter-spacing: -0.04em; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range .label-box {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: -0.04em; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box {
          position: relative;
          flex: 1;
          min-width: 0; }
          article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box .range-txt {
            position: absolute;
            bottom: 14px;
            font-weight: 700;
            font-size: 12px;
            letter-spacing: -0.04em;
            left: 0;
            right: 0;
            text-align: center; }
            article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box .range-txt .price {
              font-family: "Roboto"; }
          article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box .range-bar {
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
            border-radius: 50px; }
            article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box .range-bar .range-bar-wrap {
              position: relative;
              margin: 0 6px;
              height: 12px; }
            article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box .range-bar .range-dot {
              z-index: 10;
              position: absolute;
              top: 50%;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              left: 0;
              margin-left: -8px;
              transform: translateY(-50%);
              width: 16px;
              height: 8px; }
              article.market-price-layer .market-price-wrap .price-body-box .bar-range .range-box .range-bar .range-dot:after {
                content: '';
                display: flex;
                justify-content: center;
                z-index: 10;
                width: 8px;
                height: 8px;
                background-color: #000;
                border-radius: 50%; }
      article.market-price-layer .market-price-wrap .price-body-box .bar-box {
        box-sizing: border-box;
        height: 22px;
        padding: 6px 0;
        position: relative;
        display: flex;
        justify-content: space-between; }
        article.market-price-layer .market-price-wrap .price-body-box .bar-box .bar-legend {
          display: inline-flex;
          position: relative;
          z-index: 10;
          background-color: #fff;
          font-size: 10px;
          letter-spacing: -0.04em;
          color: #666;
          padding: 0 2px;
          font-family: "Roboto";
          align-items: center; }
          article.market-price-layer .market-price-wrap .price-body-box .bar-box .bar-legend .unit-txt {
            font-family: "NotoSansKR";
            transform: scale(0.7); }
        article.market-price-layer .market-price-wrap .price-body-box .bar-box .bar {
          position: absolute;
          left: 1px;
          right: 1px;
          top: 50%;
          transform: translateY(-50%);
          height: 1px;
          background-color: #999; }