@charset "UTF-8";
.apexcharts-tooltip {
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

.vbar_chart_box, .bar_chart_box, .pie_chart_box, .line_chart_box {
  width: 100%;
  background: var(--white);
  border-radius: 8rem;
  box-sizing: border-box;
  font-family: var(--kor);
  position: relative;
}
.vbar_chart_box .apexcharts-canvas, .bar_chart_box .apexcharts-canvas, .pie_chart_box .apexcharts-canvas, .line_chart_box .apexcharts-canvas {
  background: var(--white) !important;
}

.line_chart_box .apexcharts-grid .apexcharts-gridlines-horizontal,
.line_chart_box .apexcharts-grid .apexcharts-gridlines-vertical {
  stroke: var(--text-gray-sub-2) !important;
  stroke-width: 1 !important;
}
.line_chart_box .apexcharts-xaxis .apexcharts-xaxis-texts-g text {
  color: var(--text-black-sub) !important;
  fill: var(--text-black-sub) !important;
  font-family: var(--kor) !important;
  letter-spacing: -0.32rem !important;
  line-height: 130% !important;
}
.line_chart_box .apexcharts-xaxis .apexcharts-xaxis-line {
  stroke: var(--list-border) !important;
}
.line_chart_box .apexcharts-yaxis .apexcharts-yaxis-texts-g text {
  color: var(--text-black-sub) !important;
  fill: var(--text-black-sub) !important;
  font-size: 16rem !important;
  font-family: var(--kor) !important;
  letter-spacing: -0.32rem !important;
  line-height: 130% !important;
}
.line_chart_box .apexcharts-yaxis .apexcharts-yaxis-line {
  stroke: var(--list-border) !important;
}

.apexcharts-zoomin-icon,
.apexcharts-zoomout-icon,
.apexcharts-zoom-icon,
.apexcharts-pan-icon,
.exportPNG,
.exportSVG { display: none; }


@media (prefers-reduced-motion: reduce) {
  .vbar_chart_box .apexcharts-line-series .apexcharts-series, .bar_chart_box .apexcharts-line-series .apexcharts-series, .pie_chart_box .apexcharts-line-series .apexcharts-series, .line_chart_box .apexcharts-line-series .apexcharts-series,
  .vbar_chart_box .apexcharts-pie-series .apexcharts-series,
  .bar_chart_box .apexcharts-pie-series .apexcharts-series,
  .pie_chart_box .apexcharts-pie-series .apexcharts-series,
  .line_chart_box .apexcharts-pie-series .apexcharts-series,
  .vbar_chart_box .apexcharts-bar-series .apexcharts-series,
  .bar_chart_box .apexcharts-bar-series .apexcharts-series,
  .pie_chart_box .apexcharts-bar-series .apexcharts-series,
  .line_chart_box .apexcharts-bar-series .apexcharts-series {
    animation: none !important;
  }
  .vbar_chart_box .apexcharts-legend-marker, .bar_chart_box .apexcharts-legend-marker, .pie_chart_box .apexcharts-legend-marker, .line_chart_box .apexcharts-legend-marker,
  .vbar_chart_box .legend_item,
  .bar_chart_box .legend_item,
  .pie_chart_box .legend_item,
  .line_chart_box .legend_item,
  .vbar_chart_box .bar_legend_item,
  .bar_chart_box .bar_legend_item,
  .pie_chart_box .bar_legend_item,
  .line_chart_box .bar_legend_item {
    transition: none !important;
  }
}

.bar_chart_box .apexcharts-legend, .line_chart_box .apexcharts-legend {
  justify-content: center !important;
  padding: 0 0 20rem 0 !important;
}
.bar_chart_box .apexcharts-legend .apexcharts-legend-series, .line_chart_box .apexcharts-legend .apexcharts-legend-series {
  margin: 0 20rem !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}
.bar_chart_box .apexcharts-legend .apexcharts-legend-series:hover, .line_chart_box .apexcharts-legend .apexcharts-legend-series:hover {
  opacity: 0.7 !important;
  transform: translateY(-1rem) !important;
}
@media screen and (max-width: 1280px) {
  .bar_chart_box .apexcharts-legend .apexcharts-legend-series, .line_chart_box .apexcharts-legend .apexcharts-legend-series {
    margin: 0 10rem !important;
  }
}
.bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker, .line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker {
  width: 10rem !important;
  height: 12rem !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-right: 8rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}
.bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker::before, .line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker::before,
.bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker .apexcharts-legend-marker-circle,
.line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker .apexcharts-legend-marker-circle,
.bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker .apexcharts-legend-marker-square,
.line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker .apexcharts-legend-marker-square {
  display: none !important;
}
.bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker span, .line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-marker span {
  font-size: 12rem !important;
  line-height: 130% !important;
  color: inherit !important;
  letter-spacing: -0.4rem !important;
  transition: all 0.2s ease !important;
}
.bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text, .line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
  padding: 0 !important;
  font-size: 20rem !important;
  font-weight: 500 !important;
  font-family: var(--kor) !important;
  color: var(--text-black-2) !important;
  margin-left: 0 !important;
  transition: all 0.2s ease !important;
}
@media screen and (max-width: 1280px) {
  .bar_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text, .line_chart_box .apexcharts-legend .apexcharts-legend-series .apexcharts-legend-text {
    font-size: 16rem !important;
  }
}

.chart_legend_container {
  margin-top: 82rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40rem;
  width: 100%;
}
@media (max-width: 1280px) {
  .chart_legend_container {
    margin-top: 40rem;
    max-width: 960rem;
    gap: 20rem;
  }
}
.chart_legend_container .legend_item {
  display: flex;
  align-items: center;
  gap: 8rem;
  cursor: pointer;
  user-select: none;
}
.chart_legend_container .legend_item.inactive {
  opacity: 0.4;
}
.chart_legend_container .legend_item.inactive .legend_label {
  text-decoration: line-through;
  color: var(--placeholder);
}
.chart_legend_container .legend_item .legend_marker {
  font-size: 14rem;
  font-weight: bold;
  display: inline-block;
  width: 16rem;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .chart_legend_container .legend_item .legend_marker {
    font-size: 12rem;
  }
}
.chart_legend_container .legend_item .legend_label {
  font-size: 20rem;
  font-weight: 500;
  color: var(--text-black-sub);
  white-space: nowrap;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}
@media screen and (max-width: 1280px) {
  .chart_legend_container .legend_item .legend_label {
    font-size: 16rem;
  }
}

.line_chart_wrapper {
  width: 100%;
}

.line_chart_box {
  min-height: 400rem;
  margin: 82rem 0 28rem;
}
@media screen and (max-width: 1280px) {
  .line_chart_box {
    min-height: 320rem;
    width: 100%;
    overflow-x: auto;
    margin: 16rem 0 32rem;
  }
}
.line_chart_box::after {
  display: flex;
  content: "보수 공제 후, 세전 수익률 기준 / 단위 : %";
  position: relative;
  justify-content: center;
  width: 100%;
  margin-top: 16rem;
  font-size: 18rem;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.36rem;
  color: var(--placeholder);
  text-align: center;
  white-space: nowrap;
}
@media screen and (max-width: 1280px) {
  .line_chart_box::after {
    font-size: 16rem;
  }
}
.line_chart_box .apexcharts-xaxistooltip,
.line_chart_box .apexcharts-yaxistooltip {
  display: none !important;
}
.line_chart_box .apexcharts-marker {
  fill: var(--black) !important;
  stroke: var(--black) !important;
}

.pie_chart_box {
  min-height: 455rem;
  margin: 30rem 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40rem;
}
@media (max-width: 1280px) {
  .pie_chart_box {
    flex-direction: column;
    gap: 30rem;
    margin: 0;
  }
}
.pie_chart_box .chart_container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 455rem;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .chart_container {
    min-height: auto;
  }
}
.pie_chart_box .chart_container #pie_chart,
.pie_chart_box .chart_container #donut_chart {
  width: 100%;
  max-width: 455rem;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .chart_container #pie_chart,
	.pie_chart_box .chart_container #donut_chart {
    max-width: auto;
    margin-top: 20rem;
  }
}
.pie_chart_box .chart_container #pie_chart .apexcharts-datalabel-label,
.pie_chart_box .chart_container #pie_chart .apexcharts-datalabel-value,
.pie_chart_box .chart_container #donut_chart .apexcharts-datalabel-label,
.pie_chart_box .chart_container #donut_chart .apexcharts-datalabel-value {
  font-family: var(--kor) !important;
  font-weight: 600 !important;
  fill: var(--text-black) !important;
}
.pie_chart_box .legend_container {
  flex: 0 0 auto;
  min-width: 372rem;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .legend_container {
    min-width: 100%;
    width: 100%;
    padding: 0 20rem;
  }
}
.pie_chart_box .legend_container .legend_list {
  display: flex;
  flex-direction: column;
  gap: 18rem;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .legend_container .legend_list {
    gap: 15rem;
  }
}
.pie_chart_box .legend_container .legend_list .legend_item {
  display: flex;
  align-items: center;
  gap: 8rem;
  border-bottom: 1rem solid var(--text-gray);
  padding: 0 20rem 18rem 0;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .legend_container .legend_list .legend_item {
    padding: 0 10rem 14rem;
    gap: 4rem;
  }
}
.pie_chart_box .legend_container .legend_list .legend_item .legend_marker {
  font-size: 16rem;
  line-height: 1;
  font-weight: bold;
  color: var(--text-black);
  min-width: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .legend_container .legend_list .legend_item .legend_marker {
    font-size: 10rem;
    min-width: 10rem;
  }
}
.pie_chart_box .legend_container .legend_list .legend_item .legend_label {
  flex: 1;
  font-size: 20rem;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.32rem;
  color: var(--text-black-2);
  font-family: var(--kor);
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .legend_container .legend_list .legend_item .legend_label {
    font-size: 18rem;
  }
}
.pie_chart_box .legend_container .legend_list .legend_item .legend_value {
  font-size: 20rem;
  font-weight: 300;
  line-height: 140%;
  letter-spacing: -0.32rem;
  color: var(--text-black-sub);
  font-family: var(--kor);
  width: 70rem;
  text-align: center;
}
@media screen and (max-width: 1280px) {
  .pie_chart_box .legend_container .legend_list .legend_item .legend_value {
    font-size: 18rem;
  }
}

.pie_chart_tooltip, .chart_tooltip_common {
  background: rgba(0, 0, 0, 0.7) !important;
  border: none !important;
  padding: 14rem 20rem !important;
  border-radius: 10rem !important;
  box-shadow: none !important;
  color: var(--white) !important;
  font-family: var(--kor) !important;
  display: flex !important;
  flex-direction: column !important;
  backdrop-filter: blur(3rem) !important;
}

.chart_tooltip_common {
  gap: 6rem !important;
}
.chart_tooltip_common .tooltip_title {
  background: transparent !important;
  color: var(--white) !important;
  font-weight: 300 !important;
  font-family: var(--kor) !important;
  font-size: 20rem !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.chart_tooltip_common .tooltip_series_group {
  padding: 0 !important;
  height: fit-content !important;
  display: flex !important;
  align-items: center !important;
  gap: 8rem !important;
}
.chart_tooltip_common .tooltip_series_group .tooltip_marker {
  margin: 0 !important;
  width: 10rem !important;
  height: 12rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.chart_tooltip_common .tooltip_series_group .tooltip_label {
  font-family: var(--kor) !important;
  color: var(--white) !important;
  display: inline-flex !important;
  font-size: 20rem !important;
  font-weight: 500 !important;
  display: flex;
  justify-content: center;
  min-width: 35rem;
}
.chart_tooltip_common .tooltip_series_group .tooltip_value {
  font-family: var(--kor) !important;
  color: var(--white) !important;
  font-size: 20rem !important;
  font-weight: 300 !important;
}

.pie_chart_tooltip {
  align-items: center !important;
}
@media screen and (max-width: 1280px) {
  .pie_chart_tooltip {
    padding: 10rem 16rem !important;
  }
}
.pie_chart_tooltip .pie_tooltip_marker {
  width: 20rem !important;
  height: 20rem !important;
  border-radius: 50% !important;
}
.pie_chart_tooltip .pie_tooltip_label {
  margin-top: 10rem !important;
  font-weight: 500 !important;
  font-size: 20rem !important;
  text-align: center !important;
}
@media screen and (max-width: 1280px) {
  .pie_chart_tooltip .pie_tooltip_label {
    margin-top: 4rem !important;
    font-size: 16rem !important;
  }
}
.pie_chart_tooltip .pie_tooltip_value {
  margin-top: 2rem !important;
  font-weight: 300 !important;
  font-size: 20rem !important;
  text-align: center !important;
  color: var(--white) !important;
  line-height: normal;
}
@media screen and (max-width: 1280px) {
  .pie_chart_tooltip .pie_tooltip_value {
    font-size: 16rem !important;
  }
}

.bar_chart_box {
  margin-right: -15rem;
}
@media (max-width: 1280px) {
  .bar_chart_box {
    padding-right: 20rem;
    min-height: 120rem;
  }
}
.bar_chart_box .apexcharts-datalabels .apexcharts-datalabel {
  font-family: var(--kor) !important;
  text-anchor: middle !important;
}
.bar_chart_box .apexcharts-datalabels .apexcharts-datalabel[data-series-index="0"] {
  fill: var(--white) !important;
}

.vbar_chart_box {
  display: flex;
  align-items: flex-end;
}
.vbar_chart_box .apexcharts-grid-borders {
  border-bottom: #CCC 1rem solid !important;
}
@media screen and (max-width: 1280px) {
  .vbar_chart_box {
    min-height: 250rem;
  }
}

.flatpickr-months {
  align-items: center;
}
.flatpickr-months .flatpickr-month {
  display: flex;
  align-items: center;
}
.flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg {
  width: 18px;
  height: 18px;
}

.flatpickr-prev-month, .flatpickr-next-month {
  display: flex;
  align-items: center;
  padding: 0 !important;
}

.flatpickr-current-month {
  align-items: center;
  padding: 0;
  height: auto;
}
.flatpickr-current-month .numInputWrapper {
  width: 58rem;
}
.flatpickr-current-month input.cur-year {
  padding: 0 !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  padding: 0 !important;
}