/*! jQuery UI - v1.13.2 - 2022-07-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright jQuery Foundation and other contributors; Licensed MIT */
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  -ms-filter: "alpha(opacity=0)";
}

.ui-front {
  z-index: 100;
}

.ui-state-disabled {
  cursor: default !important;
  pointer-events: none;
}

.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block;
}

.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
}

.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}

.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}

.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: 0;
}

.ui-menu .ui-menu {
  position: absolute;
}

.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}

.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}

.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}

.ui-menu-icons {
  position: relative;
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em;
}

.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}

.ui-button {
  padding: 0.4em 1em;
  display: inline-block;
  position: relative;
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

.ui-button-icon-only {
  width: 2em;
  box-sizing: border-box;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-button-icon-only {
  text-indent: 0;
}

.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  padding: 0;
  width: 2.1em;
  height: 2.1em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  text-indent: 0;
  white-space: normal;
  padding: 0.4em 1em;
}

input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.ui-controlgroup {
  vertical-align: middle;
  display: inline-block;
}

.ui-controlgroup > .ui-controlgroup-item {
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
  z-index: 9999;
}

.ui-controlgroup-vertical > .ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}

.ui-controlgroup-vertical .ui-controlgroup-item {
  box-sizing: border-box;
}

.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}

.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}

.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
  border-left: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
  border-top: none;
}

.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
  border-right: none;
}

.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
  border-bottom: none;
}

.ui-controlgroup-vertical .ui-spinner-input {
  width: 75%;
  width: calc(100% - 2.4em);
}

.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  box-shadow: inset 1px 1px 1px #ccc;
  border-radius: 0.12em;
  border: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  overflow: visible;
  border: none;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  background-image: none;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
}

.ui-checkboxradio-disabled {
  pointer-events: none;
}

.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}

.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}

.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

.ui-datepicker .ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  left: 0.5em;
  top: 0.3em;
}

.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}

.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}

.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}

.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}

.ui-dialog .ui-resizable-n {
  height: 2px;
  top: 0;
}

.ui-dialog .ui-resizable-e {
  width: 2px;
  right: 0;
}

.ui-dialog .ui-resizable-s {
  height: 2px;
  bottom: 0;
}

.ui-dialog .ui-resizable-w {
  width: 2px;
  left: 0;
}

.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
  width: 7px;
  height: 7px;
}

.ui-dialog .ui-resizable-se {
  right: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-sw {
  left: 0;
  bottom: 0;
}

.ui-dialog .ui-resizable-ne {
  right: 0;
  top: 0;
}

.ui-dialog .ui-resizable-nw {
  left: 0;
  top: 0;
}

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

.ui-draggable-handle {
  touch-action: none;
}

.ui-resizable {
  position: relative;
}

.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  touch-action: none;
}

.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}

.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}

.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}

.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}

.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}

.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}

.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}

.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}

.ui-progressbar .ui-progressbar-overlay {
  background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
  height: 100%;
  -ms-filter: "alpha(opacity=25)";
  opacity: 0.25;
}

.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}

.ui-selectable {
  touch-action: none;
}

.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}

.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
}

.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0 0;
  height: auto;
  border: 0;
}

.ui-selectmenu-open {
  display: block;
}

.ui-selectmenu-text {
  display: block;
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-selectmenu-button.ui-button {
  text-align: left;
  white-space: nowrap;
  width: 14em;
}

.ui-selectmenu-icon.ui-icon {
  float: right;
  margin-top: 0;
}

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0.222em 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 2em;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

.ui-spinner a.ui-spinner-button {
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
}

.ui-spinner-up {
  top: 0;
}

.ui-spinner-down {
  bottom: 0;
}

.ui-tabs {
  position: relative;
  padding: 0.2em;
}

.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}

.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}

.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}

.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}

.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
}

body .ui-tooltip {
  border-width: 2px;
}

.ui-widget {
  font-family: "Pretendard", Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget .ui-widget {
  font-size: 1em;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}

.ui-widget-content {
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
}

.ui-widget-content a {
  color: #333;
}

.ui-widget-header {
  border: 1px solid #ddd;
  background: #e9e9e9;
  color: #333;
  font-weight: bold;
}

.ui-widget-header a {
  color: #333;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #ccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #fff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #fff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #fff;
  text-decoration: none;
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}

.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}

.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}

.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}

.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}

.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}

.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}

.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  -ms-filter: "alpha(opacity=70)";
  font-weight: normal;
}

.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  -ms-filter: "alpha(opacity=35)";
  background-image: none;
}

.ui-state-disabled .ui-icon {
  -ms-filter: "alpha(opacity=35)";
}

.ui-icon {
  width: 16px;
  height: 16px;
}

.ui-icon-blank.ui-icon-blank.ui-icon-blank {
  background-image: none;
}

.ui-icon-caret-1-n {
  background-position: 0 0;
}

.ui-icon-caret-1-ne {
  background-position: -16px 0;
}

.ui-icon-caret-1-e {
  background-position: -32px 0;
}

.ui-icon-caret-1-se {
  background-position: -48px 0;
}

.ui-icon-caret-1-s {
  background-position: -65px 0;
}

.ui-icon-caret-1-sw {
  background-position: -80px 0;
}

.ui-icon-caret-1-w {
  background-position: -96px 0;
}

.ui-icon-caret-1-nw {
  background-position: -112px 0;
}

.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}

.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}

.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}

.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}

.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}

.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}

.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}

.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}

.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}

.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}

.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}

.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}

.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}

.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}

.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}

.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}

.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}

.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}

.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}

.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}

.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}

.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}

.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}

.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}

.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}

.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}

.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}

.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}

.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}

.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}

.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}

.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}

.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}

.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}

.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}

.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}

.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}

.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}

.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}

.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}

.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}

.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}

.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}

.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}

.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}

.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}

.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}

.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}

.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}

.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}

.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}

.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}

.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}

.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}

.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}

.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}

.ui-icon-arrow-4 {
  background-position: 0 -80px;
}

.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}

.ui-icon-extlink {
  background-position: -32px -80px;
}

.ui-icon-newwin {
  background-position: -48px -80px;
}

.ui-icon-refresh {
  background-position: -64px -80px;
}

.ui-icon-shuffle {
  background-position: -80px -80px;
}

.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}

.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}

.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}

.ui-icon-folder-open {
  background-position: -16px -96px;
}

.ui-icon-document {
  background-position: -32px -96px;
}

.ui-icon-document-b {
  background-position: -48px -96px;
}

.ui-icon-note {
  background-position: -64px -96px;
}

.ui-icon-mail-closed {
  background-position: -80px -96px;
}

.ui-icon-mail-open {
  background-position: -96px -96px;
}

.ui-icon-suitcase {
  background-position: -112px -96px;
}

.ui-icon-comment {
  background-position: -128px -96px;
}

.ui-icon-person {
  background-position: -144px -96px;
}

.ui-icon-print {
  background-position: -160px -96px;
}

.ui-icon-trash {
  background-position: -176px -96px;
}

.ui-icon-locked {
  background-position: -192px -96px;
}

.ui-icon-unlocked {
  background-position: -208px -96px;
}

.ui-icon-bookmark {
  background-position: -224px -96px;
}

.ui-icon-tag {
  background-position: -240px -96px;
}

.ui-icon-home {
  background-position: 0 -112px;
}

.ui-icon-flag {
  background-position: -16px -112px;
}

.ui-icon-calendar {
  background-position: -32px -112px;
}

.ui-icon-cart {
  background-position: -48px -112px;
}

.ui-icon-pencil {
  background-position: -64px -112px;
}

.ui-icon-clock {
  background-position: -80px -112px;
}

.ui-icon-disk {
  background-position: -96px -112px;
}

.ui-icon-calculator {
  background-position: -112px -112px;
}

.ui-icon-zoomin {
  background-position: -128px -112px;
}

.ui-icon-zoomout {
  background-position: -144px -112px;
}

.ui-icon-search {
  background-position: -160px -112px;
}

.ui-icon-wrench {
  background-position: -176px -112px;
}

.ui-icon-gear {
  background-position: -192px -112px;
}

.ui-icon-heart {
  background-position: -208px -112px;
}

.ui-icon-star {
  background-position: -224px -112px;
}

.ui-icon-link {
  background-position: -240px -112px;
}

.ui-icon-cancel {
  background-position: 0 -128px;
}

.ui-icon-plus {
  background-position: -16px -128px;
}

.ui-icon-plusthick {
  background-position: -32px -128px;
}

.ui-icon-minus {
  background-position: -48px -128px;
}

.ui-icon-minusthick {
  background-position: -64px -128px;
}

.ui-icon-close {
  background-position: -80px -128px;
}

.ui-icon-closethick {
  background-position: -96px -128px;
}

.ui-icon-key {
  background-position: -112px -128px;
}

.ui-icon-lightbulb {
  background-position: -128px -128px;
}

.ui-icon-scissors {
  background-position: -144px -128px;
}

.ui-icon-clipboard {
  background-position: -160px -128px;
}

.ui-icon-copy {
  background-position: -176px -128px;
}

.ui-icon-contact {
  background-position: -192px -128px;
}

.ui-icon-image {
  background-position: -208px -128px;
}

.ui-icon-video {
  background-position: -224px -128px;
}

.ui-icon-script {
  background-position: -240px -128px;
}

.ui-icon-alert {
  background-position: 0 -144px;
}

.ui-icon-info {
  background-position: -16px -144px;
}

.ui-icon-notice {
  background-position: -32px -144px;
}

.ui-icon-help {
  background-position: -48px -144px;
}

.ui-icon-check {
  background-position: -64px -144px;
}

.ui-icon-bullet {
  background-position: -80px -144px;
}

.ui-icon-radio-on {
  background-position: -96px -144px;
}

.ui-icon-radio-off {
  background-position: -112px -144px;
}

.ui-icon-pin-w {
  background-position: -128px -144px;
}

.ui-icon-pin-s {
  background-position: -144px -144px;
}

.ui-icon-play {
  background-position: 0 -160px;
}

.ui-icon-pause {
  background-position: -16px -160px;
}

.ui-icon-seek-next {
  background-position: -32px -160px;
}

.ui-icon-seek-prev {
  background-position: -48px -160px;
}

.ui-icon-seek-end {
  background-position: -64px -160px;
}

.ui-icon-seek-start {
  background-position: -80px -160px;
}

.ui-icon-seek-first {
  background-position: -80px -160px;
}

.ui-icon-stop {
  background-position: -96px -160px;
}

.ui-icon-eject {
  background-position: -112px -160px;
}

.ui-icon-volume-off {
  background-position: -128px -160px;
}

.ui-icon-volume-on {
  background-position: -144px -160px;
}

.ui-icon-power {
  background-position: 0 -176px;
}

.ui-icon-signal-diag {
  background-position: -16px -176px;
}

.ui-icon-signal {
  background-position: -32px -176px;
}

.ui-icon-battery-0 {
  background-position: -48px -176px;
}

.ui-icon-battery-1 {
  background-position: -64px -176px;
}

.ui-icon-battery-2 {
  background-position: -80px -176px;
}

.ui-icon-battery-3 {
  background-position: -96px -176px;
}

.ui-icon-circle-plus {
  background-position: 0 -192px;
}

.ui-icon-circle-minus {
  background-position: -16px -192px;
}

.ui-icon-circle-close {
  background-position: -32px -192px;
}

.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}

.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}

.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}

.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}

.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}

.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}

.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}

.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}

.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}

.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}

.ui-icon-circle-check {
  background-position: -208px -192px;
}

.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}

.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}

.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}

.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}

.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}

.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}

.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}

.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}

.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}

.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}

.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}

.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 3px;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 3px;
}

.ui-widget-overlay {
  background: #aaa;
  opacity: 0.3;
  -ms-filter: Alpha(Opacity=30);
}

.ui-widget-shadow {
  box-shadow: 0 0 5px #666;
}

/**
 * Swiper 11.0.5
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: November 22, 2023
 */
@font-face {
  font-family: swiper-icons;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color:#007aff;
}

:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}

.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}

.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}

.swiper-horizontal {
  touch-action: pan-y;
}

.swiper-vertical {
  touch-action: pan-x;
}

.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}

.swiper-slide-invisible-blank {
  visibility: hidden;
}

.swiper-autoheight, .swiper-autoheight .swiper-slide {
  height: auto;
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}

.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}

.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}

.swiper-3d {
  perspective: 1200px;
}

.swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide {
  transform-style: preserve-3d;
}

.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}

.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}

.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}

.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}

.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}

.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}

.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}

.swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color:#fff;
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color:#000;
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}

:root {
  --swiper-navigation-size:44px;
}

.swiper-button-next, .swiper-button-prev {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

.swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev {
  display: none !important;
}

.swiper-button-next svg, .swiper-button-prev svg {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transform-origin: center;
}

.swiper-rtl .swiper-button-next svg, .swiper-rtl .swiper-button-prev svg {
  transform: rotate(180deg);
}

.swiper-button-prev, .swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-lock {
  display: none;
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "prev";
}

.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "next";
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 0.3s opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}

.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}

.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.swiper-pagination-bullet:only-child {
  display: none !important;
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 0.2s transform, 0.2s top;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s left;
}

.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 0.2s transform, 0.2s right;
}

.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}

.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}

.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}

.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}

.swiper-pagination-lock {
  display: none;
}

.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}

.swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}

.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}

.swiper-scrollbar-cursor-drag {
  cursor: move;
}

.swiper-scrollbar-lock {
  display: none;
}

.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}

.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}

.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}

.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube {
  overflow: visible;
}

.swiper-cube .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}

.swiper-cube .swiper-cube-shadow:before {
  content: "";
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}

.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-flip {
  overflow: visible;
}

.swiper-flip .swiper-slide {
  pointer-events: none;
  backface-visibility: hidden;
  z-index: 1;
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
  z-index: 0;
  backface-visibility: hidden;
}

.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}

.swiper-cards {
  overflow: visible;
}

.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  backface-visibility: hidden;
  overflow: hidden;
}

:root {
  /* --gray-0: #1c1f25; */
  /* --gray-0: #0B0D11; */
  /* --gray-1: #1f232a; */
  --bg-0: #1F232C;
  --gray-0: #11151A;
  --gray-1: #0B0D11;
  --gray-2: #29313d;
  --gray-2-1: #242931;
  --gray-3: #333b47;
  --gray-4: #555c6e;
  --gray-5: #848b9c;
  --gray-6: #a5acb6;
  --gray-7: #eaecef;
  --light_gray: #9db6d2;
  --edx_red: #C44525;
  --gray_yellow: #5c4d28;
  --gray_red: #3c2125;
  --gray_green: #233e33;
  --alpha_red: rgba(245, 0, 32, 0.2);
  --alpha_green: rgba(0, 209, 127, 0.2);
  --green: #2ebd85;
  --red: #f6465d;
  --security_verysafe: #51e4aa;
  --security_safe: #2ebd85;
  --security_normal: #9db6d2;
  --security_dangerous: #f6465d;
  --error: #f6465d;
  --white: #ffffff;
  --white_darkbg: #ffffff;
  --white-30: rgba(255, 255, 255, 0.3);
  --black-50: rgba(0, 0, 0, 0.5);
  --gradient_fubit_yellow_start: #C445251a;
  --gradient_fubit_yellow_end: #C4452500;
  --gradient_home_start: #544f3e;
  --gradient_home_end: #353A44;
  --text-gray-0: #8D9097;
  
}
:root[data-theme=light] {
  /* --gray-0: #ebedf1; */
  --bg-0: #E8E8E8;
  --gray-0: #F9F9F9;
  --gray-1: #f3f4f6;
  --gray-2: #e2e6eb;
  --gray-2-1: #f3f5f8;
  --gray-3: #d7dce4;
  --gray-4: #afb6cb;
  --gray-5: #788195;
  --gray-6: #51575f;
  --gray-7: #26272a;
  --light_gray: #9db6d2;
  --edx_red: #FB562C;
  --gray_yellow: #cbddf1;
  --gray_red: #d2e0f5;
  --gray_green: #f3dee1;
  --alpha_red: rgba(48, 83, 210, 0.2);
  --alpha_green: rgba(255, 48, 48, 0.2);
  --green: #e13030;
  --red: #3053d2;
  --security_verysafe: #06b7de;
  --security_safe: #159966;
  --security_normal: #72869b;
  --security_dangerous: #f6465d;
  --error: #f6465d;
  --white: #000000;
  --white_darkbg: #ffffff;
  --white-30: rgba(255, 255, 255, 0.3);
  --black-50: rgba(0, 0, 0, 0.5);
  --gradient_fubit_yellow_start: #FB562C1a;
  --gradient_fubit_yellow_end: #FB562C00;
  --gradient_home_start: #c7dbf1;
  --gradient_home_end: #ffffff;
  --text-gray-0: #686A70;
}

@font-face {
  font-family: "Bahnschrift";
  src: url("../fonts/bahnschrift/bahnschrift.eot");
  src: url("../fonts/bahnschrift/bahnschrift.eot?#iefix") format("embedded-opentype"), url("../fonts/bahnschrift/bahnschrift.woff2") format("woff2"), url("../fonts/bahnschrift/bahnschrift.woff") format("woff"), url("../fonts/bahnschrift/bahnschrift.ttf") format("truetype"), url("../fonts/bahnschrift/bahnschrift.svg#Bahnschrift") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Thin.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-ExtraLight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/pretendard/Pretendard-ExtraBold.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
}

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

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  line-height: 1.6;
}

/* Top */
.top-nav {
  position: fixed;
  display: flex;
  top: 0;
  width: 100%;
  height: 3.5rem;
  background-color: var(--gray-0);
  /*background-color: rgba(0,0,0,0.4);*/
  color: var(--gray-6);
  z-index: 1000;
}

.top-nav .logo {
  position: relative;
  display: flex;
  margin-left: 40px;
  align-items: center;
}

.logo img {
  height: 30px; /* 로고 이미지 크기 */
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.menu {
  list-style: none;
  display: flex;
}

.menu-item {
  position: relative;
  margin: 0 15px;
}
.menu-item.right {
  margin: 0 0px;
}

.menu-item > a {
  color: var(--gray-6);
  text-decoration: none;
  padding: 10px 15px;
  display: block;
  position: relative; /* 하단 선 표시를 위한 상대 위치 */
  transition: color 0.3s ease, background-color 0.3s ease;
}

.menu-item > a:hover {
  color: var(--gray-7);
}

.menu-item > a::after {
    content: ''; /* 하단 선 추가 */
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--edx_red); /* 하단 선 색상: 노란색 */
    transition: width 0.3s ease; /* 선 애니메이션 */
}

/* 마우스 오버 시 하단 선 확대 */
.menu-item > a:hover::after,
.menu-item:hover > a::after { /* 드롭다운 활성화 시 상단 줄 유지 */
    width: 100%;
}

.menu-item .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  background-color: var(--gray-2, #29313d);
  list-style: none;
  padding: 8px;
  margin: 0;
  min-width: 150px;
  width: auto;
  z-index: 999;
  text-align: left;
  white-space: nowrap;
}
.menu-item .sub-menu.center {
  left: 50%;
  transform: translateX(-50%); /* 중앙 정렬 */
}
.menu-item .sub-menu.right {
  right: 0;
}

.menu-item:hover .sub-menu {
  display: block;
}

.menu-item .sub-menu li a {
  color: var(--white);
  text-decoration: none;
  width: 100%;
  padding: 10px;
  display: block;
  display: inline-block; /* 한 줄 표시 */
  white-space: nowrap; /* 텍스트 줄바꿈 방지 */
  transition: color 0.3s ease;
  cursor: pointer;
}

.menu-item .sub-menu li a:hover {
  background-color: var(--gray-0, #1c1f25);
}

.menu-item .sub-menu li a::after {
  content: none; /* 하단 선을 비활성화 */
}

/* Show dropdown on hover */
.menu-item.dropdown:hover .sub-menu {
  display: block;
}

.extra-menu {
  display: flex;
  margin-left: auto; /* 우측으로 밀어냄 */
  align-items: center;
}

.vertical-divider {
  width: 1px; /* 선의 너비 */
  height: 14px; /* 선의 높이 */
  background-color: var(--white); /* 선의 색상 */
  margin: 0 12px; /* 상하 좌우 여백 */
  display: inline-block; /* 인라인 블록으로 설정 */
}
:root[data-theme=light] .vertical-divider {
  width: 1px; /* 선의 너비 */
  height: 14px; /* 선의 높이 */
  background-color: var(--gray-4); /* 선의 색상 */
  margin: 0 12px; /* 상하 좌우 여백 */
  display: inline-block; /* 인라인 블록으로 설정 */
}

/**
 * footer
 */
.footer {
  background-color: var(--gray-0);
  color: #fff;
  padding: 48px 48px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-logo-section {
  flex: 1;
  max-width: 300px;
  margin-left: 3rem;
  padding-right: 83px;
}

.footer-logo {
  max-width: 150px;
  margin-bottom: 20px;
}

.footer-description {
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 1.5rem;
  color: var(--gray-4);
}

.footer-links {
  display: flex;
  flex: 3;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 160px;
}

.footer-column h4 {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--gray-7);
  font-family: "Pretendard";
  font-weight: 600;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 1rem;
}

.footer-column ul li button {
  color: var(--gray-6);
  text-decoration: none;
  font-size: 14px;
}

.footer-column ul li button:hover {
  text-decoration: underline;
}

/**
 * main banner: pc
 */
/* .main-banner-container{
  transform: translateY(-350px);
} */
 .main_top_wrap{
  display: flex;
  flex-direction: column;
  width:100%; 
}
:root{
  --banner-width: 1440px;
  --banner-height: 180px;
  --banner-gap: 26px;
  --banner-visible: 4;  
}
/* 슬라이더 컨테이너 */
.main-banner-container {
  /* transform: translateX(230px); */
  width: min(var(--banner-width), 100%);
  margin: 0 auto;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.main-banner-contents {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* 슬라이더 래퍼 */
.main-banner-wrapper {
  overflow: hidden;
  margin: 0;
}

/* 슬라이더 */
.main-banner-slider {
  display: flex;
  gap: var(--banner-gap);
  transition: transform 0.5s ease-in-out;
  align-items: stretch;
  width: 100%;
}

/* 슬라이더 아이템 */
.main-banner-slider .slider-item {
  flex: 0 0 calc(
    (var(--banner-width) - (var(--banner-gap) * (var(--banner-visible) - 1)))
    / var(--banner-visible)
  );

  /* flex: 0 0 calc(100% / 4);   */
  /*max-width: calc(100% / 4);*/
  height: var(--banner-height);  /* ✅ 피그마 height 180px */
  max-width: none;               /* 기존 18.75rem 제한 제거 */
  margin: 0;    
   box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;              /* 이미지 라운드 깔끔하게 */
  background: transparent;       /* 배경 필요하면 지정 */
}

.main-banner-slider .slider-item img {
  width: 100%; /* 부모 요소 너비를 꽉 채움 */
  height: 100%; /* 부모 요소 높이를 꽉 채움 */
  object-fit: contain; /* 작은 길이를 기준으로 이미지 꽉 채우기 */
  border-radius: 8px; /* 부모와 동일한 라운드 처리 */
}

/* 좌우 버튼 */
.main-banner-contents .slider-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  z-index: 10;
  width: 2rem;
  height: 2rem;
}

.main-banner-contents .slider-button.left {
  left: 0;
  background-image: url(../images/home/page-btn_prev.png);
  opacity: 1;
}

.main-banner-contents .slider-button.right {
  right: 0;
  background-image: url(../images/home/page-btn_next.png);
  opacity: 1;
}

/* 버튼 호버 효과 */
.main-banner-contents .slider-button:hover {
  opacity: 0.5;
}

/* 슬라이더 인디케이터 */
.main-banner-indicators {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  gap: 1rem;
}

.main-banner-indicators .idc {
  width: 0.5rem;
  height: 0.5rem;
  background-color: var(--gray-4);
  border-radius: 0.25rem;
}

.main-banner-indicators .idc.active {
  width: 2.5rem;
  background-color: var(--edx_red);
}
 
/**
 * main symbols
 */
/* .main-symbol-container{
  transform: translateY(-300px);
} */
.main-symbol-container {
  max-width: 1344px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 4rem;
}

.main-symbol-container h1 {
  display: flex;
  left: 0;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}

/* Table */
.main-symbol-container .table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.main-symbol-container .table thead {
  color: var(--gray-6);
}

.main-symbol-container .table th {
  height: 2.5rem;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid var(--gray-4);
  border-bottom: 1px solid var(--gray-4);
  border-left: none;
  border-right: none;
  font-size: 0.875rem;
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--gray-6);
}

.main-symbol-container .table td {
  height: 3.75rem;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid var(--gray-3);
  border-bottom: 1px solid var(--gray-3);
  border-left: none;
  border-right: none;
  font-size: 1rem;
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--gray-7);
}

/*.main-symbol-container .table td img {
  width: 20px;
  vertical-align: middle;
  margin-right: 10px;
}*/

/* Button styles */
.trade-btn {
  background-color: var(--gray-2);
  color: var(--gray-7);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.trade-btn:hover {
  background-color: var(--gray-4);
}

/*
 * info1
 */
.main-info1-container {
  display: flex;
  height: 653px;
  width: 100%;
  background-color: var(--gray-0);
}
.main-info1-container .sections {
  display: flex;
  flex: 0 0 auto;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
.main-info1-container .logo-section {
  display: flex;
  z-index: 2;
  width: 769px;
  height: 509px;
  margin-bottom: 2rem;
  background-image: url(../images/home/dark/info1-logo.svg);
}
:root[data-theme=light] .main-info1-container .logo-section {
  background-image: url(../images/home/light/info1-logo.svg);
}

.main-info1-container .description-section {
  display: flex;
  z-index: 3;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 48.875rem;
  right: 0;
  margin-right: 8rem;
}
.main-info1-container .description-section .mark-start {
  width: 24px;
  height: 17px;
  background-image: url(../images/home/dark/mark-words-start.png);
}
.main-info1-container .description-section .mark-end {
  width: 24px;
  height: 17px;
  background-image: url(../images/home/dark/mark-words-end.png);
}
:root[data-theme=light] .main-info1-container .description-section .mark-start {
  width: 24px;
  height: 17px;
  background-image: url(../images/home/light/mark-words-start.png);
}
:root[data-theme=light] .main-info1-container .description-section .mark-end {
  width: 24px;
  height: 17px;
  background-image: url(../images/home/light/mark-words-end.png);
}
.main-info1-container .description-section h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--edx_red);
    font-weight: 700;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.card {
  position: relative;
  display: flex;
  width: 23.9375rem;
  height: 9.125rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  background-color: var(--gray-1);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.card .border {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 1rem;
  background: linear-gradient(45deg, var(--gradient_home_start) 0%, var(--gray-2) 85%, var(--gradient_home_end) 100%);
  -webkit-mask: linear-gradient(white 0 0) content-box, linear-gradient(white 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}


.card .watermark {
  position: absolute;
  display: flex;
  z-index: 0;
  right: 1rem;
  bottom: 1rem;
  width: 25.52px;
  height: 21.33px;
  background-image: url(../images/logo/dark/watermark1.png);
  background-repeat: no-repeat;
  background-size: contain; /* 이미지 크기에 맞게 조정 */
  pointer-events: none; /* 클릭 이벤트 방지 (옵션) */
}

:root[data-theme=light] .card .watermark {
  background-image: url(../images/logo/light/watermark1.svg);
}

.card h2 {
  text-align: left; /* 텍스트 왼쪽 정렬 */
  z-index: 2;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--gray-7);
  font-weight: 600;
}

.card p {
  text-align: left; /* 텍스트 왼쪽 정렬 */
  z-index: 2;
  font-size: 0.875rem;
  color: var(--gray-6);
  font-weight: 400;
}

/*
 * info2
 */
/* 섹션 배경/여백은 프로젝트 상황에 맞게 */
.main-info2-section{
  width: 100%;
  background: transparent; /* 필요하면 다크 배경 지정 */
}

/* 전체 폭 중앙 정렬 */
.main-info2-wrap{
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 80px 0 70px;
}

/* ✅ 상단 텍스트는 무조건 중앙 */
.info2-head{
  text-align: center;
  margin-bottom: 46px;
}

.info2-head h2{
  margin: 0 0 10px 0;
  font-family: Pretendard, sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--text_primary, #F5F8FE);
}

.info2-head p{
  margin: 0;
  font-family: Pretendard, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  color: var(--text-gray-0);
}

/* ✅ 카드 영역: 중앙 정렬 + 상단 구분선 */
.main-info2-container{
  position: relative;
  padding-top: 26px;

  display: flex;
  justify-content: center;    /* 핵심: 카드 4개가 중앙으로 */
  align-items: flex-start;
  gap: 28px;

  /* 기존 상위 flex 영향 받는 경우 대비 */
  width: 100%;
}

/* 상단 가로 구분선 */
.main-info2-container::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: rgba(255,255,255,.10);
}



.info2-item {
  flex: 2;
  padding-top: 30px;
  text-align: center;
}
.info2-item h3 {
  font-size: 16px;
  margin: 15px 0 10px;
  color: var(--gray-7);
  font-family: "Pretendard";
  font-weight: 600;
  font-size: 1.0rem;
}
.info2-item p {
  font-size: 14px;
  line-height: 150%;
  letter-spacing: -2%;
  color: var(--gray-6);
  font-family: "Pretendard";
  font-weight: 400;
  font-size: 1rem;
}

/*.info2-item .icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-color: #262626;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  border: 2px solid #FFD700; /* 아이콘 테두리에 골드 컬러 추가 
}*/
.info2-item .item1 {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background-image: url(../images/home/dark/info2-book.svg);
}
:root[data-theme=light] .info2-item .item1 {
  background-image: url(../images/home/light/info2-book.svg);
}
.info2-item .item2 {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background-image: url(../images/home/dark/info2-input.svg);
}
:root[data-theme=light] .info2-item .item2 {
  background-image: url(../images/home/light/info2-input.svg);
}
.info2-item .item3 {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background-image: url(../images/home/dark/info2-trade.svg);
}
:root[data-theme=light] .info2-item .item3 {
  background-image: url(../images/home/light/info2-trade.svg);
}
.info2-item .item4 {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  background-image: url(../images/home/dark/info2-study.svg);
}
:root[data-theme=light] .info2-item .item4 {
  background-image: url(../images/home/light/info2-study.svg);
}

/*
 * global
 */
/* 스크롤바 전체 영역 */
::-webkit-scrollbar {
  width: 8px;      /* 세로 스크롤바 너비 */
  height: 8px;     /* 가로 스크롤바 높이 */
}

/* 스크롤바 트랙 (배경) */
::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 8px;
}

/* 스크롤바 핸들 (움직이는 부분) */
::-webkit-scrollbar-thumb {
  background-color: #50545A;
  border-radius: 8px;
}

/* 스크롤바 핸들 hover 효과 */
::-webkit-scrollbar-thumb:hover {
  background-color: #444;
}


/*
 * common
 */
/* 기본 버튼 없애기 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-ms-clear {
  display: none;
}
input[type="file"] {
  appearance: none;  /* 브라우저 기본 버튼 제거 */
  -webkit-appearance: none; /* 크롬, 사파리 */
  -moz-appearance: none;    /* 파이어폭스 */
}
input[type="file"]::-webkit-file-upload-button {
  visibility: hidden; /* 버튼만 숨김 */
}

.disabled-none:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.clicable {
  cursor: pointer;
}

.pc input:hover {
  border-color: var(--edx_red);
  outline: none;
}

.pc .input-outer {
  background-color: var(--gray-0);
  border-radius: 4px;
  border: 1px solid var(--gray-3);
  align-items: center;
  justify-content: start;
  color: var(--gray-7);
}
.pc .input-outer:hover {
  border-color: var(--edx_red);
  outline: none;
}
.pc .input-outer input {
  background-color: transparent;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  align-items: center;
  justify-content: start;
  color: var(--gray-7);
}
.pc .input-outer:focus-within {
  border-color: var(--edx_red);
  outline: none;
}
.pc input {
  background-color: var(--gray-0);
  border-radius: 4px;
  border: 1px solid var(--gray-3);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  align-items: center;
  justify-content: start;
  color: var(--gray-7);
}
.pc input.clear {
  border: none !important;
  background-color: transparent !important;
  outline: none;
}
.pc input.is-error {
  border-color: var(--red) !important;
  outline: none;
}
.pc input:focus {
  border-color: var(--edx_red);
  outline: none;
}
.pc input.left-icon {
  padding-left: 2rem;
}
.pc input.right-icon {
  padding-right: 2rem;
}
.pc .input-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pc .input-column {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}
.pc .input-box {
  position: relative;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.pc .input-box input {
  width: 100%;
  height: 100%;
  background-color: var(--gray-0);
  border-radius: 4px;
  border: 1px solid var(--gray-3);
  padding: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  align-items: center;
  justify-content: start;
  color: var(--gray-7);
  box-sizing: border-box;
}
.pc .input-box .head {
  position: absolute;
  right: 0;
  width: 2rem;
}
.pc .input-box .tail {
  position: absolute;
  width: 2rem;
}

.pc .button-underline {
  color: var(--edx_red);
  border-bottom: 1px solid var(--edx_red);
}

.pc .button.select {
  background-color: var(--gray-3);
  border-radius: 4px;
  border: 1px solid var(--gray-3);
}
.pc .button.select.active {
  background-color: var(--gray-0);
  border-radius: 4px;
  border: 1px solid var(--fubit-yellow);
  outline: none;
}
.pc .underline-gray3 {
  border-bottom: 1px solid var(--gray-3) !important;
}

.txt.is-error {
  color: var(--red) !important;
}

.pc .border-left-gray3 {
  border-left: 1px solid var(--gray-3);
}

.pc .anchor {
  position: relative;
}

.pc .flex-row {
  display: flex;
  flex-direction: row !important;
}
.pc .flex-column {
  display: flex;
  flex-direction: column !important;
}
.pc .flex-fill {
  flex: 1 !important;
}

.pc .data-row {
  display: flex;
  flex-direction: row;
  display: flex;
  flex: 1 0 0;
  gap: 0.25rem;
  align-items: center;
}
.pc .data-row .data-title {
  display: flex;
}
.pc .data-row .data-value {
  flex: 1;
  text-align: right; 
}
.pc .data-row .data-unit {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.pc .rounded-box {
  border: 1px solid var(--gray-3);
  align-items: center;
  justify-content: start;
  color: var(--gray-7);
  box-sizing: border-box;
}
.pc .rounded-box {
  background-color: var(--gray-0);
  border-radius: 4px;
}
.pc .rounded-box.gray2 {
  background-color: var(--gray-2);
  border-radius: 4px;
}
.pc .rounded-box.active {
  border-color: var(--edx_red);
  outline: none;
}
.pc .rounded-box:hover {
  border-color: var(--edx_red);
  outline: none;
}

.pc .hover-box {
  background-color: transparent;
}
.pc .hover-box:hover {
  background-color: var(--gray-3);
}

.pc .txt.tail {
  color: var(--gray-5);
  font-family: "Pretendard";
  font-size: 0.75rem;
  font-weight: 400;
}

.pc .value-box {
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  /*justify-content: center;*/
  align-items: center;
}
.pc .value-box.border {
  background-color: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 0.5rem;
  padding: 1rem 2.5rem;
}
.pc .value-box .title {
  font-size: 1.25rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc .value-box .value {
  font-size: 2rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc .value-box .value.small {
  font-size: 1.25rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc .value-box .unit {
  font-size: 1rem;
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--gray-6);
}
.pc .value-box .unit.gray7 {
  font-size: 1rem;
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--gray-7);
}

.pc .card-box {
  border-radius: 8px;
  border: 1px solid var(--gray-3);
}

/*
 * flex box
 */
.pc .flex-box {
  display: flex;
}
.pc .flex-box .flex-cell {
  flex: 1;
}

/*
 * grid
 */
.pc .grid-3column {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 0.5rem;
  column-gap: 1rem;
}
.pc .grid-4column {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0.5rem;
  column-gap: 1rem;
}
.pc .grid-5column {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 0.5rem;
  column-gap: 1rem;
}

/*
 * select-item (radio, checkbox)
 */
.pc .select-item {

}
.pc .disabled {
  pointer-events: none !important;
  opacity: 0.4 !important;
}
.pc .select-item .icon {
  background-image: url(../images/icons/dark/icon_checkbox.svg);
}
.pc .select-item.active .icon {
  background-image: url(../images/icons/dark/icon_checkbox_on.svg);
}
:root[data-theme=light] .pc .select-item .icon {
  background-image: url(../images/icons/light/icon_checkbox.svg);
}
:root[data-theme=light] .pc .select-item.active .icon {
  background-image: url(../images/icons/light/icon_checkbox_on.svg) !important;
}

/*
 * drop down
 */
 .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--gray-1);
  border: 1px solid var(--gray-3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px 0;
  z-index: 100;
}
.dropdown-item {
  padding: 10px 20px;
  background-color: var(--gray-0);
  color: var(--gray-7);
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-3);
}
.dropdown-item:hover {
  background-color: var(--gray-3);
}

/*
 * text-box
 */
.pc .txt-box-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-3);
  border-radius: 0.25rem;
}
.pc .txt-box-row.clear {
  border: none;
  background-color: transparent;
}
.pc .txt-box-row .yellow-semibold {
  font-family: 'Bahnschrift';
  font-weight: 600;
  color: var(--edx_red);
}
.pc .txt-box-row .gray6-semibold {
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-6);
}
.pc .txt-box-row .gray6-regular {
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--gray-6);
}
.pc .txt-box-row .gray7-semibold {
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc .txt-box-row .gray7-regular {
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--gray-7);
}
.pc .txt-box-row .red-regular {
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--red);
}

.pc .txt-box {
  display: flex;
  flex-direction: column;
  background-color: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 0.25rem;
}

.pc .info-box {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  border: 1px solid var(--gray-3);
  border-radius: 0.5rem;
}

/*
 * search-box
 */
.pc .search-box {
  display: flex;
  flex-direction: row;
  border: 1px solid var(--gray-3);
  border-radius: 0.5rem;
}
.pc .search-box input.search {
  flex: 1;
  height: 100%;
  color: var(--gray-6);
}
.pc .search-box .btn-search {
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  background-color: var(--edx_red);
  border: 1px solid var(--gray-3);
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/*
 * extra button
 */
.pc .btn-gray6-underline {
  color: var(--gray-6);
  border-bottom: 1px solid var(--gray-6);
}
.pc .btn-all {
  color: var(--edx_red);
  border-bottom: 1px solid var(--edx_red);
}

/*
 * empty box
 */
.pc .empty-box {
  width: 100%;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pc .empty-box .img-icon {
  width: 5rem;
  height: 5rem;
  background-image: url(../images/icons/dark/icon_80_nodata.svg);
}
:root[data-theme=light] .pc .empty-box .img-icon {
  width: 5rem;
  height: 5rem;
  background-image: url(../images/icons/light/icon_80_nodata.svg);
}
.pc .empty-box .txt {
  color: var(--gray-5);
  font-weight: 400;
  font-size: 0.875rem;
  text-align: center;
}

/*
 * noauth box
 */
 .pc .noauth-box {
  width: 100%;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pc .noauth-box .img-icon {
  width: 5rem;
  height: 5rem;
  background-image: url(../images/icons/dark/icon_80_login.svg);
}
:root[data-theme=light] .pc .noauth-box .img-icon {
  width: 5rem;
  height: 5rem;
  background-image: url(../images/icons/light/icon_80_login.svg);
}
.pc .noauth-box .txt {
  color: var(--gray-5);
  font-weight: 400;
  font-size: 0.875rem;
  text-align: center;
}

/*
 * tag box
 */
.pc .tag-box {
  color: var(--edx_red);
  border: 1px solid var(--edx_red);
  border-radius: 0.25rem;
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0.25rem 1rem;
}

/*
 * file view box
 */
.pc .file-view-box {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-2);
  border-radius: 0.5rem;
  color: var(--gray-6);
  font-size: 1rem;
  font-weight: 400;
  padding: 0.25rem 0.5rem;
}

/*
 * grid-box
 */
.pc .grid-box {
  background-color: var(--gray-2);
  border-radius: 0.5rem;
}

/*
 * page header
 */
.pc .page-header {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--gray-3);
}
.pc .page-header.clear {
  border-bottom: none;
}
.pc .page-header .start {
  flex: 1;
}
.pc .page-header .end {
  margin: 0 auto;
}

/*
 * page bottom
 */
.pc .page-bottom {
  display: flex;
  flex-direction: column;
}

/*
 * page-manager
 */
.pc .page-manager {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
}
.page-manager .pagination {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  gap: 0.5rem;
}
.page-manager .pagination .page-number{
  width: 1.5rem;
  height: 1.5rem;
  font-weight: 400;
  font-size: 0.875rem;
}
.page-manager .pagination .page-number{
  color: var(--gray-7);
  background-color: transparent;
  border: none;
}
.page-manager .pagination .page-number.active {
  color: var(--gray-0);
  background-color: var(--edx_red);
  border-radius: 0.25rem;
}

/* --------------------*/

/*
 * dialog layout
 */
/*#region - dialog layout*/
.pc.dialog {
  position: relative;
  width: 100%;
  height: calc(100vh - 3.5rem);
  box-sizing: border-box;
  overflow: hidden;
}
.pc.dialog .sub_title {
  top: 0px;
  width: 100%;
  height: 3rem;
  background-color: var(--gray-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc.dialog .window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 수평 및 수직 중앙 정렬 */
  width: 360px;
  background-color: var(--gray-1);
  border: 1px solid var(--gray-3);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}
.pc.dialog .window .title {
  width: 100%;
  height: 1.5rem;
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 20px;
  font-weight: 600;
}
.pc.dialog .window .subtitle {
  width: 100%;
  height: 1rem;
  color: var(--gray-6);
  font-family: "Pretendard";
  font-size: 20px;
  font-weight: 400;
}
.pc.dialog .window .tabs {
  margin-top: 0.5rem;
  width: 100%;
  height: 2.5rem;
  display: flex;
  justify-content: space-around;
}
.pc.dialog .window .tabs .tab {
  flex: 1;
  cursor: pointer;
  border: none;
  color: var(--gray-6);
  font-size: 1rem;
  border: none;
  border-bottom: 1px solid var(--gray-3);
}
.pc.dialog .window .tabs .tab.active {
  color: var(--edx_red);
  border-bottom: 2px solid var(--edx_red);
}

.pc.dialog .window .input-view {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
}
.pc.dialog .window .input-view .input {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.dialog .window .input-view .input label {
  font-family: "Pretendard";
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-7);
}

.pc.dialog .window .bottom-view {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pc.dialog .window .footer-view {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* --------------------*/
/*
 * dialog layout
 */
/*#region - dialog layout*/
/* .pc.dialog {
  position: relative;
  width: 100%;
  height: calc(100vh - 3.5rem);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--gray-0);
}

.pc.dialog .sub_title {
  top: 0px;
  width: 100%;
  height: 3rem;
  background-color: var(--gray-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc.dialog .window {
  border: none;                
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 480px;
  padding: 24px 16px; 
} */

/* title_m (로그인) */
/* .pc.dialog .window .title {
  width: 100%;
  height: 21px;                
  color: var(--gray-7);            
  font-family: "Pretendard";
  font-size: 18px;             
  font-weight: 600;
  line-height: 21px;           
  display: flex;
  align-items: left;
  justify-content: left;    
}

.pc.dialog .window .title2 {
  width: 100%;
  height: 28px;                
  color: var(--gray-7);         
  font-family: "Pretendard";
  font-size: 28px;             
  font-weight: 400;
  line-height: 28px;           
  display: flex;
  align-items: left;
  justify-content: left;   
  margin-bottom:  24px;
}

.pc.dialog .window .subtitle {
  width: 100%;
  height: 1rem;
  color: var(--gray-6);
  font-family: "Pretendard";
  font-size: 20px;
  font-weight: 400;
}

.pc.dialog .window .tabs {
  margin-top: 24px;
  width: 100%;
  height: 40px;
  display: flex;
  padding: 0;
  gap: 0;
  box-sizing: border-box;
  border: 0 !important;
  outline: 1px solid var(--gray-3);
  outline-offset: -1px;
  border-radius: 4px;
  overflow: visible;                 
  clip-path: inset(0 round 4px);    
  background: transparent;
}

.pc.dialog .window .tabs .tab {
  flex: 1;
  height: 40px;
  background: transparent;
  cursor: pointer;
  font-family: "Pretendard";
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-6);
  border: 0 !important;              
  position: relative;
}

.pc.dialog .window .tabs .tab + .tab {
  border-left: 1px solid var(--gray-3);
}

.pc.dialog .window .tabs .tab.active {
  background: var(--edx_red);
  color: #FFFFFF;
  z-index: 1;                         
}

.pc.dialog .window .input-view {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 64px;
}

.pc.dialog .window .input-view .input {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pc.dialog .window .input-view .input input,
.pc.dialog .window .input-view .input select,
.pc.dialog .window .input-view .input textarea {
  width: 100%;
  height: 65px;
  padding: 8px 12px;
  background: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: "Pretendard";
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  color: var(--gray-7);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pc.dialog .window .input-view .input input::placeholder,
.pc.dialog .window .input-view .input textarea::placeholder {
  color: var(--gray-5);
}

.pc.dialog .window .input-view .input:hover input,
.pc.dialog .window .input-view .input:hover select,
.pc.dialog .window .input-view .input:hover textarea {
  border-color: var(--edx_red);
}

.pc.dialog .window .input-view .input input:focus,
.pc.dialog .window .input-view .input select:focus,
.pc.dialog .window .input-view .input textarea:focus {
  border-color: var(--edx_red);
  box-shadow: 0 0 0 1px rgba(196, 69, 37, 0.35);
}

.pc.dialog .window .input-view .input.email label {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  font-family: "Pretendard";
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--gray-6); 
  pointer-events: none;
  z-index: 1;
  transition: color .15s ease;
}

.pc.dialog .window .input-view .input.email input {
  padding: 28px 12px 8px;
  margin-top: 0 !important;
}

.pc.dialog .window .input-view .input.email:hover label,
.pc.dialog .window .input-view .input.email:focus-within label {
  color: var(--edx_red);
}



.pc.dialog .window .input-view .input.phone .anchor {
  position: relative;
}

.pc.dialog .window .input-view .input.phone .popup-nation {
  position: absolute;
  left: 0;
  top: calc(65px + 8px);
  z-index: 200;
  width: 320px;
  max-height: 304px;
  height: 304px;
  background: var(--gray-1);
  border: 1px solid var(--gray-3);
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;
}

.pc.dialog .window .input-view .input.phone .popup-nation .search-box{
  position: relative;
  height: 40px;
  background: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 4px;
  box-sizing: border-box;
}

.pc.dialog .window .input-view .input.phone .popup-nation .search-bg{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  color: var(--gray-6); 
}

.pc.dialog .window .input-view .input.phone .popup-nation .search-box .search-input{
  width: 100%;
  height: 100%;
  padding: 0 12px 0 48px;   
  border: 0;
  background: transparent;
  font-family: "Pretendard";
  font-size: 16px;
  line-height: 19px;
  color: var(--gray-7);
  outline: none;
}

.pc.dialog .window .input-view .input.phone .popup-nation .search-box .search-input::placeholder{
  color: var(--gray-5);
  opacity: 1;
  
}
.pc.dialog .window .input-view .input.phone .popup-nation .search-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: #000000;
  border: 0px solid var(--border, #1F232C);
  border-radius: 4px;
  box-sizing: border-box;
  font-family: "Pretendard";
  font-size: 16px;
  line-height: 19px;
  color: #F5F8FE;
  outline: none;
}

.pc.dialog .window .input-view .input.phone .popup-nation .country_list {
  max-height: calc(304px - 56px);
  overflow: auto;
}

.pc.dialog .window .input-view .input.phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pc.dialog .window .input-view .input.phone .phone-label-row{
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.pc.dialog .window .input-view .input.phone .label-nation{
  width: 128px;
  font-family: "Pretendard";
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--gray-6); 
}

.pc.dialog .window .input-view .input.phone .label-phone{
  flex: 1;
  font-family: "Pretendard";
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  color: var(--gray-6); 
}

.pc.dialog .window .input-view .input.phone .anchor {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  gap: 8px;
  padding-top: 0 !important;
}

.pc.dialog .window .input-view .input.phone #input_nation,
.pc.dialog .window .input-view .input.phone #phone_id {
  height: 65px;
}

.pc.dialog .window .input-view .input.phone #phone_id {
  padding: 28px 44px 8px 12px;
  margin-top: 0 !important;
}

.pc.dialog .window .input-view .input.phone .icon_cancel,
.pc.dialog .window .input-view .input.phone .icon_24.icon_cancel,
.pc.dialog .window .input-view .input.phone .icon_24.icon_cancel2,
.pc.dialog .window .input-view .input.phone .icon.icon_cancel,
.pc.dialog .window .input-view .input.phone .icon.icon_24.icon_cancel {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.pc.dialog .window .input-view .input.phone #input_nation {
  display: flex;
  align-items: center;          
  justify-content: space-between;
  height: 65px;
  padding: 0 12px;
  box-sizing: border-box;
  line-height: normal;          
} */

/* 아이콘 자체도 안전하게 */
/* .pc.dialog .window .input-view .input.phone #input_nation .icon_24 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
} */

/* 드롭다운 아이콘도 동일 */
/* .pc.dialog .window .input-view .input.phone #input_nation .icon_8 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
} */

/* 버튼 영역 */
/* .pc.dialog .window .bottom-view {
  margin-top: 0;               
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;                    
} */

/* footer(회원가입) */
/* .pc.dialog .window .footer-view {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

.pc.dialog .window .footer-view a,
.pc.dialog .window .footer-view button,
.pc.dialog .window .footer-view span {
  font-family: "Pretendard";
  font-size: 16px;             
  font-weight: 400;
  line-height: 19px;           
  color: var(--edx_red);          
  text-decoration: underline;  
  background: transparent;
  border: 0;
  cursor: pointer;
} */




.pc .popup-nation {
  position: absolute;
  top: calc(100% + 0.5rem);
  width: 100%;
  max-height: 19rem;
  overflow: hidden;
  background-color: var(--gray-1);
  border: 1px solid var(--gray-3);
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.pc .popup-nation .search-box {
  position: relative;
  width: 100%;
  height: 2.5rem;
}
.pc .popup-nation .search-box .search-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 4px;
  background-color: var(--gray-0);
  padding-left: 1rem;
  color: var(--gray-4);
}
.pc .popup-nation .search-box .search-input {
  position: absolute;
  width: 100%;
  background-color: transparent;
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 1rem;
  font-weight: 400;
  padding-left: 3rem;
}
.pc .popup-nation .country_list {
  max-height: 15.5rem;
}

.pc.dialog .window-terms {
  position: absolute;
  top: 2.5rem;
  left: 50%;
  width: 75rem;
  transform: translate(-50%, 0); 
}
.pc.dialog .window-terms .title {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 24px;
  font-weight: 600;
}
.pc.dialog .window-terms .body {
  margin-top: 1.5rem;
  width: 100%;
  height: 44rem;
  border-radius: 8px;
  background-color: var(--gray-0);
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 14px;
  font-weight: 400;
  overflow-y: auto;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
/*#endregion*/

/*
 * common layout - circle chart
 */
/*#region - circle chart */
.chart-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}
.circle-spot, .circle-future {
  fill: none;
  stroke-width: 15;
  transform: rotate(-90deg);
  transform-origin: center;
}

/* 현물지갑 (초록색) */
.circle-spot {
  stroke: #2ecc71;
  stroke-dasharray: 565;
  stroke-dashoffset: 0;
}

/* 선물지갑 (주황색) */
.circle-future {
  stroke: #f39c12;
  stroke-dasharray: 565;
  stroke-dashoffset: 0;
}

/* 차트 중앙 수치 */
.percentage-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  font-weight: bold;
}

/* 입력 필드 */
.input-container {
  margin-top: 10px;
}

.input-container input {
  width: 50px;
  padding: 5px;
  text-align: center;
  margin-left: 5px;
}

/* 범례 스타일 */
.legend-container {
  margin-top: 20px;
  display: flex;
  gap: 20px;
}

.legend-box {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 3px;
}

.legend-box.future {
  background-color: #f39c12;
}

.legend-box.spot {
  background-color: #2ecc71;
}
/*#endregion */

/*
 * home
 */
.pc.home {
  z-index: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  width: 100%;
  min-width: 1600px;
  /*max-width: 1600px;*/
  /*padding: 1rem;*/
  margin: 0 auto;
  /* background-color: var(--bg-0); */
}

/*
 * trade
 */
/*#region - trade */
/* 전체 레이아웃 컨테이너 */
.pc.trade {
  display: flex;
  width: 100%;
  height: 100vh; /* 화면 전체 높이 */
  box-sizing: border-box;
}

.pc.trade.left {
  flex: 1;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pc.trade.left .top {
  display: flex;
  height: 44rem;
  box-sizing: border-box;
}

.pc.trade.left .top .left {
  flex: 1;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border: 1px solid var(--gray-3);
}
.pc.trade.left .top .left .section1 {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: 2.5rem; /* 40px → 2.5rem */
  box-sizing: border-box;
  border: 1px solid var(--gray-3);
  display: flex;
  justify-content: space-between;
}
.pc.trade.left .top .left .section1 .section.favorite {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
}
.pc.trade.left .top .left .section1 .section.favorite .scroll-list {
  display: flex;
  flex-wrap: nowrap;
  min-width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0.5rem;
}
.pc.trade.left .top .left .section1 .section.favorite::-webkit-scrollbar {
  display: none;
}
.pc.trade.left .top .left .section1 .section.favorite {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* 두 번째 영역 */
.pc.trade.left .top .left .section2 {
  height: 3.5rem; /* 56px → 3.5rem */
  box-sizing: border-box;
  border: 1px solid var(--gray-3);
}
/* 세 번째 영역 */
.pc.trade.left .top .left .section3 {
  flex: 1; /* 남은 공간을 모두 차지 */
  background-color: #bbb; /* 예시 배경색 */
  box-sizing: border-box;
  border: 1px solid var(--gray-3);
}

/* 상단 오른쪽 영역 */
.pc.trade.left .top .right {
  width: 20rem; /* 320px 고정 너비 */
  height: 100%;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.pc.trade.left .top .right .order_book {
  display: flex;
  position: relative;
  width: 100%;
  height: 70%;
  padding: 1rem;
  border: 1px solid var(--gray-3);
}
.pc.trade.left .top .right .top_bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.5rem;
}
.pc.trade.left .top .right .top_bar .title {
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  margin-right: auto;
}
.pc.trade.left .top .right .top_bar .action_list {
  display: flex;
  gap: 0.5rem;
}
.pc.trade.left .top .right .top_bar .action_list .btn-select-bg {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pc.trade.left .top .right .top_bar .action_list .btn-select-bg.active {
  background-color: var(--gray-2);
}
.pc.trade.left .top .right .menu_bar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.875rem;
  margin-top: 0.5rem;
}
.pc.trade.left .top .right .menu_bar .section1 {
  display: flex;
  align-items: center;
  width: 40%;
  height: 100%;
  color: var(--gray-5);
  font-size: 0.75rem;
}
.pc.trade.left .top .right .menu_bar .section2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 100%;
  color: var(--gray-5);
  font-size: 0.75rem;
}
.pc.trade.left .top .right .menu_bar .section3 {
  display: flex;
  align-items: center;
  justify-content: end;
  width: 30%;
  height: 100%;
  color: var(--gray-5);
  font-size: 0.75rem;
}
.pc.trade.left .top .right .recent_list {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 30%;
  padding: 1rem;
  border: 1px solid var(--gray-3);
}
.pc.trade .book_list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  overflow-y: hidden;
}
.pc.trade .book_list .cell {
  display: flex;
  z-index: 1;
  flex: 1;
  padding: 0.1rem;
  letter-spacing: -0.42px;
  position: relative;
  width: 100%;
}
.pc.trade .book_list .cell span {
  position: relative;
  z-index: 1;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  font-weight: 400;
}
.pc.trade .book_list .cell .bar {
  z-index: 0;
  position: absolute;
  top: 0;
  height: 100%;
}
.pc.trade .book_list .cell.sell .bar {
  left: 0;
  background: var(--alpha_red, rgba(245, 0, 32, 0.2));
}
.pc.trade .book_list .cell.buy .bar {
  right: 0;
  background: var(--alpha_green, rgba(0, 209, 127, 0.2));
}
.pc.trade .ask-cell {
  cursor: pointer;
  background: transparent;
}
.pc.trade .ask-cell:hover {
  background: var(--alpha_red);
}
.pc.trade .bid-cell {
  cursor: pointer;
  background: transparent;
}
.pc.trade .bid-cell:hover {
  background: var(--alpha_green);
}

/* 하단 영역 */
.pc.trade.left .bottom {
  flex: 1; /* 나머지 공간을 차지 */
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
}
.pc.trade.left .bottom .tabs {
  display: flex;
  justify-content: flex-start;
  height: 3rem;
  padding-left: 1rem;
  position: sticky;
  top: 0;
  gap: 0.5rem;
  border: 1px solid var(--gray-3);
}
.pc.trade.left .bottom .tabs .tab {
  min-width: 8rem;
  height: 100%;
  text-align: center;
  cursor: pointer;
  color: var(--gray-6);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
}
.pc.trade.left .bottom .tabs .tab.active {
  color: var(--edx_red);
  border-bottom: 2px solid var(--edx_red);
}
.pc.trade.left .bottom .list {
  display: flex;
  width: 100%;
  border: 1px solid var(--gray-3);
}
.pc.trade.left .bottom .list .list-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  align-items: center;
  color: var(--gray-6);
  font-size: 0.875rem;
  border: 1px solid var(--gray-3);
}
.pc.trade.left .bottom .list .list-header .header-item {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
}

.pc.trade.left .bottom .list .list-content {
  display: flex;
  flex-direction: column;
  top: 0;
  width: 100%;
}
.pc.trade.left .bottom .list .list-content .list-item {
  display: flex;
  width: 100%;
  height: 3.5rem;
}
.pc.trade.left .bottom .list .list-content .list-item .item-cell {
  display: flex;
  justify-content: end;
  color: var(--gray-6);
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  font-weight: 400;
  align-items: center; /* 세로 중앙 정렬 (선택 사항) */
}
.pc.trade.left .bottom .list .list-content .list-item .item-cell.row {
  flex-direction: row; /* 가로 배치 */
  justify-content: center; /* 가로 중앙 정렬 (선택 사항) */
  align-items: center; /* 세로 중앙 정렬 (선택 사항) */
}
.pc.trade.left .bottom .list .list-content .list-item .item-cell .left-line {
  text-align: center;
  width: 4px;
  height: 80%;
  left: 0;
  background-color: var(--gray-6);
}
.pc.trade.left .bottom .list .list-content .list-item .item-cell .left-line.long {
  background-color: var(--green);
}
.pc.trade.left .bottom .list .list-content .list-item .item-cell .left-line.short {
  background-color: var(--red);
}

.list-item:last-child {
  border-bottom: none;
}

.button-yellow {
  background-color: var(--edx_red);
  color: black;
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.button-yellow:hover {
  background-color: #d35400;
}

.button-dark {
  background-color: var(--gray-2);
  color: var(--gray-7);
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.button-dark:hover {
  background-color: var(--gray-0);
}

.button-yellow-dark {
  background-color: var(--gray-2);
  color: var(--gray-7);
  border: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
}
.button-yellow-dark.bg-gray1 {
  background-color: var(--gray-1);
}
.button-yellow-dark.is-active {
  background-color: var(--edx_red);
  color: black;
}



/* 오른쪽 전체 영역 */
.pc.trade.right {
  display: flex;
  flex-direction: column;
  width: 20rem; /* 320px 고정 크기 */
  color: var(--gray-6);
  box-sizing: border-box;
}
.pc.trade.right .order-send {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 44rem;
  border: 1px solid var(--gray-3);
}
.pc.trade.right .order-send .tabs {
  display: flex;
  justify-content: flex-start;
  height: 3rem;
  position: sticky;
  top: 0;
}
.pc.trade.right .order-send .tabs .tab {
  width: 50%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  color: var(--gray-6);
  background-color: var(--gray-0);
  border: none;
  border-top: 2px solid transparent;
}
.pc.trade.right .order-send .tabs .tab.active {
  background: none;
  color: var(--edx_red);
  border-top: 2px solid var(--edx_red);
}

.pc.trade.right .order-send .order {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.pc.trade.right .order-send .order .btn {
  border-radius: 4px;
  background-color: var(--gray-2);
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.trade.right .order-send .order .select-container {
  border-radius: 4px;
  border: 1px solid var(--gray-3);
}
.pc.trade.right .order-send .order .btn-select {
  flex: 1;
  border: 1px solid transparent;
  background-color: none;
}
.pc.trade.right .order-send .order .btn-select.active {
  color: var(--white);
  background-color: var(--edx_red);
}
.pc.trade.right .order-send .order .btn-select.rounded-left {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.pc.trade.right .order-send .order .btn-select.rounded-right {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.pc.trade.right .order-send .order .btn-select.rounded-center {
  border-left: 1px solid var(--gray-3);
  border-right: 1px solid var(--gray-3);
}
.pc.trade.right .order-send .order .input-container {
  margin-top: 1.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
.pc.trade.right .order-send .order .input-container .data-title {
  /*font*/
  color: var(--gray-6);
  font-family: "Pretendard";
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.trade.right .order-send .order .input-container .data-value {
  /*font*/
  color: var(--gray-7);
  font-family: "Pretendard";
  font-size: 1rem;
  font-weight: 400;
}
.pc.trade.right .order-send .order .input-container .data-unit {
  /*font*/
  color: var(--gray-6);
  font-family: "Pretendard";
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.trade.right .order-send .btn-send {
  /*layout*/
  display: flex;
  flex: 1;
  border-radius: 4px;
  height: 2.5rem;
  /*font*/
  font-family: "Pretendard";
  font-size: 1rem;
  font-weight: 600;
}
.pc.trade.right .order-send .btn-send.long {
  /*color*/
  background-color: var(--green);
  color: var(--gray-7);
}
.pc.trade.right .order-send .btn-send.short {
  /*color*/
  background-color: var(--red);
  color: var(--gray-7);
}


.pc.trade.right .assets {
  display: flex;
  flex: 1;
  flex-direction: column;
  bottom: 0;
  width: 100%;
  margin: 0;
  border: 1px solid var(--gray-3);
}
.pc.trade.right .assets .header {
  margin: 1rem;
}
.pc.trade.right .assets .header h1 {
  font-size: 1rem;
  text-align: center;
  color: var(--white);
}
.pc.trade.right .assets .content {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
}
.pc.trade.right .assets .content .info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pc.trade.right .assets .content .info .info-item {
  display: flex;
  justify-content: space-between;
  padding: 0 0;
}
.pc.trade.right .assets .content .info .info-item .label {
  color: var(--gray-6);
  font-weight: 400;
  font-size: 0.875rem;
}
.pc.trade.right .assets .content .info .info-item .value {
  color: var(--gray-7);
  font-weight: 400;
  font-size: 0.875rem;
}
.pc.trade.right .assets .content .actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 10px;
}
.pc.trade.right .assets .content .actions .btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background-color: var(--gray-2);
  color: var(--gray-7);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}
.pc.trade.right .assets .content .actions .btn:hover {
  background-color: var(--gray-1);
}
/*#endregion*/

/*
 * market
 */
/*#region - market */
.pc.market {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}
.pc.market .market_top_image {
  display: flex;
  width: 100%;
  height: 15rem;
  background-image: url(../images/market/dark/market_top_bg.png);
  margin: 0 auto;
}
:root[data-theme=light] .pc.market .market_top_image {
  background-image: url(../images/market/light/market_top_bg.png);
}

/* .pc.market .market_top_image .market-title {
  display: flex;
  width: 16rem;
  height: 7.5rem;
  background-image: url(../images/market/dark/icon_market_title.svg);
}
:root[data-theme=light] .pc.market .market_top_image .market-title {
  background-image: url(../images/market/light/icon_market_title.svg); 
} */

/* 공통: pseudo 생성(=content는 여기서만!) */
.pc.market .market_top_image .market-title{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:16rem;
  height:7.5rem;
  background:none;
  font-size:0;
  line-height:0;
}

.pc.market .market_top_image .market-title::before{
  content:"EASY AND RELIABLE EDX's MARKET";
  font-family:"Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1;
  letter-spacing:0;
  text-align:center;
  margin-bottom:8px;
  white-space:nowrap;
  color:#8D9097; 
}

.pc.market .market_top_image .market-title::after{
  content:"MARKET";
  font-family:"Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-weight:500;
  font-size:40px;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  color:#F5F8FE; 
}

/* light: content 건들지 말고 색상만 override */
:root[data-theme=light] .pc.market .market_top_image .market-title::before{
  color:#686A70;
}
:root[data-theme=light] .pc.market .market_top_image .market-title::after{
  color:#161616;
}
 
.pc.market .tabs {
  display: flex;
  justify-content: center;
  width: 75rem;
  height: 3rem;
  position: sticky;
  top: 0;
  gap: 0.5rem;
  /*border: 1px solid var(--gray-3);*/
  margin: 0 auto;
}
.pc.market .tabs .tab {
  min-width: 10rem;
  height: 100%;
  text-align: center;
  cursor: pointer;
  color: var(--gray-6);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
}
.pc.market .tabs .tab.active {
  color: var(--edx_red);
  border-bottom: 2px solid var(--edx_red);
}

.pc.market .list-container {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.pc.market .list-container h1 {
  display: flex;
  left: 0;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}
.pc.market .list-container .table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.pc.market .list-container .table thead {
  color: var(--gray-6);
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.market .list-container .table th {
  height: 2.5rem;
  text-align: center;
  vertical-align: middle; /* 세로 중앙 정렬 */
  border-top: 1px solid var(--gray-4);    /* 가로선만 유지 */
  border-bottom: 1px solid var(--gray-4); /* 가로선만 유지 */
  border-left: none;             /* 왼쪽 세로선 제거 */
  border-right: none;            /* 오른쪽 세로선 제거 */
  font-size: 0.875rem;
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--gray-6);
}
.pc.market .list-container .table td {
  height: 3.75rem;
  text-align: center;
  vertical-align: middle; /* 세로 중앙 정렬 */
  border-top: 1px solid var(--gray-3);    /* 가로선만 유지 */
  border-bottom: 1px solid var(--gray-3); /* 가로선만 유지 */
  border-left: none;             /* 왼쪽 세로선 제거 */
  border-right: none;            /* 오른쪽 세로선 제거 */
  font-size: 1rem;
  font-family: "Pretendard";
  font-weight: 400;
  color: var(--gray-7);
}

.pc.market .list-fixed {
  max-width: 75rem;
  width: 100%;
  height: 35.5rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/*#endregion*/

/* 
 * promotion
 */
/*#region - promotion */
.pc.promotion {
  display: flex;
  width: 100rem;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}
.pc.promotion .top_image {
  display: flex;
  width: 100%;
  height: 20rem;
  background-image: url(../images/promotion/dark/bg_top.png);
}
:root[data-theme=light] .pc.promotion .top_image {
  background-image: url(../images/promotion/light/bg_top.png);
}
.pc.promotion .top-box {
  width: 75rem;
  height: 5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  /*justify-content: center;*/
  align-items: center;
  background-color: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 0.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.pc.promotion .top-box .title {
  font-size: 1.25rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc.promotion .top-box .reward {
  font-size: 2rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc.promotion .top-box .unit {
  font-size: 1rem;
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--gray-6);
}
.pc.promotion .top-box .right {
  margin-left: auto;
}
.pc.promotion .reward-list-container {
  width: 75rem;
  margin: 0 auto;
}
.pc.promotion .reward-list {
  width: 100%;
  border-top: 1px solid var(--gray-3);
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.pc.promotion .reward-list .reward-item {
  position: relative;
  display: flex;
  width: 100%;
  align-items: stretch;
}
.pc.promotion .reward-list .reward-item.rtl {
  flex-direction: row-reverse;
}
.pc.promotion .reward-list .reward-item .mission {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
}
.pc.promotion .reward-list .reward-item .mission .mission-box {
  width: 100%;
  height: 100%;
  margin: 2rem 0;
  border-radius: 1rem;
  background: var(--gray-0);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 2.5rem;
}
.pc.promotion .reward-list .reward-item .mission .mission-box .reward {
  font-size: 1.75rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
}
.pc.promotion .reward-list .reward-item .mission .mission-box .unit {
  font-size: 1rem;
  font-family: 'Pretendard';
  font-weight: 400;
  color: var(--gray-6);
}
.pc.promotion .reward-list .reward-item .mission .btn-mission {
  width: auto;
  height: 2.5rem;
  padding: 0.75rem 2rem;
  border: 1px solid var(--gray-3);
  border-radius: 0.25rem;
  font-size: 1rem;
  font-family: 'Pretendard';
  font-weight: 600;
  color: var(--gray-7);
  background-color: var(--gray-2);
}
.pc.promotion .reward-list .reward-item .mission .btn-mission.is-active {
  border: none;
  color: var(--gray-1);
  background-color: var(--edx_red);
}
.pc.promotion .reward-list .reward-item .step {
  width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.pc.promotion .reward-list .reward-item .step .line-1half {
  width: 0.25rem;
  height: 50%;
  background-color: var(--gray-2);
  position: absolute;
  top: 0;
}
.pc.promotion .reward-list .reward-item.clear .step .line-1half {
  background-color: var(--edx_red);
}
.pc.promotion .reward-list .reward-item .step .line-2half {
  width: 0.25rem;
  height: 50%;
  background-color: var(--gray-2);
  position: absolute;
  bottom: 0;
}
.pc.promotion .reward-list .reward-item.next .step .line-2half {
  background-color: var(--edx_red);
}
.pc.promotion .reward-list .reward-item.end .step .line-2half {
  background-color: transparent;
}
.pc.promotion .reward-list .reward-item .step .line-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  z-index: 1;
  background-color: var(--gray-1);
  border: 1px solid var(--gray-3);
  border-radius: 0.125rem;
  background-color: var(--gray-2);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pc.promotion .reward-list .reward-item.clear .step .line-dot {
  border: 1px solid var(--edx_red);
  background-color: var(--edx_red);
}
.pc.promotion .reward-list .reward-item .info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1.5rem 0;
}
/*.pc.promotion .reward-list .reward-list-item.step1 .step::before {
  top: 50%;
  height: 50%;
  transform: translate(-50%, -100%);
}*/
.pc.promotion .reward-item.clear .step::before {
  background: var(--edx_red, #C44525);
}
.pc.promotion .reward-item.clear .step .dot_clear {
  border: 1px solid var(--edx_red, #C44525);
  background: var(--edx_red, #C44525);
}
.pc.promotion .reward-list-item.rtl {
  flex-direction: row-reverse;
}
.pc.promotion .reward-list-item .mission {
  display: flex;
  height: 100%;
  align-self: stretch;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 8px 0px;
}
.pc.promotion .reward-list-item .mission_title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
}
.pc.promotion .reward-list-item .mission_title p {
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.pc.promotion .reward-list-item .mission_title h4 {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.pc.promotion .reward-list-item .mission .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem;
  border-radius: 0.5rem;
}
.pc.promotion .reward-list-item .step {
  position: relative;
  flex: 0 0 2rem;
}
.pc.promotion .reward-list-item .step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1px;
  height: 100%;
  background: var(--gray-2, #29313d);
  transform: translate(-50%, -50%);
}
.pc.promotion .reward-list-item .step .dot_clear {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 0.125rem;
  background: var(--gray-2, #29313d);
  transform: translate(-50%, -50%) rotate(45deg);
}
.pc.promotion .reward-list-item .info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.pc.promotion .reward-list-item .info_txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  word-break: keep-all;
}
.pc.promotion .reward-list-item .info_txt strong {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
}
/*#endregion*/

/* 
 * invite
 */
/*#region - invite */
.pc.invite {
  display: flex;
  width: 100rem;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}
.pc.invite .top_image {
  display: flex;
  width: 100%;
  height: 20rem;
  background-image: url(../images/invite/dark/bg_top.svg);
}
:root[data-theme=light] .pc.invite .top_image {
  background-image: url(../images/invite/light/bg_top.svg);
}
.pc.invite .top-box {
  width: 75rem;
  height: 5rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  /*justify-content: center;*/
  align-items: center;
  background-color: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 0.5rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.pc.invite .code-box {
  width: 100%;
  background-color: var(--gray-0);
  border-radius: 0.5rem;
}
.pc.invite .notice-box {
  background-color: var(--gray-0);
  border: 1px solid var(--gray-3);
  border-radius: 0.25rem;
}

/*
 * wallet
 */
/*#region - wallet */
.pc.wallet {
  display: flex;
  width: 100rem;
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}

.pc.wallet .container {
  display: flex;
  flex: 1;
  min-height: 45rem;
  flex-direction: column;
  padding: 2.5rem 5rem;
}
.pc.wallet .container .navi {
  width: 100%;
  align-items: center;
  text-align: start;
  font-size: 0.75rem;
  color: var(--gray-5);
}
.pc.wallet .container .title {
  text-align: start;
  font-size: 1.5rem;
  color: var(--gray-7);
  font-family: 'Pretendard';
  font-weight: 600;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--gray-3);
}
.pc.wallet .container .subtitle {
  text-align: start;
  font-size: 1rem;
  color: var(--gray-7);
  font-family: 'Pretendard';
  font-weight: 600;
}
.pc.wallet .list .top-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem 0;
}
.pc.wallet .list .top-bar .search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 3.5rem;
  background-color: var(--gray-2);
  border-radius: 8px;
}

.pc.wallet .list .list-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  align-items: center;
  color: var(--gray-6);
  font-size: 0.875rem;
  border-top: 1px solid var(--gray-3);
  border-bottom: 1px solid var(--gray-3);
}
.pc.wallet .list .list-header .header-item {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
}
.pc.wallet .list .list-content {
  display: flex;
  flex-direction: column;
  top: 0;
  width: 100%;
}
.pc.wallet .list .list-content .list-item {
  display: flex;
  width: 100%;
  height: 3.5rem;
}
.pc.wallet .list .list-content .list-item .item-cell {
  display: flex;
  justify-content: end;
  color: var(--gray-6);
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  font-weight: 400;
  align-items: center; /* 세로 중앙 정렬 (선택 사항) */
}
.pc.wallet .list .list-content .list-item .item-cell.row {
  flex-direction: row; /* 가로 배치 */
  justify-content: center; /* 가로 중앙 정렬 (선택 사항) */
  align-items: center; /* 세로 중앙 정렬 (선택 사항) */
}
.pc.wallet .list .list-content .list-item .item-cell .left-line {
  text-align: center;
  width: 4px;
  height: 80%;
  left: 0;
  background-color: var(--gray-6);
}
.pc.wallet .list .list-content .list-item .item-cell .left-line.long {
  background-color: var(--green);
}
.pc.wallet .list .list-content .list-item .item-cell .left-line.short {
  background-color: var(--red);
}

.pc.wallet .asset-info {
  display: flex;
  flex-direction: column;
}
.pc.wallet .asset-info .data {
  display: flex;
  flex-direction: row;
}
.pc.wallet .asset-info .data .value {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--gray-7);
}
.pc.wallet .asset-info .data .unit {
  margin-left: 0.375rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-6);
}
.pc.wallet .asset-info .calc {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--gray-6);
}

.pc.wallet .asset_info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.pc.wallet .asset_info > div {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  padding: 0.5rem 0;
}
.pc.wallet .asset_info dt {
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.pc.wallet .asset_info dd {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.pc.wallet .asset_info dd .calc_numb {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
/*#endregion */

/*
 * center (service center)
 */
/*#region - center */
.pc.center {
  display: flex;
  width: 100rem;
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}

.pc.center .container {
  display: flex;
  flex: 1;
  min-height: 45rem;
  flex-direction: column;
  padding: 2.5rem 5rem;
}
.pc.center .container .navi {
  width: 100%;
  align-items: center;
  text-align: start;
  font-size: 0.75rem;
  color: var(--gray-5);
}
.pc.center .container .title {
  text-align: start;
  font-size: 1.5rem;
  color: var(--gray-7);
  font-family: 'Pretendard';
  font-weight: 600;
  /*padding-bottom: 1rem;*/
}
.pc.center .container .subtitle {
  text-align: start;
  font-size: 0.75rem;
  color: var(--gray-5);
  font-family: 'Pretendard';
  font-weight: 400;
}
.pc.center .list .top-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem 0;
}
.pc.center .list .top-bar .search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 3.5rem;
  background-color: var(--gray-2);
  border-radius: 8px;
}

.pc.center .list .list-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  align-items: center;
  color: var(--gray-6);
  font-size: 0.875rem;
  border-top: 1px solid var(--gray-3);
  border-bottom: 1px solid var(--gray-3);
}
.pc.center .list .list-header .header-item {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
}
.pc.center .list .list-content {
  display: flex;
  flex-direction: column;
  top: 0;
  width: 100%;
}
.pc.center .list .list-content .list-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pc.center .list .list-content .list-item {
  background-color: transparent;
}
.pc.center .list .list-content .list-item.no-hover:hover {
  background-color: transparent !important;
}
.pc.center .list .list-content .list-item:hover {
  background-color: var(--gray-2);
}
.pc.center .list .list-content .list-item.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.pc.center .list .list-content .list-item .item-cell {
  display: flex;
  justify-content: start;
  color: var(--gray-6);
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  font-weight: 400;
  align-items: center;
}
.pc.center .list .list-content .list-item .item-cell.row {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pc.center .list .list-content .list-item .item-cell.title{
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  color: var(--gray-7);
  font-size: 1rem;
  font-weight: 400;
}
.pc.center .list .list-content .list-item .item-cell.sub-title{
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  color: var(--gray-5);
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.center .list .list-content .list-item .item-cell .left-line {
  text-align: center;
  width: 4px;
  height: 80%;
  left: 0;
  background-color: var(--gray-6);
}
.pc.center .list .list-content .list-item .item-cell .left-line.long {
  background-color: var(--green);
}
.pc.center .list .list-content .list-item .item-cell .left-line.short {
  background-color: var(--red);
}

.pc.center .list .grid-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));/*24rem*/
  gap: 1.5rem;
  top: 0;
  width: 100%;
}
.pc.center .list .grid-content .grid-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 0.5rem;
}
.pc.center .list .grid-content .grid-item {
  background-color: var(--gray-2);
}
/*.pc.center .list .grid-content .grid-item:hover {
  background-color: var(--gray-3);
}*/
.pc.center .list .grid-content .grid-item .grid-cell {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  color: var(--gray-6);
  font-size: 0.875rem;
  font-family: "Pretendard";
  font-weight: 400;
  text-align: start;
}
.pc.center .list .grid-content .grid-item .grid-cell.row {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  text-align: start;
}
.pc.center .list .grid-content .grid-item .grid-cell.title{
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  color: var(--gray-7);
  font-size: 1rem;
  font-weight: 400;
}
.pc.center .list .grid-content .grid-item .grid-cell.sub-title{
  display: flex;
  align-items: start;
  justify-content: start;
  text-align: start;
  color: var(--gray-5);
  font-size: 0.875rem;
  font-weight: 400;
}
/*#endregion */

/*
 * myhome
 */
/*#region - myhome */
.pc.myhome {
  display: flex;
  width: 100rem;
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}

.pc.myhome .container {
  display: flex;
  flex: 1;
  min-height: 45rem;
  flex-direction: column;
  padding: 2.5rem 5rem;
}
.pc.myhome .container .navi {
  width: 100%;
  align-items: center;
  text-align: start;
  font-size: 0.75rem;
  color: var(--gray-5);
}
.pc.myhome .container .title {
  text-align: start;
  font-size: 1.5rem;
  color: var(--gray-7);
  font-family: 'Pretendard';
  font-weight: 600;
  /*padding-bottom: 1rem;*/
}
.pc.myhome .container .subtitle {
  text-align: start;
  font-size: 0.75rem;
  color: var(--gray-5);
  font-family: 'Pretendard';
  font-weight: 400;
}
.pc.myhome .list .top-bar {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem 0;
}
.pc.myhome .list .top-bar .search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 3.5rem;
  background-color: var(--gray-2);
  border-radius: 8px;
}

.pc.myhome .list .list-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  align-items: center;
  color: var(--gray-6);
  font-size: 0.875rem;
  border-top: 1px solid var(--gray-3);
  border-bottom: 1px solid var(--gray-3);
}
.pc.myhome .list .list-header .header-item {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
}
.pc.myhome .list .list-content {
  display: flex;
  flex-direction: column;
  top: 0;
  width: 100%;
}
.pc.myhome .list .list-content .list-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pc.myhome .list .list-content .list-item {
  background-color: transparent;
}
.pc.myhome .list .list-content .list-item.no-hover:hover {
  background-color: transparent !important;
}
.pc.myhome .list .list-content .list-item:hover {
  background-color: var(--gray-2);
}
.pc.myhome .list .list-content .list-item.row {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.pc.myhome .list .list-content .list-item .item-cell {
  display: flex;
  justify-content: start;
  color: var(--gray-6);
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  font-weight: 400;
  align-items: center;
}
.pc.myhome .list .list-content .list-item .item-cell.row {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pc.myhome .list .list-content .list-item .item-cell.title{
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  color: var(--gray-7);
  font-size: 1rem;
  font-weight: 400;
}
.pc.myhome .list .list-content .list-item .item-cell.sub-title{
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  color: var(--gray-5);
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.myhome .list .list-content .list-item .item-cell.value{
  display: flex;
  align-items: center;
  justify-content: start;
  text-align: start;
  color: var(--gray-7);
  font-size: 0.875rem;
  font-weight: 400;
}
.pc.myhome .list .list-content .list-item .item-cell .left-line {
  text-align: center;
  width: 4px;
  height: 80%;
  left: 0;
  background-color: var(--gray-6);
}
.pc.myhome .list .list-content .list-item .item-cell .left-line.long {
  background-color: var(--green);
}
.pc.myhome .list .list-content .list-item .item-cell .left-line.short {
  background-color: var(--red);
}
/*#endregion */
/* history */
.pc.history {
  display: flex;
  width: 100rem;
  flex-direction: row;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 0 auto;
}
.pc.history .container {
  display: flex;
  flex: 1;
  min-height: 45rem;
  flex-direction: column;
  padding: 2.5rem 5rem;
}
.pc.history .container .navi {
  width: 100%;
  align-items: center;
  text-align: start;
  font-size: 0.75rem;
  color: var(--gray-5);
}
.pc.history .container .title {
  text-align: start;
  font-size: 1.5rem;
  color: var(--gray-7);
  font-family: 'Pretendard';
  font-weight: 600;
}
.pc.history .list {
  display: flex;
  width: 100%;
}
.pc.history .list .top-bar {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1.5rem 0;
  border-top: 1px solid var(--gray-3);
  border-bottom: 1px solid var(--gray-3);
}
.pc.history .list .top-bar .search-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  width: 100%;
  height: 3.5rem;
  background-color: var(--gray-2);
  border-radius: 8px;
}
.pc.history .list .list-header {
  display: flex;
  width: 100%;
  height: 2.5rem;
  align-items: center;
  color: var(--gray-6);
  font-size: 0.875rem;
  border: 1px solid var(--gray-3);
}
.pc.history .list .list-header .header-item {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 100%;
}

.pc.history .list .list-content {
  display: flex;
  flex-direction: column;
  top: 0;
  width: 100%;
}
.pc.history .list .list-content .list-item {
  display: flex;
  width: 100%;
  height: 3.5rem;
}
.pc.history .list .list-content .list-item .item-cell {
  display: flex;
  justify-content: end;
  color: var(--gray-6);
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  font-weight: 400;
  align-items: center; /* 세로 중앙 정렬 (선택 사항) */
}
.pc.history .list .list-content .list-item .item-cell.row {
  flex-direction: row; /* 가로 배치 */
  justify-content: center; /* 가로 중앙 정렬 (선택 사항) */
  align-items: center; /* 세로 중앙 정렬 (선택 사항) */
}
.pc.history .list .list-content .list-item .item-cell .left-line {
  text-align: center;
  width: 4px;
  height: 80%;
  left: 0;
  background-color: var(--gray-6);
}
.pc.history .list .list-content .list-item .item-cell .left-line.long {
  background-color: var(--green);
}
.pc.history .list .list-content .list-item .item-cell .left-line.short {
  background-color: var(--red);
}

/* side bar */
.pc .sidebar {
  width: 15rem;
  padding: 1.5rem 1rem;
}
.pc .sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pc .sidebar ul li {
  padding: 1rem 1.25rem;
  color: var(--gray-6);
  font-family: 'Pretendard';
  font-weight: 400;
  font-size: 1rem;
  cursor: pointer;
}
.pc .sidebar ul li.active {
  background: linear-gradient(to right, var(--gradient_fubit_yellow_start), var(--gradient_fubit_yellow_end)); /* 노란색 그라데이션 */
  color: var(--gray-7);
  font-family: 'Pretendard';
  font-weight: 600;
  border-left: 4px solid var(--edx_red);
}
/*.pc .sidebar ul li:hover {
  background-color: #333;
  color: #fff;
}*/





/* 리스트 아이템 스타일 */
.section.favorite .scroll-list .scroll-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.5rem;
  height: 100%; /* 세로 고정 */
  color: var(--gray-6);
  white-space: nowrap;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Pretendard";
  font-weight: 400;
}

/* 제목 스타일 */
.scroll-title {
  font-weight: bold;
  margin-right: 0.5rem;
}

/* 값 스타일 */
.scroll-value {
  font-size: 1rem;
}

.scroll-value.positive {
  color: var(--green);
}

.scroll-value.negative {
  color: var(--red);
}

.positive {
  color: var(--green);
}

.negative {
  color: var(--red);
}

/* market info */
.market-info {
  display: flex;
  align-items: center;
  height: 100%;
}
.market-info .symbol {
  color: var(--gray-7);
  font-size: 16px;
  font-weight: 600;
}
.market-info .market-type {
  color: var(--gray-6);
  font-size: 12px;
  font-weight: 400;
}
.market-info .current-price {
  font-size: 20px;
  font-weight: 600;
}
.market-info .market-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    text-align: center;
    min-width: 4.375rem; /* 최소 너비 설정 */
    row-gap: 4px;
}
.market-item .title {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-5);
}
.market-item .label {
  font-size: 12px;
  font-weight: 400;
  color: var(--gray-7);
}
.market-info .current-symbol {
  position: relative;
  display: flex;
  align-items: center;
}
/* market select popup */
.market-popup {
  display: none;
  position: absolute;
  top: 100%;
  background-color: var(--gray-2-1);
  stroke-width: 1px;
  stroke: var(--gray-3);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  width: 600px;
  height: 592px;
  padding: 1.5rem;
  z-index: 100;
}
.market-info .current-symbol:hover .market-popup {
  display: block;
}
.market-popup .search-container {
  display: flex;
  align-items: center;
  border: 1px solid var(--gray-3);
  border-radius: 5px;
  background-color: var(--gray-0);
  height: 40px;
}
.market-popup .search-container input {
  background: none;
  border: none;
  outline: none;
  color: var(--gray-7);
  width: 100%;
  font-size: 1rem;
  padding: 1rem;
}
.market-popup .search-container .btn_search {
  display: flex;
  align-items: center;
  background-color: var(--edx_red);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  width: 2.5rem;
  height: 100%;
}
.market-popup table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.market-popup thead {
  font-weight: bold;
  color: var(--gray-6);
}
.market-popup th {
  height: 39px;
  padding: 0.5rem;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-4);
}
.market-popup td {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  vertical-align: middle;
}
.market-popup td.pair {
  text-align: left;
}
.market-popup td.pair .ticker{
  color: var(--gray-7);
  font-size: 16px;
  font-weight: 400;
}
.market-popup td.pair .type{
  color: var(--gray-6);
  font-size: 14px;
  font-weight: 400;
}
.market-popup .scrollable {
  max-height: 448px;
  overflow-y: auto;
  display: block;
}
.market-popup .scrollable tbody tr {
  background-color: transparent;
}
.market-popup .scrollable tbody tr:hover {
  background-color: var(--gray-4);
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit;
  /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

html {
  font-size: 16px;
}

body {
  background-color: var(--gray-1, #1f232a);
}

html,
body {
  overflow: auto;
  height: 100%;
  color: var(--gray-7, #eaecef);
  font-family: "Pretendard";
  font-feature-settings: "clig" off, "liga" off, "tnum";
}
html *,
body * {
  font-feature-settings: "clig" off, "liga" off, "tnum";
}

[role=button],
[type=button],
button {
  cursor: pointer;
}
[role=button]:disabled,
[type=button]:disabled,
button:disabled {
  cursor: not-allowed;
}

button {
  display: flex;
  justify-content: center;
  align-items: center;
}
button i {
  display: block;
}
button i img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}

img.is-error {
  width: 0;
  height: 0;
  opacity: 0;
}

/* font -- */
.font_color--white {
  color: var(--white_darkbg, #ffffff) !important;
}
.font_color--light {
  color: var(--gray-7, #eaecef) !important;
}
.font_color--gray {
  color: var(--gray-5) !important;
}
.font_color--gray1 {
  color: var(--gray-1) !important;
}
.font_color--gray2 {
  color: var(--gray-2) !important;
}
.font_color--gray3 {
  color: var(--gray-3) !important;
}
.font_color--gray4 {
  color: var(--gray-4) !important;
}
.font_color--gray5 {
  color: var(--gray-5) !important;
}
.font_color--gray6 {
  color: var(--gray-6) !important;
}
.font_color--gray7 {
  color: var(--gray-7) !important;
}
.font_color--yellow {
  color: var(--edx_red, #C44525) !important;
}
.font_color--red {
  color: var(--red, #f6465d) !important;
}
.font_color--green {
  color: var(--green, #2ebd85) !important;
}
.font_color--verysafe {
  color: var(--security_verysafe, #51e4aa) !important;
}
.font_color--normal {
  color: var(--security_normal, #9db6d2) !important;
}
.font_color--dangerous {
  color: var(--security_dangerous, #f6465d) !important;
}

.font_size-xsm {
  font-size: 0.75rem !important;
}
.font_size-sm {
  font-size: 0.875rem !important;
}
.font_size-md {
  font-size: 1rem !important;
}
.font_size-lg {
  font-size: 1.125rem !important;
}
.font_size-xlg {
  font-size: 1.25rem !important;
}
.font_size-12 {
  font-size: 0.75rem !important;
}
.font_size-14 {
  font-size: 0.875rem !important;
}
.font_size-16 {
  font-size: 1rem !important;
}
.font_size-18 {
  font-size: 1.125rem !important;
}
.font_size-20 {
  font-size: 1.25rem !important;
}
.font_size-24 {
  font-size: 1.5rem !important;
}
.font_size-34 {
  font-size: 2.125rem !important;
}
.font_weight-100 {
  font-weight: 100 !important;
}
.font_weight-200 {
  font-weight: 200 !important;
}
.font_weight-300 {
  font-weight: 300 !important;
}
.font_weight-400 {
  font-weight: 400 !important;
}
.font_weight-500 {
  font-weight: 500 !important;
}
.font_weight-600 {
  font-weight: 600 !important;
}
.font_weight-700 {
  font-weight: 700 !important;
}

.font_thin {
  font-family: "Pretendard" !important;
  font-weight: 100 !important;
}
.font_regular {
  font-family: "Pretendard";
  font-weight: 400;
}
.font_regular {
  font-family: "Pretendard";
  font-weight: 500;
}
.font_letter-2p {
  letter-spacing: -2%;
}

.font_for_number {
  font-family: 'Bahnschrift';
}
/* -- font */

/* font group */
.font-600-34-gray7 {
  font-weight: 600;
  font-size: 2.125rem;
  color: var(--gray-7);
}
.font-600-24-gray7 {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--gray-7);
}
.font-600-20-gray7 {
  font-weight: 600;
  font-size: 1.25rem;
  color: var(--gray-7);
}
.font-600-16-gray7 {
  font-weight: 600;
  font-size: 1rem;
  color: var(--gray-7);
}
.font-600-16-yellow {
  font-weight: 600;
  font-size: 1rem;
  color: var(--edx_red);
}
.font-600-14-gray7 {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-7);
}
.font-600-14-gray6 {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-6);
}
.font-600-14-gray5 {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--gray-5);
}
.font-400-16-gray7 {
  font-weight: 400;
  font-size: 1rem;
  color: var(--gray-7);
}
.font-400-14-gray7 {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--gray-7);
}
.font-400-14-gray6 {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--gray-6);
}
.font-400-14-gray5 {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--gray-5);
}
.font-400-14-gray4 {
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--gray-4);
}
.font-400-12-gray6 {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--gray-6);
}
.font-100-20-gray6 {
  font-weight: 100;
  font-size: 1.25rem;
  color: var(--gray-6);
}
/* -- font group */

/* color */
.bg_color--green {
  background-color: var(--green) !important;
}
.bg_color--red {
  background-color: var(--red) !important;
}
.bg_color--gray0 {
  background-color: var(--gray-0) !important;
}
.bg_color--gray1 {
  background-color: var(--gray-1) !important;
}
.bg_color--gray2 {
  background-color: var(--gray-2) !important;
}
.bg_color--gray3 {
  background-color: var(--gray-3) !important;
}
.bg_color--gray4 {
  background-color: var(--gray-4) !important;
}
.bg_color--gray5 {
  background-color: var(--gray-5) !important;
}
.bg_color--gray6 {
  background-color: var(--gray-6) !important;
}
.bg_color--gray7 {
  background-color: var(--gray-7) !important;
}

.green {
  color: var(--green);
}

.red {
  color: var(--red);
}

.w-full {
  width: 100% !important;
}
.w-p90 { width: 90% !important;}
.w-p80 { width: 80% !important;}
.w-p70 { width: 70% !important;}
.w-p60 { width: 60% !important;}
.w-p50 { width: 50% !important;}
.w-p40 { width: 40% !important;}
.w-p30 { width: 30% !important;}
.w-p20 { width: 20% !important;}
.w-p10 { width: 10% !important;}

.w-400 {
  width: 25rem !important;
}
.w-180 {
  width: 11.25rem !important;
}
.w-160 {
  width: 10rem !important;
}
.w-144 {
  width: 9rem !important;
}
.w-128 {
  width: 8rem !important;
}
.w-120 {
  width: 7.5rem !important;
}
.w-104 {
  width: 6.5rem !important;
}
.w-90 {
  width: 5.625rem !important;
}
.w-80 {
  width: 5rem !important;
}
.w-72 {
  width: 4.5rem !important;
}
.w-48 {
  width: 3rem !important;
}
.w-40 {
  width: 2.5rem !important;
}
.w-32 {
  width: 2rem !important;
}
.w-24 {
  width: 1.5rem !important;
}
.w-min-160 {
  min-width: 10rem !important;
}
.w-min-80 {
  min-width: 5rem !important;
}

.h-full {
  height: 100% !important;
}
.h-144 {
  height: 9rem !important;
}
.h-80 {
  height: 5rem !important;
}
.h-56 {
  height: 3.5rem !important;
}
.h-48 {
  height: 3rem !important;
}
.h-40 {
  height: 2.5rem !important;
}
.h-32 {
  height: 2rem !important;
}
.h-24 {
  height: 1.5rem !important;
}

.h-min-40 {
  min-height: 2.5rem !important;
}

.gap-16 {
  gap: 1rem !important;
}
.gap-8 {
  gap: 0.5rem !important;
}
.gap-4 {
  gap: 0.25rem !important;
}

.padding-none {
  padding: 0 !important;
}
.padding-xsm {
  padding: 0.25rem !important;
}
.padding-sm {
  padding: 0.5rem !important;
}
.padding-md {
  padding: 1rem !important;
}
.padding-lg {
  padding: 1.5rem !important;
}
.padding-xlg {
  padding: 2rem !important;
}
.padding-x-none {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.padding-x-xsm {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
.padding-x-sm {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.padding-x-md {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.padding-x-lg {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
.padding-x-xlg {
  padding-right: 2rem !important;
  padding-left: 2rem !important;
}
.padding-y-none {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.padding-y-xsm {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.padding-y-sm {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.padding-y-md {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.padding-y-lg {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.padding-y-xlg {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}
.padding-top-none {
  padding-top: 0 !important;
}
.padding-top-xsm {
  padding-top: 0.25rem !important;
}
.padding-top-sm {
  padding-top: 0.5rem !important;
}
.padding-top-md {
  padding-top: 1rem !important;
}
.padding-top-lg {
  padding-top: 1.5rem !important;
}
.padding-top-xlg {
  padding-top: 2rem !important;
}
.padding-bottom-none {
  padding-bottom: 0 !important;
}
.padding-bottom-xsm {
  padding-bottom: 0.25rem !important;
}
.padding-bottom-sm {
  padding-bottom: 0.5rem !important;
}
.padding-bottom-md {
  padding-bottom: 1rem !important;
}
.padding-bottom-lg {
  padding-bottom: 1.5rem !important;
}
.padding-bottom-xlg {
  padding-bottom: 2rem !important;
}
.padding-left-none {
  padding-left: 0 !important;
}
.padding-left-xsm {
  padding-left: 0.25rem !important;
}
.padding-left-sm {
  padding-left: 0.5rem !important;
}
.padding-left-md {
  padding-left: 1rem !important;
}
.padding-left-lg {
  padding-left: 1.5rem !important;
}
.padding-left-xlg {
  padding-left: 2rem !important;
}
.padding-right-none {
  padding-right: 0 !important;
}
.padding-right-xsm {
  padding-right: 0.25rem !important;
}
.padding-right-sm {
  padding-right: 0.5rem !important;
}
.padding-right-md {
  padding-right: 1rem !important;
}
.padding-right-lg {
  padding-right: 1.5rem !important;
}
.padding-right-xlg {
  padding-right: 2rem !important;
}

.margin-none {
  margin: 0 !important;
}
.margin-xsm {
  margin: 0.25rem !important;
}
.margin-sm {
  margin: 0.5rem !important;
}
.margin-md {
  margin: 1rem !important;
}
.margin-lg {
  margin: 1.5rem !important;
}
.margin-xlg {
  margin: 2rem !important;
}
.margin-x-none {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.margin-x-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}
.margin-x-xsm {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.margin-x-sm {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.margin-x-md {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.margin-x-lg {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.margin-x-xlg {
  margin-right: 2rem !important;
  margin-left: 2rem !important;
}
.margin-x--xsm {
  margin-right: -0.25rem !important;
  margin-left: -0.25rem !important;
}
.margin-x--sm {
  margin-right: -0.5rem !important;
  margin-left: -0.5rem !important;
}
.margin-x--md {
  margin-right: -1rem !important;
  margin-left: -1rem !important;
}
.margin-x--lg {
  margin-right: -1.5rem !important;
  margin-left: -1.5rem !important;
}
.margin-x--xlg {
  margin-right: -2rem !important;
  margin-left: -2rem !important;
}
.margin-y-none {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.margin-y-xsm {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.margin-y-sm {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.margin-y-md {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.margin-y-lg {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.margin-y-xlg {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}
.margin-top-none {
  margin-top: 0 !important;
}
.margin-top-auto {
  margin-top: auto !important;
}
.margin-top-xsm {
  margin-top: 0.25rem !important;
}
.margin-top-sm {
  margin-top: 0.5rem !important;
}
.margin-top-md {
  margin-top: 1rem !important;
}
.margin-top-lg {
  margin-top: 1.5rem !important;
}
.margin-top-xlg {
  margin-top: 2rem !important;
}
.margin-bottom-none {
  margin-bottom: 0 !important;
}
.margin-bottom-auto {
  margin-bottom: auto !important;
}
.margin-bottom-xsm {
  margin-bottom: 0.25rem !important;
}
.margin-bottom-sm {
  margin-bottom: 0.5rem !important;
}
.margin-bottom-md {
  margin-bottom: 1rem !important;
}
.margin-bottom-lg {
  margin-bottom: 1.5rem !important;
}
.margin-bottom-xl {
  margin-bottom: 2rem !important;
}
.margin-left-none {
  margin-left: 0 !important;
}
.margin-left-auto {
  margin-left: auto !important;
}
.margin-left-xsm {
  margin-left: 0.25rem !important;
}
.margin-left-sm {
  margin-left: 0.5rem !important;
}
.margin-left-md {
  margin-left: 1rem !important;
}
.margin-left-lg {
  margin-left: 1.5rem !important;
}
.margin-left-xlg {
  margin-left: 2rem !important;
}
.margin-right-none {
  margin-right: 0 !important;
}
.margin-right-auto {
  margin-right: auto !important;
}
.margin-right-xsm {
  margin-right: 0.25rem !important;
}
.margin-right-sm {
  margin-right: 0.5rem !important;
}
.margin-right-md {
  margin-right: 1rem !important;
}
.margin-right-lg {
  margin-right: 1.5rem !important;
}
.margin-right-xlg {
  margin-right: 2rem !important;
}

.gap-none {
  gap: 0 !important;
}
.gap-xsm {
  gap: 0.25rem !important;
}
.gap-sm {
  gap: 0.5rem !important;
}
.gap-md {
  gap: 1rem !important;
}
.gap-lg {
  gap: 1.5rem !important;
}
.gap-xlg {
  gap: 2rem !important;
}

.text_align-center {
  text-align: center !important;
}
.text_align-left {
  text-align: left !important;
}
.text_align-right {
  text-align: right !important;
}

.hide {
  display: none !important;
}
.show {
  display: block !important;
}

.block {
  display: block !important;
}

.flex {
  display: flex !important;
}
.flex_direction_col {
  flex-direction: column !important;
}
.flex_direction_row {
  flex-direction: row !important;
}
.flex_col {
  flex-direction: column !important;
}
.flex_row {
  flex-direction: row !important;
}
.flex_wrap {
  flex-wrap: wrap !important;
}
.flex_nowrap {
  flex-wrap: nowrap !important;
}
.flex_center {
  justify-content: center !important;
  align-items: center !important;
}
.flex_start {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.flex_end {
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
.flex_between {
  justify-content: space-between !important;
  align-items: center !important;
}
.flex_around {
  justify-content: space-around !important;
  align-items: center !important;
}
.flex_evenly {
  justify-content: space-evenly !important;
  align-items: center !important;
}
.flex_stretch {
  align-items: stretch !important;
}
.flex_self_center {
  align-self: center !important;
}
.flex_self_start {
  align-self: flex-start !important;
}
.flex_self_end {
  align-self: flex-end !important;
}
.flex_self_stretch {
  align-self: stretch !important;
}
.flex_self_baseline {
  align-self: baseline !important;
}
.flex_justify_center {
  justify-content: center !important;
}
.flex_justify_start {
  justify-content: flex-start !important;
}
.flex_justify_end {
  justify-content: flex-end !important;
}
.flex_justify_between {
  justify-content: space-between !important;
}
.flex_justify_around {
  justify-content: space-around !important;
}
.flex_justify_evenly {
  justify-content: space-evenly !important;
}
.flex_align_center {
  align-items: center !important;
}
.flex_align_start {
  align-items: flex-start !important;
}
.flex_align_end {
  align-items: flex-end !important;
}
.flex_align_stretch {
  align-items: stretch !important;
}
.flex_align_baseline {
  align-items: baseline !important;
}
.flex_content_center {
  align-content: center !important;
}
.flex_content_start {
  align-content: flex-start !important;
}
.flex_content_end {
  align-content: flex-end !important;
}
.flex_content_between {
  align-content: space-between !important;
}
.flex_content_around {
  align-content: space-around !important;
}
.flex_content_stretch {
  align-content: stretch !important;
}
.flex_flex_min {
  flex: 0 0 auto !important;
}
.flex_flex_max {
  flex: 1 1 auto !important;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.for_a11y {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.num_only {
  font-family: "Bahnschrift", "Pretendard" !important;
}

.rounded-none {
  border-radius: 0 !important;
}
.rounded-xsm {
  border-radius: 0.25rem !important;
}
.rounded-sm {
  border-radius: 0.5rem !important;
}
.rounded-md {
  border-radius: 1rem !important;
}
.rounded-lg {
  border-radius: 1.5rem !important;
}
.rounded-xlg {
  border-radius: 2rem !important;
}
.rounded-full {
  border-radius: 9999px !important;
}

.height-auto {
  height: auto !important;
}

.width-auto {
  width: auto !important;
  flex: 0 0 auto !important;
}

.bg-none {
  background-color: transparent !important;
}
.bg_active_color-green.is-active {
  background: var(--green, #2ebd85);
}
.bg_active_color-red.is-active {
  background: var(--red, #f6465d);
}

.btn {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
}
.btn i {
  display: block;
}
.btn_16 {
  width: 1rem;
  height: 1rem;
}
.btn_24 {
  width: 1.5rem;
  height: 1.5rem;
}
.btn_32 {
  width: 2rem;
  height: 2rem;
}
.btn_resend {
  min-width: 2.5rem;
  color: var(--edx_red, #C44525);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.btn_txt {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 2.5rem;
  padding: 0.625rem 1rem;
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.btn_txt_group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}
.btn_txt_group hr {
  height: 1px;
  border: 0;
  background: var(--gray-3, #333b47);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.btn_txt.btn_more {
  color: var(--gray-6, #a5acb6);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}
.btn_link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  width: 100%;
  min-height: 3rem;
  padding: 0.25rem 1rem;
}
.btn_link span {
  flex: 1 0 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.btn_link .status {
  flex: 0 0 auto;
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.125rem; /* 150% */
  text-align: right;
}
.btn_link .status.red {
  color: var(--red, #f6465d);
}
.btn_link .status.green {
  color: var(--green, #2ebd85);
}
.btn_select {
  display: flex;
  flex: 1 1 auto;
  gap: 0.25rem;
  align-items: center;
  height: 2.5rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  white-space: nowrap;
}
.select .btn_select {
  align-items: center;
  padding: 0;
  align-self: center;
}

.btn_detail {
  color: var(--edx_red, #C44525);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-decoration-line: underline;
}
.btn_list_check {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-style: normal;
  /* pretendard/title_m */
  font-size: 0.875rem;
  line-height: normal;
  color: var(--gray-7, #eaecef);
}
.btn_list_check.is-checked {
  background: var(--gray-2, #29313d);
  color: var(--edx_red, #C44525);
}
.btn_list_check.is-checked.green {
  background: transparent;
  color: var(--green, #2ebd85);
}
.btn_list_check span {
  flex: 1 1 auto;
}
.btn_list_check .status {
  flex: 0 0 auto;
}
.btn_list_check .status.red {
  color: var(--red, #f6465d);
}
.btn_list_check .status.green {
  color: var(--green, #2ebd85);
}
.btn_toggle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 3rem;
  padding: 0.25rem 1rem;
}
.btn_toggle span {
  flex: 1 0 0;
}
.btn_add.address {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 10rem;
  padding: 1.5rem 1rem;
  border-radius: 1rem;
  background: var(--gray-2, #29313d);
}
.btn_add.address span {
  color: var(--gray-5, #848b9c);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.btn_select {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 2.5rem;
  padding: 0.5rem;
}
.btn_select span {
  flex: 1 1 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.btn_centered {
  justify-content: center;
  width: 100%;
}
.btn_centered span {
  flex: 0 0 auto;
}
.btn.bordered {
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 4px;
  color: var(--gray-6, #a5acb6);
}
.btn.bordered.yellow {
  border-color: var(--edx_red, #C44525);
  color: var(--edx_red, #C44525);
}
.btn.primary {
  border-radius: 0.25rem;
  background: var(--edx_red, #C44525);
  color: var(--white_darkbg, #FFFFFF);
}
.btn.primary:disabled {
  background: var(--gray_yellow, #5c4d28);
}
.btn.secondary {
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
  color: var(--gray-7, #eaecef);
}
.btn.btn_long {
  border-radius: 0.25rem;
  background: var(--green, #2ebd85);
  color: var(--white_darkbg, #ffffff);
}
.btn.btn_short {
  border-radius: 0.25rem;
  background: var(--red, #f6465d);
  color: var(--white_darkbg, #ffffff);
}
.btn_md {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 2rem;
  padding: 0.1875rem 1rem;
  border-radius: 0.25rem;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.btn_sm {
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 1.5rem !important;
  padding: 0.1875rem 1rem;
  border-radius: 0.25rem;
}
.btn_sm span {
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem !important;
  line-height: normal;
  text-align: center;
}
.btn_minimal {
  border: 1px solid var(--gray-3, #333b47);
}
.btn.btn_currency_select {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  align-self: stretch;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: var(--gray-2, #29313d);
}
.btn.btn_currency_select span {
  flex: 1 1 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5;
}
.btn_size-sm {
  height: 1.5rem;
  padding: 0.25rem 1rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.btn_size-md {
  height: 2rem;
  padding: 0.1875rem 1rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}

.icon {
  display: inline-block;
  flex: 0 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
.icon_8 {
  width: 0.5rem;
  height: 0.5rem;
}
.icon_8.icon_minus {
  background-image: url(../images/icons/dark/icon_8_minus.svg);
}
.icon_8.icon_plus {
  background-image: url(../images/icons/dark/icon_8_plus.svg);
}
.icon_8.icon_dropdown {
  background-image: url(../images/icons/dark/icon_8_dropdown.svg);
}
.icon_8.icon_dropdown_line {
  background-image: url(../images/icons/dark/icon_8_dropdown_line.svg);
}
.icon_16 {
  width: 1rem;
  height: 1rem;
}
.icon_16.icon_check {
  background-image: url(../images/icons/dark/icon_16_check_white.svg);
}
.icon_16.icon_check.yellow {
  background-image: url(../images/icons/dark/icon_16_check_yellow.svg);
}
.icon_16.icon_check.green {
  background-image: url(../images/icons/dark/icon_16_check_green.svg);
}
.icon_16.icon_logout {
  background-image: url(../images/icons/dark/icon_16_logout.svg);
}
.icon_16.icon_mail {
  background-image: url(../images/icons/dark/icon_16_mail.svg);
}
.icon_16.icon_user {
  background-image: url(../images/icons/dark/icon_16_user.svg);
}
.icon_16.icon_phone {
  background-image: url(../images/icons/dark/icon_16_phone.svg);
}
.icon_16.icon_dropdown {
  background-image: url(../images/icons/dark/icon_16_dropdown.svg);
}
.icon_16.icon_dropdown_line {
  background-image: url(../images/icons/dark/icon_16_dropdown_line.svg);
}
.icon_16.icon_google {
  background-image: url(../images/icons/dark/icon_24_google.svg);
}
.icon_16.icon_return {
  background-image: url(../images/icons/dark/icon_16_back.svg);
}
.icon_16.icon_entering {
  background-image: url(../images/icons/dark/icon_16_entering.svg);
}
.icon_16.icon_copy {
  background-image: url(../images/icons/dark/icon_16_copy.svg);
}
.icon_16.icon_trade {
  background-image: url(../images/icons/dark/icon_16_trade.svg);
}
.icon_16.icon_warning {
  background-image: url(../images/icons/dark/icon_16_warning.svg);
}
.icon_16.icon_wallet {
  background-image: url(../images/icons/dark/icon_16_wallet.svg);
}
.icon_16.icon_box {
  background-image: url(../images/icons/dark/icon_16_box.svg);
}
.icon_16.icon_download {
  background-image: url(../images/icons/dark/icon_16_download.svg);
}
.icon_16.icon_minus {
  background-image: url(../images/icons/dark/icon_16_minus.svg);
}
.icon_16.icon_plus {
  background-image: url(../images/icons/dark/icon_16_plus.svg);
}
.icon_chevron_up_yellow {
  background-image: url(../images/icons/dark/icon_16_chevron_yellow_up.svg);
}
:root[data-theme=light] .icon_chevron_up_yellow {
  background-image: url(../images/icons/light/icon_16_chevron_yellow_up.svg);
}
.icon_chevron_down_yellow {
  background-image: url(../images/icons/dark/icon_16_chevron_yellow_down.svg);
}
:root[data-theme=light] .icon_chevron_down_yellow {
  background-image: url(../images/icons/light/icon_16_chevron_yellow_down.svg);
}
.icon_24 {
  width: 1.5rem;
  height: 1.5rem;
}
.icon_24.icon_3dot {
  background-image: url(../images/icons/dark/icon_24_3dot.svg);
}
:root[data-theme=light] .icon_24.icon_3dot {
  background-image: url(../images/icons/light/icon_24_3dot.svg);
}
.icon_24.icon_language {
  background-image: url(../images/icons/dark/icon_24_language.svg);
}
.icon_24.icon_theme {
  background-image: url(../images/icons/dark/icon_24_whitemode.svg);
}
.icon_24.icon_wallet {
  background-image: url(../images/icons/dark/icon_24_wallet.svg);
}
.icon_24.icon_history {
  background-image: url(../images/icons/dark/icon_24_history.svg);
}
.icon_24.icon_profile {
  background-image: url(../images/icons/dark/icon_24_profile.svg);
}
.icon_24.icon_chevron_down {
  background-image: url(../images/icons/dark/icon_24_chevron_down.svg);
}
.icon_24.icon_filter {
  background-image: url(../images/icons/dark/icon_24_filter.svg);
}

.icon_24.icon_back {
  background-image: url(../images/icons/dark/icon_24_arrow_lean.svg);
}
.icon_24.icon_setting {
  background-image: url(../images/icons/dark/icon_24_setting.svg);
}
.icon_24.icon_setting2 {
  background-image: url(../images/icons/dark/icon_24_setting2.svg);
}
.icon_24.icon_pen {
  background-image: url(../images/icons/dark/icon_24_pen.svg);
}
.icon_24.icon_clear {
  background-image: url(../images/icons/dark/icon_24_cancel.svg);
}
.icon_24.icon_close {
  background-image: url(../images/icons/dark/icon_24_close.svg);
}
.icon_24.icon_copy {
  background-image: url(../images/icons/dark/icon_24_copy.svg);
}
.icon_24.icon_upload {
  background-image: url(../images/icons/dark/icon_24_upload.svg);
}
.icon_24.icon_questionmark {
  background-image: url(../images/icons/dark/icon_24_questionmark.svg);
}
.icon_calculator {
  background-image: url(../images/icons/dark/icon_24_calculator.svg);
}
.icon_24.icon_google {
  background-image: url(../images/icons/dark/icon_24_google.svg);
}
.icon_24.icon_favorite {
  background-image: url(../images/icons/dark/icon_24_favorite_off.svg);
}
.is-selected .icon_24.icon_favorite {
  background-image: url(../images/icons/dark/icon_24_favorite_on.svg);
}

.icon_24.icon_notice {
  background-image: url(../images/icons/dark/icon_24_notice.svg);
}
.icon_24.icon_option {
  background-image: url(../images/icons/dark/icon_24_option.svg);
}
.icon_24.icon_colorchange {
  background-image: url(../images/icons/dark/icon_24_colorchange.svg);
}
.icon_24.icon_colorchange--red {
  background-image: url(../images/icons/dark/icon_24_colorchange_red.svg);
}
.icon_24.icon_colorchange--green {
  background-image: url(../images/icons/dark/icon_24_colorchange_green.svg);
}
.icon_24.icon_switch {
  background-image: url(../images/icons/dark/icon_24_switch.svg);
}
.icon_24.icon_switch.hor {
  background-image: url(../images/icons/dark/icon_24_switch_hor.svg);
}
.icon_24.icon_switch.ver {
  background-image: url(../images/icons/dark/icon_24_switch_ver.svg);
}
.icon_24.icon_chart {
  background-image: url(../images/icons/dark/icon_24_chart.svg);
}
.icon_24.icon_menu {
  background-image: url(../images/icons/dark/icon_24_menu.svg);
}
.icon_24.icon_search {
  background-image: url(../images/icons/dark/icon_24_search.svg);
}
.icon_24.icon_search2 {
  background-image: url(../images/icons/dark/icon_24_search2.svg);
}
.icon_24.icon_trade {
  background-image: url(../images/icons/dark/icon_24_trade.svg);
}
.icon_24.icon_trade.yellow {
  background-image: url(../images/icons/dark/icon_24_trade_yellow.svg);
}
.icon_24.icon_filter {
  background-image: url(../images/icons/dark/icon_24_filter.svg);
}
.icon_24.icon_chargemoney {
  background-image: url(../images/icons/dark/icon_24_chargemoney.svg);
}
.icon_24.icon_sendmoney {
  background-image: url(../images/icons/dark/icon_24_sendmoney_2.svg);
}

.icon_24.icon_chevron_left {
  background-image: url(../images/icons/dark/icon_24_chevron_left.svg);
}
:root[data-theme=light] .icon_24.icon_chevron_left {
  background-image: url(../images/icons/light/icon_24_chevron_left.svg);
}
.icon_24.icon_chevron_right {
  background-image: url(../images/icons/dark/icon_24_chevron_right.svg);
}
:root[data-theme=light] .icon_24.icon_chevron_right {
  background-image: url(../images/icons/light/icon_24_chevron_right.svg);
}
.icon_24.icon_start {
  background-image: url(../images/icons/dark/icon_24_start.svg);
}
:root[data-theme=light] .icon_24.icon_start {
  background-image: url(../images/icons/light/icon_24_start.svg);
}
.icon_24.icon_end {
  background-image: url(../images/icons/dark/icon_24_end.svg);
}
:root[data-theme=light] .icon_24.icon_end {
  background-image: url(../images/icons/light/icon_24_end.svg);
}
.icon_24.icon_file {
  background-image: url(../images/icons/dark/icon_24_file.svg);
}
:root[data-theme=light] .icon_24.icon_file {
  background-image: url(../images/icons/light/icon_24_file.svg);
}
.icon_24.icon_clip {
  background-image: url(../images/icons/dark/icon_24_clip.svg);
}
:root[data-theme=light] .icon_24.icon_clip {
  background-image: url(../images/icons/light/icon_24_clip.svg);
}
.icon_24.icon_edit {
  background-image: url(../images/icons/dark/icon_24_line_edit.svg);
}
:root[data-theme=light] .icon_24.icon_edit {
  background-image: url(../images/icons/light/icon_24_line_edit.svg);
}
.icon_24.icon_help {
  background-image: url(../images/icons/dark/icon_24_help.svg);
}
:root[data-theme=light] .icon_24.icon_help {
  background-image: url(../images/icons/light/icon_24_help.svg);
}
.icon_24.icon_help_yellow {
  background-image: url(../images/icons/dark/icon_24_help_yellow.svg);
}
:root[data-theme=light] .icon_24.icon_help_yellow {
  background-image: url(../images/icons/light/icon_24_help_yellow.svg);
}
.icon_24.icon_upload_gray2 {
  background-image: url(../images/icons/dark/icon_24_upload_gray2.svg);
}
:root[data-theme=light] .icon_24.icon_upload_gray2 {
  background-image: url(../images/icons/light/icon_24_upload_gray2.svg);
}
.icon_24.icon_arrow_right {
  background-image: url(../images/icons/dark/icon_24_arrow_right.svg);
}
:root[data-theme=light] .icon_24.icon_arrow_right {
  background-image: url(../images/icons/light/icon_24_arrow_right.svg);
}
.icon_24.icon_file_photo {
  background-image: url(../images/icons/icon_24_file_photo.svg);
}

.icon_32 {
  width: 2rem;
  height: 2rem;
}
.icon_32.icon_phone {
  background-image: url(../images/icons/dark/icon_32_phone.svg);
}
.icon_32.icon_sendmoney {
  background-image: url(../images/icons/dark/icon_32_sendmoney.svg);
}
.icon_32.icon_trade {
  background-image: url(../images/icons/dark/icon_32_trade.svg);
}
.icon_32.icon_promotion {
  background-image: url(../images/icons/dark/icon_32_promotion.svg);
}
.icon_32.icon_security {
  background-image: url(../images/icons/dark/icon_32_security.svg);
}
.icon_32.icon_useractivity {
  background-image: url(../images/icons/dark/icon_32_useractivity.svg);
}
.icon_32.icon_invitation {
  background-image: url(../images/icons/dark/icon_32_invitation.svg);
}
.icon_32.icon_guidebook {
  background-image: url(../images/icons/dark/icon_32_guidebook.svg);
}
.icon_32.icon_speaker {
  background-image: url(../images/icons/dark/icon_32_speaker.svg);
}
.icon_32.icon_servicecenter {
  background-image: url(../images/icons/dark/icon_32_servicecenter.svg);
}
.icon_32.icon_notebook {
  background-image: url(../images/icons/dark/icon_32_notebook.svg);
}
.icon_32.icon_caution {
  background-image: url(../images/icons/dark/icon_32_warning.svg);
}
.icon_72 {
  width: 4.5rem;
  height: 4.5rem;
}
.icon_72.icon_regular {
  background-image: url(../images/icons/dark/img_member_regular.png);
}
.icon_72.icon_partner {
  background-image: url(../images/icons/dark/img_member_partner.png);
}
.icon_72.icon_influencer {
  background-image: url(../images/icons/dark/img_member_influencer.png);
}
.icon_80 {
  width: 5rem;
  height: 5rem;
}
.icon_80.icon_login {
  background-image: url(../images/icons/dark/icon_80_login.svg);
}
:root[data-theme=light] .icon_80.icon_login {
  background-image: url(../images/icons/light/icon_80_login.svg);
}
.icon_80.icon_nodata {
  background-image: url(../images/icons/dark/icon_80_nodata.svg);
}
:root[data-theme=light] .icon_80.icon_nodata {
  background-image: url(../images/icons/light/icon_80_nodata.svg);
}

.icon_128 {
  width: 8rem;
  height: 8rem;
}
.icon_128.icon_nodata {
  background-image: url(../images/icons/dark/icon_128_nodata.svg);
}

.icon_coin {
  background-image: url(../images/icons/dark/icon_24_coin.svg);
}
:root[data-theme=light] .icon_coin {
  background-image: url(../images/icons/light/icon_24_coin.svg);
}
.icon_coin.is-active {
  background-image: url(../images/icons/dark/icon_24_coin_on.svg);
}
:root[data-theme=light] .icon_coin.is-active {
  background-image: url(../images/icons/light/icon_24_coin_on.svg);
}

.icon_flag {
  overflow: hidden;
  border-radius: 0.5rem;
}
.is-checked .icon_check {
  background-image: url(../images/icons/dark/icon_24_check.svg);
}

.is-selected .icon_check {
  background-image: url(../images/icons/dark/icon_24_check.svg);
}

.is-checked.yellow .icon_check {
  background-image: url(../images/icons/dark/icon_24_check_yellow.svg);
}

.is-selected.yellow .icon_check {
  background-image: url(../images/icons/dark/icon_24_check_yellow.svg);
}

.is-checked.green .icon_check {
  background-image: url(../images/icons/dark/icon_24_check_green.svg);
}

.is-selected.green .icon_check {
  background-image: url(../images/icons/dark/icon_24_check_green.svg);
}

.input_check .icon_check {
  background-image: url(../images/icons/dark/icon_16_check.svg);
}

.input_check input:checked + .icon_check {
  background-image: url(../images/icons/dark/icon_24_check_yellow.svg);
}

.icon_checkbox {
  background-image: url(../images/icons/dark/icon_checkbox.svg);
}
.is-checked .icon_checkbox {
  background-image: url(../images/icons/dark/icon_checkbox_on.svg);
}

.icon_toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 3rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--gray-2, #29313d);
}
.is-active .icon_toggle {
  background: var(--gray_yellow, #C44525);
}
.is-active .icon_toggle::before {
  background: var(--edx_red, #ffffff);
  transform: translateX(1.5rem);
}

.icon_toggle::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--gray-5, #848b9c);
  transition: transform 0.3s;
}
.icon_add {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background: var(--gray-5, #848b9c) url(../images/icons/dark/icon_16_add.svg) no-repeat center center;
}
.icon_type_toggle, .icon_visible_toggle {
  background-image: url(../images/icons/dark/icon_24_hide.svg);
}
.is-show .icon_type_toggle, .is-show .icon_visible_toggle {
  background-image: url(../images/icons/dark/icon_16_show.svg);
}

.icon_logo_edx_small {
  background-image: url(../images/icons/dark/logo_edx_small.svg);
  background-size: 1.5625rem;
  background-color: var(--gray-2, #29313d);
  border-radius: 50%;
}
.is-active .icon_gnb.icon_home {
  background-image: url(../images/icons/dark/icon_gnb_home_on.svg);
}
.is-active .icon_gnb.icon_market {
  background-image: url(../images/icons/dark/icon_gnb_market_on.svg);
}
.is-active .icon_gnb.icon_trade {
  background-image: url(../images/icons/dark/icon_gnb_trade_on.svg);
}
.is-active .icon_gnb.icon_history {
  background-image: url(../images/icons/dark/icon_gnb_history_on.svg);
}
.is-active .icon_gnb.icon_wallet {
  background-image: url(../images/icons/dark/icon_gnb_wallet_on.svg);
}

.icon_gnb.icon_home {
  background-image: url(../images/icons/dark/icon_gnb_home.svg);
}
.icon_gnb.icon_market {
  background-image: url(../images/icons/dark/icon_gnb_market.svg);
}
.icon_gnb.icon_trade {
  background-image: url(../images/icons/dark/icon_gnb_trade.svg);
}
.icon_gnb.icon_history {
  background-image: url(../images/icons/dark/icon_gnb_history.svg);
}
.icon_gnb.icon_wallet {
  background-image: url(../images/icons/dark/icon_gnb_wallet.svg);
}
.icon.logo_edx_small {
  width: 2.4375rem;
  height: 2rem;
  background-image: url(../images/logo/dark/logo_edx_small.svg);
  background-size: contain;
}
.icon.icon_drag_handler {
  width: 3rem;
  height: 0.25rem;
  border-radius: 0.25rem;
  background: var(--gray-3, #2e3744);
}

:root[data-theme=light] .icon {
  display: inline-block;
  flex: 0 0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
:root[data-theme=light] .icon_8 {
  width: 0.5rem;
  height: 0.5rem;
}
:root[data-theme=light] .icon_8.icon_minus {
  background-image: url(../images/icons/light/icon_8_minus.svg);
}
:root[data-theme=light] .icon_8.icon_plus {
  background-image: url(../images/icons/light/icon_8_plus.svg);
}
:root[data-theme=light] .icon_8.icon_dropdown {
  background-image: url(../images/icons/light/icon_8_dropdown.svg);
}
:root[data-theme=light] .icon_8.icon_dropdown_line {
  background-image: url(../images/icons/light/icon_8_dropdown_line.svg);
}
:root[data-theme=light] .icon_16 {
  width: 1rem;
  height: 1rem;
}
:root[data-theme=light] .icon_16.icon_check {
  background-image: url(../images/icons/light/icon_16_check_white.svg);
}
:root[data-theme=light] .icon_16.icon_check.yellow {
  background-image: url(../images/icons/light/icon_16_check_yellow.svg);
}
:root[data-theme=light] .icon_16.icon_check.green {
  background-image: url(../images/icons/light/icon_16_check_green.svg);
}
:root[data-theme=light] .icon_16.icon_logout {
  background-image: url(../images/icons/light/icon_16_logout.svg);
}
:root[data-theme=light] .icon_16.icon_mail {
  background-image: url(../images/icons/light/icon_16_mail.svg);
}
:root[data-theme=light] .icon_16.icon_user {
  background-image: url(../images/icons/light/icon_16_user.svg);
}
:root[data-theme=light] .icon_16.icon_phone {
  background-image: url(../images/icons/light/icon_16_phone.svg);
}
:root[data-theme=light] .icon_16.icon_dropdown {
  background-image: url(../images/icons/light/icon_16_dropdown.svg);
}
:root[data-theme=light] .icon_16.icon_dropdown_line {
  background-image: url(../images/icons/light/icon_16_dropdown_line.svg);
}
:root[data-theme=light] .icon_16.icon_return {
  background-image: url(../images/icons/light/icon_16_back.svg);
}
:root[data-theme=light] .icon_16.icon_entering {
  background-image: url(../images/icons/light/icon_16_entering.svg);
}
:root[data-theme=light] .icon_16.icon_copy {
  background-image: url(../images/icons/light/icon_16_copy.svg);
}
:root[data-theme=light] .icon_16.icon_trade {
  background-image: url(../images/icons/light/icon_16_trade.svg);
}
:root[data-theme=light] .icon_16.icon_warning {
  background-image: url(../images/icons/light/icon_16_warning.svg);
}
:root[data-theme=light] .icon_16.icon_wallet {
  background-image: url(../images/icons/light/icon_16_wallet.svg);
}
:root[data-theme=light] .icon_16.icon_box {
  background-image: url(../images/icons/light/icon_16_box.svg);
}
:root[data-theme=light] .icon_16.icon_download {
  background-image: url(../images/icons/light/icon_16_download.png);
}
:root[data-theme=light] .icon_16.icon_minus {
  background-image: url(../images/icons/light/icon_16_minus.svg);
}
:root[data-theme=light] .icon_16.icon_plus {
  background-image: url(../images/icons/light/icon_16_plus.svg);
}
:root[data-theme=light] .icon_24 {
  width: 1.5rem;
  height: 1.5rem;
}
:root[data-theme=light] .icon_24.icon_language {
  background-image: url(../images/icons/light/icon_24_language.svg);
}
:root[data-theme=light] .icon_24.icon_theme {
  background-image: url(../images/icons/light/icon_24_darkmode.svg);
}
:root[data-theme=light] .icon_24.icon_wallet {
  background-image: url(../images/icons/light/icon_24_wallet.svg);
}
:root[data-theme=light] .icon_24.icon_history {
  background-image: url(../images/icons/light/icon_24_history.svg);
}
:root[data-theme=light] .icon_24.icon_profile {
  background-image: url(../images/icons/light/icon_24_profile.svg);
}
:root[data-theme=light] .icon_24.icon_chevron_down {
  background-image: url(../images/icons/light/icon_24_chevron_down.svg);
}
:root[data-theme=light].icon_24.icon_filter {
  background-image: url(../images/icons/light/icon_24_filter.svg);
}

:root[data-theme=light] .icon_24.icon_back {
  background-image: url(../images/icons/light/icon_24_arrow_lean.svg);
}
:root[data-theme=light] .icon_24.icon_setting {
  background-image: url(../images/icons/light/icon_24_setting.svg);
}
:root[data-theme=light] .icon_24.icon_setting2 {
  background-image: url(../images/icons/light/icon_24_setting2.svg);
}
:root[data-theme=light] .icon_24.icon_pen {
  background-image: url(../images/icons/light/icon_24_pen.svg);
}
:root[data-theme=light] .icon_24.icon_clear {
  background-image: url(../images/icons/light/icon_24_cancel.svg);
}
:root[data-theme=light] .icon_24.icon_close {
  background-image: url(../images/icons/light/icon_24_close.svg);
}
:root[data-theme=light] .icon_24.icon_copy {
  background-image: url(../images/icons/light/icon_24_copy.svg);
}
:root[data-theme=light] .icon_24.icon_upload {
  background-image: url(../images/icons/light/icon_24_upload.svg);
}
:root[data-theme=light] .icon_24.icon_questionmark {
  background-image: url(../images/icons/light/icon_24_questionmark.svg);
}
:root[data-theme=light] .icon_calculator {
  background-image: url(../images/icons/light/icon_24_calculator.svg);
}
:root[data-theme=light] .icon_24.icon_google {
  background-image: url(../images/icons/light/icon_24_google.svg);
}
:root[data-theme=light] .icon_24.icon_favorite {
  background-image: url(../images/icons/light/icon_24_favorite_off.svg);
}
.is-selected :root[data-theme=light] .icon_24.icon_favorite {
  background-image: url(../images/icons/light/icon_24_favorite_on.svg);
}

:root[data-theme=light] .icon_24.icon_notice {
  background-image: url(../images/icons/light/icon_24_notice.svg);
}
:root[data-theme=light] .icon_24.icon_option {
  background-image: url(../images/icons/light/icon_24_option.svg);
}
:root[data-theme=light] .icon_24.icon_colorchange {
  background-image: url(../images/icons/light/icon_24_colorchange.svg);
}
:root[data-theme=light] .icon_24.icon_colorchange--red {
  background-image: url(../images/icons/light/icon_24_colorchange_B.svg);
}
:root[data-theme=light] .icon_24.icon_colorchange--green {
  background-image: url(../images/icons/light/icon_24_colorchange_S.svg);
}
:root[data-theme=light] .icon_24.icon_switch {
  background-image: url(../images/icons/light/icon_24_switch.svg);
}
:root[data-theme=light] .icon_24.icon_switch.hor {
  background-image: url(../images/icons/light/icon_24_switch_hor.svg);
}
:root[data-theme=light] .icon_24.icon_switch.ver {
  background-image: url(../images/icons/light/icon_24_switch_ver.svg);
}
:root[data-theme=light] .icon_24.icon_chart {
  background-image: url(../images/icons/light/icon_24_chart.svg);
}
:root[data-theme=light] .icon_24.icon_menu {
  background-image: url(../images/icons/light/icon_24_menu.svg);
}
:root[data-theme=light] .icon_24.icon_search {
  background-image: url(../images/icons/light/icon_24_search.svg);
}
:root[data-theme=light] .icon_24.icon_search2 {
  background-image: url(../images/icons/light/icon_24_search2.svg);
}
:root[data-theme=light] .icon_24.icon_trade {
  background-image: url(../images/icons/light/icon_24_trade.svg);
}
:root[data-theme=light] .icon_24.icon_trade.yellow {
  background-image: url(../images/icons/light/icon_24_trade_yellow.svg);
}
:root[data-theme=light] .icon_24.icon_filter {
  background-image: url(../images/icons/light/icon_24_filter.svg);
}
:root[data-theme=light] .icon_24.icon_chargemoney {
  background-image: url(../images/icons/light/icon_24_chargemoney.svg);
}
:root[data-theme=light] .icon_24.icon_sendmoney {
  background-image: url(../images/icons/light/icon_24_sendmoney_2.svg);
}
:root[data-theme=light] .icon_32 {
  width: 2rem;
  height: 2rem;
}
:root[data-theme=light] .icon_32.icon_phone {
  background-image: url(../images/icons/light/icon_32_phone.svg);
}
:root[data-theme=light] .icon_32.icon_sendmoney {
  background-image: url(../images/icons/light/icon_32_sendmoney.svg);
}
:root[data-theme=light] .icon_32.icon_trade {
  background-image: url(../images/icons/light/icon_32_trade.svg);
}
:root[data-theme=light] .icon_32.icon_promotion {
  background-image: url(../images/icons/light/icon_32_promotion.svg);
}
:root[data-theme=light] .icon_32.icon_security {
  background-image: url(../images/icons/light/icon_32_security.svg);
}
:root[data-theme=light] .icon_32.icon_useractivity {
  background-image: url(../images/icons/light/icon_32_useractivity.svg);
}
:root[data-theme=light] .icon_32.icon_invitation {
  background-image: url(../images/icons/light/icon_32_invitation.svg);
}
:root[data-theme=light] .icon_32.icon_guidebook {
  background-image: url(../images/icons/light/icon_32_guidebook.svg);
}
:root[data-theme=light] .icon_32.icon_speaker {
  background-image: url(../images/icons/light/icon_32_speaker.svg);
}
:root[data-theme=light] .icon_32.icon_servicecenter {
  background-image: url(../images/icons/light/icon_32_servicecenter.svg);
}
:root[data-theme=light] .icon_32.icon_notebook {
  background-image: url(../images/icons/light/icon_32_notebook.svg);
}
:root[data-theme=light] .icon_32.icon_caution {
  background-image: url(../images/icons/light/icon_32_warning.svg);
}
:root[data-theme=light] .icon_72 {
  width: 4.5rem;
  height: 4.5rem;
}
:root[data-theme=light] .icon_72.icon_regular {
  background-image: url(../images/icons/light/img_member_regular.png);
}
:root[data-theme=light] .icon_72.icon_partner {
  background-image: url(../images/icons/light/img_member_partner.png);
}
:root[data-theme=light] .icon_72.icon_influencer {
  background-image: url(../images/icons/light/img_member_influencer.png);
}
:root[data-theme=light] .icon_128 {
  width: 8rem;
  height: 8rem;
}
:root[data-theme=light] .icon_128.icon_nodata {
  background-image: url(../images/icons/light/icon_128_nodata.svg);
}
:root[data-theme=light] .icon_flag {
  overflow: hidden;
  border-radius: 0.5rem;
}
.is-selected :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check.svg);
}

.is-checked :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check.svg);
}

.is-checked.yellow :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check_yellow.svg);
}

.is-selected.yellow :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check_yellow.svg);
}

.is-checked.green :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check_green.svg);
}

.is-selected.green :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check_green.svg);
}

.input_check :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_16_check.svg);
}

.input_check input:checked + :root[data-theme=light] .icon_check {
  background-image: url(../images/icons/light/icon_24_check_yellow.svg);
}

:root[data-theme=light] .icon_checkbox {
  background-image: url(../images/icons/light/icon_checkbox.svg);
}
:root[data-theme=light] .icon_checkbox.is-checked {
  background-image: url(../images/icons/light/icon_checkbox_on.svg) !important;
}
:root[data-theme=light] .icon_toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 3rem;
  height: 1.5rem;
  padding: 0.25rem;
  border-radius: 12px;
  background: var(--gray-2, #29313d);
}
.is-active :root[data-theme=light] .icon_toggle {
  background: var(--gray_yellow, #C44525);
}
.is-active :root[data-theme=light] .icon_toggle::before {
  background: var(--edx_red, #ffffff);
  transform: translateX(1.5rem);
}

:root[data-theme=light] .icon_toggle::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--gray-5, #848b9c);
  transition: transform 0.3s;
}
:root[data-theme=light] .icon_add {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  background: var(--gray-5, #848b9c) url(../images/icons/light/icon_16_add.svg) no-repeat center center;
}
:root[data-theme=light] .icon_type_toggle, :root[data-theme=light] .icon_visible_toggle {
  background-image: url(../images/icons/light/icon_24_hide.svg);
}
.is-show :root[data-theme=light] .icon_type_toggle, .is-show :root[data-theme=light] .icon_visible_toggle {
  background-image: url(../images/icons/light/icon_16_show.svg);
}

:root[data-theme=light] .icon_logo_edx_small {
  background-image: url(../images/logo/light/logo_edx_small.svg);
  background-size: 1.5625rem;
  background-color: var(--gray-2, #29313d);
  border-radius: 50%;
}
.is-active :root[data-theme=light] .icon_gnb.icon_home {
  background-image: url(../images/icons/light/icon_gnb_home_on.svg);
}
.is-active :root[data-theme=light] .icon_gnb.icon_market {
  background-image: url(../images/icons/light/icon_gnb_market_on.svg);
}
.is-active :root[data-theme=light] .icon_gnb.icon_trade {
  background-image: url(../images/icons/light/icon_gnb_trade_on.svg);
}
.is-active :root[data-theme=light] .icon_gnb.icon_history {
  background-image: url(../images/icons/light/icon_gnb_history_on.svg);
}
.is-active :root[data-theme=light] .icon_gnb.icon_wallet {
  background-image: url(../images/icons/light/icon_gnb_wallet_on.svg);
}

:root[data-theme=light] .icon_gnb.icon_home {
  background-image: url(../images/icons/light/icon_gnb_home.svg);
}
:root[data-theme=light] .icon_gnb.icon_market {
  background-image: url(../images/icons/light/icon_gnb_market.svg);
}
:root[data-theme=light] .icon_gnb.icon_trade {
  background-image: url(../images/icons/light/icon_gnb_trade.svg);
}
:root[data-theme=light] .icon_gnb.icon_history {
  background-image: url(../images/icons/light/icon_gnb_history.svg);
}
:root[data-theme=light] .icon_gnb.icon_wallet {
  background-image: url(../images/icons/light/icon_gnb_wallet.svg);
}
:root[data-theme=light] .icon.logo_edx_small {
  width: 2.4375rem;
  height: 2rem;
  background-image: url(../images/icons/light/logo_edx_small.svg);
  background-size: contain;
}
:root[data-theme=light] .icon.icon_drag_handler {
  width: 3rem;
  height: 0.25rem;
  border-radius: 0.25rem;
  background: var(--gray-3, #2e3744);
}
:root[data-theme=light] .is-selected .icon_check {
  background-image: url(../images/icons/light/icon_24_check.svg);
}
:root[data-theme=light] .is-checked .icon_check {
  background-image: url(../images/icons/light/icon_24_check.svg);
}
:root[data-theme=light] .is-checked.yellow .icon_check {
  background-image: url(../images/icons/light/icon_24_check_yellow.svg);
}
:root[data-theme=light] .is-selected.yellow .icon_check {
  background-image: url(../images/icons/light/icon_24_check_yellow.svg);
}
:root[data-theme=light] .is-checked.green .icon_check {
  background-image: url(../images/icons/light/icon_24_check_green.svg);
}
:root[data-theme=light] .is-selected.green .icon_check {
  background-image: url(../images/icons/light/icon_24_check_green.svg);
}
:root[data-theme=light] .input_check .icon_check {
  background-image: url(../images/icons/light/icon_16_check.svg);
}
:root[data-theme=light] .input_check input:checked + .icon_check {
  background-image: url(../images/icons/light/icon_24_check_yellow.svg);
}
:root[data-theme=light] .is-checked .icon_checkbox {
  background-image: url(../images/icons/light/icon_checkbox_on.svg);
}
:root[data-theme=light] .is-active .icon_toggle {
  background: var(--gray_yellow, #C44525);
}
:root[data-theme=light] .is-active .icon_toggle::before {
  background: var(--edx_red, #ffffff);
  transform: translateX(1.5rem);
}
:root[data-theme=light] .is-show .icon_type_toggle,
:root[data-theme=light] .is-show .icon_visible_toggle {
  background-image: url(../images/icons/light/icon_16_show.svg);
}
:root[data-theme=light] .is-active .icon_gnb.icon_home {
  background-image: url(../images/icons/light/icon_gnb_home_on.svg);
}
:root[data-theme=light] .is-active .icon_gnb.icon_market {
  background-image: url(../images/icons/light/icon_gnb_market_on.svg);
}
:root[data-theme=light] .is-active .icon_gnb.icon_trade {
  background-image: url(../images/icons/light/icon_gnb_trade_on.svg);
}
:root[data-theme=light] .is-active .icon_gnb.icon_history {
  background-image: url(../images/icons/light/icon_gnb_history_on.svg);
}
:root[data-theme=light] .is-active .icon_gnb.icon_wallet {
  background-image: url(../images/icons/light/icon_gnb_wallet_on.svg);
}
:root[data-theme=light] .is-selected .icon_favorite {
  background-image: url(../images/icons/light/icon_24_favorite_on.svg);
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 3.5rem;
  min-height: (100vh - 3.5rem);
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-bottom);
}

.header {
  z-index: 9;
  display: flex;
}
.home .header {
  flex: 0 0 auto;
  align-items: center;
  height: 3rem;
}

.header.default {
  gap: 0.25rem;
  padding: 0.375rem 1rem;
}
.header.bordered {
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.header.market {
  gap: 0.25rem;
  height: 3.125rem;
  padding: 0.375rem 1rem;
  border-bottom: 1px solid #303134;
}
.header.market .header_title {
  display: flex;
  flex-direction: column;
}
.header.market .header_title h1 {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}
.header.market .header_title em {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.6; /* 160% */
  text-align: center;
}
.header_left {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  align-items: center;
  min-width: 1.5rem;
}
.header_title {
  flex: 1 1 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5rem; /* 150% */
  text-align: center;
}
.home .header_title {
  text-align: left;
}

.header_right {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  align-items: center;
  min-width: 1.5rem;
}
.header button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
}

.form_set {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.form_set .group {
  display: grid;
  grid-template-columns: calc(50% - 0.5rem) calc(50% - 0.5rem);
  gap: 0.5rem;
}

.join_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.join_form .btn_txt_group {
  gap: 1rem;
  margin-top: 2.5rem;
}

.bottom_btns {
  display: flex;
  padding: 0 1rem 1rem;
}
.bottom_btns.bordered {
  padding-top: 1rem;
  border-top: 1px solid rgba(172, 179, 187, 0.2);
}
.bottom_btns .btns {
  display: flex;
  flex: 1 0 0;
  gap: 1rem;
}
.bottom_btns .btns button {
  flex: 1 0 0;
}

.page_tab {
  top: 0;
  flex: 0 0 auto;
  margin-bottom: 1.5rem;
}

.splash {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.splash_logo {
  width: 20rem;
  height: 12.5rem;
  background: url(../images/logo/dark/popup_splash.svg) no-repeat center/contain;
}
[data-theme=light] .splash_logo {
  background: url(../images/logo/light/popup_splash.svg) no-repeat center/contain;
}

.splash_text {
  color: var(--white, #ffffff);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}

.home .header_title {
  width: 5.625rem;
  height: 1rem;
  background: url(../images/icons/dark/logo_edx_header.svg) no-repeat left/contain;
  margin-right: auto;
  flex: 0 0 auto;
}
[data-theme=light] .home .header_title {
  background-image: url(../images/icons/light/logo_edx_header.svg);
}

/* **************** main mdfy *********************/
/* 기본(다크) */
:root{
  --home-bg: url("/assets/pc/images/home/dark/home_section_bg.png");
  --home-phone: url("/assets/pc/images/home/dark/iphone.png");

  --home-bg-color: #06070a;

  /* 피그마 텍스트 색상 */
  --text_primary: #F5F8FE;

  /* 피그마 border */
  --section_border: #1F232C;

  --home-glow: radial-gradient(900px 500px at 70% 55%, rgba(255,120,0,.35), rgba(0,0,0,0) 75%);
}

html[data-theme="light"]{
   
  --home-bg-color: #f6f7fb;

  /* 라이트에서 텍스트가 동일 토큰을 쓰면 너무 밝을 수 있어 실제 라이트 토큰이 있으면 교체 */
  --text_primary: #0b0c10;

  --home-glow: radial-gradient(900px 500px at 70% 55%, rgba(255,120,0,.10), rgba(0,0,0,0) 60%);
}


/* 라이트 */
html[data-theme="light"] .main-info0-container{
  position: relative;
  overflow: hidden;
  background-color: #FBFAF8;
}

/* ✅ 배경 이미지를 pseudo로 깔고 filter 적용 */
html[data-theme="light"] .main-info0-container::after{
  content:"";
  position:absolute;
  inset:0; 

  /* 여기서 핑크톤으로 “변환” */
  filter: hue-rotate(310deg) saturate(1.25) brightness(1.08);
  opacity: .55;                /* 너무 세면 0.4~0.7 조절 */
  pointer-events:none;
}

/* ✅ 핑크 광원 */
html[data-theme="light"] .main-info0-container::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(900px 560px at 62% 46%, rgba(255, 170, 200, .35), rgba(0,0,0,0) 75%),
    linear-gradient(0deg, rgba(255, 235, 245, .20), rgba(255, 235, 245, .20));
}

/* 컨텐츠 위로 */
html[data-theme="light"] .main-info0-container > *{
  position: relative;
  z-index: 1;
}


.desc .accent{
  background: linear-gradient(150deg, #C97B3A 0%, #E6B07A 50%, #B46A3B 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;            
  -webkit-text-fill-color: transparent;
}

html[data-theme="light"] .desc .accent{
  background: linear-gradient(150deg, #C97B3A 0%, #E6B07A 50%, #B46A3B 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;            
  -webkit-text-fill-color: transparent;
}

.main-info0-container{
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 800px;

  background-color: var(--home-bg-color);
  background-image: var(--home-glow), var(--home-bg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 65% 50%;
}

.main-info0-container .sections{
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 0 60px;
  min-height: 800px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

/* 로고 영역 필요 없으면 숨김 */
.logo-section{
  display: none;
}

/* ===== Text ===== */

.description-section{
  flex: 0 0 800px;
  max-width: 800px;
}

.description-section h1{
  margin: 0 0 0px 0;

  font-family: Pretendard, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0;

  color: var(--text_primary);
}

.description-section .desc{
  margin: 0;
  margin-top: 0px;

  font-family: Pretendard, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -0.018em;

  color: var(--text_primary);

  white-space: pre-line;
}

/* ===== Visual ===== */

.visual-section{
  flex: 0 0 620px;
  margin-left:-50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.home_phone{
  width: 620px;        
  height: auto;       
  display: block;
  
}

.home_phone{
  content: url("/assets/pc/images/home/dark/iphone.png");
}

html[data-theme="light"] .home_phone{
  content: url("/assets/pc/images/home/light/iphone.png");
}
/* **************** main mdfy *********************/

.home.content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  padding-bottom: 1rem;
}
.home section ~ section {
  margin-top: 0;
}
.home .main_top_visual {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
}
.main_top_image {
  display: flex;
  width: 100%;
  height: 54rem !important; 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../images/home/dark/bg.svg); 
}
:root[data-theme=light] .main_top_image {
  background-image: url(../images/home/light/bg.svg);
}

/* .home .main_top_image .flex.flex_col{
  transform: translateY(-150px);
} */
 
.main_top_image .thin {
  font-family: Pretendard;
  font-weight: 600;
  font-style: SemiBold;
  font-size: 20px; 
  line-height: 100%;
  letter-spacing: 0px;
  text-align: left;
  vertical-align: middle;
  color:#D9DDE5;
}
.main_top_image button {
  width: 12.5rem;
  height: 2.5rem;
}
.home .main_top_visual .main_top_visual_slider .swiper-wrapper .swiper-slide {
  height: 45vw;
}
.home .main_top_visual .main_top_visual_slider .swiper-wrapper img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.home .main_top_visual .main_top_visual_slider .swiper-pagination-bullet-active {
  background-color: var(--edx_red, #C44525);
}
.home .notice {
  display: flex;
  flex-direction: row;
  gap: 4px;
  align-items: center;
  align-self: stretch;
  height: 2.5rem;
  margin: 0px 1rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
}
.home .notice_title {
  display: block;
  flex: 1 0 0;
  overflow: hidden;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home .notice_list_slider {
  flex: 1 0 0;
  align-self: stretch;
  overflow: hidden;
}
.home .notice_list_slider .swiper-wrapper .swiper-slide {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.home .notice_list_slider .swiper-wrapper .swiper-slide a {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  overflow: hidden;
}
.home .mission_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: stretch;
  margin: 0 1rem;
}
.home .mission_grid .mission_card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 7rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 0.25rem;
}
.home .mission_grid .mission_card .mission_title {
  padding: 1rem;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  word-break: keep-all;
}
.home .mission_grid .mission_card button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 1.75rem;
  padding: 0.4375rem 0 0.4375rem 0;
  margin-top: auto;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
}
.home .mission_grid .mission_card button:disabled {
  border: 1px solid var(--gray-4, #555c6e);
  border-radius: 4px;
  background: var(--gray-2, #29313d);
}
.home .mission_grid .mission_card button span {
  font-weight: 600;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
  text-align: center;
}

.promotion {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.promotion .top_visual {
  overflow: hidden;
  height: auto;
}
.promotion .top_visual img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0.5rem;
}
.promotion .reward h3 {
  font-size: 0.75rem;
}
.promotion .reward p {
  font-size: 0.875rem;
}
.promotion .reward.box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
}
.promotion .reward_list {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.promotion .reward_list h3 {
  height: 2rem;
  color: var(--edx_red, #C44525);
  text-align: center;
}
.promotion .reward_list_item {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.promotion .reward_list_item.step1 .step::before {
  top: 50%;
  height: 50%;
  transform: translate(-50%, -100%);
}
.promotion .reward_list_item.clear .step::before {
  background: var(--edx_red, #C44525);
}
.promotion .reward_list_item.clear .step .dot_clear {
  border: 1px solid var(--edx_red, #C44525);
  background: var(--edx_red, #C44525);
}
.promotion .reward_list_item.rtl {
  flex-direction: row-reverse;
}
.promotion .reward_list_item .mission {
  display: flex;
  flex: 1 0 0;
  flex: 1 0 0;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  padding: 8px 0px;
}
.promotion .reward_list_item .mission_title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
}
.promotion .reward_list_item .mission_title p {
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.promotion .reward_list_item .mission_title h4 {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.promotion .reward_list_item .mission .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem;
  border-radius: 0.5rem;
}
.promotion .reward_list_item .step {
  position: relative;
  flex: 0 0 2rem;
}
.promotion .reward_list_item .step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1px;
  height: 100%;
  background: var(--gray-2, #29313d);
  transform: translate(-50%, -50%);
}
.promotion .reward_list_item .step .dot_clear {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 0.125rem;
  background: var(--gray-2, #29313d);
  transform: translate(-50%, -50%) rotate(45deg);
}
.promotion .reward_list_item .info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.promotion .reward_list_item .info_txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  word-break: keep-all;
}
.promotion .reward_list_item .info_txt strong {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
}
.promotion_terms {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
}
.promotion_terms h3 {
  text-align: center;
}
.promotion_terms .terms_area {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  /* pretendard/body_s */
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.promotion_terms .terms_area .list {
  gap: 0;
}
.promotion_terms .terms_area .list_item {
  gap: 0.25em;
  font-size: 0.75rem;
  line-height: inherit;
  font-feature-settings: "clig" off, "liga" off, "tnum";
}

.invite article {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.invite h3 {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
  text-align: center;
}
.invite .record {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--gray-3, #333b47);
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.invite .invite_code {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-bottom: 1px solid var(--gray-3, #333b47);
  border-radius: 16px;
}
.invite .rate {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1rem 0.5rem;
}
.invite .rate_area {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  align-items: stretch;
  align-self: stretch;
  border-radius: 0.5rem;
}
.invite .rate_area hr {
  width: 1px;
  height: auto;
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
  border: 0;
  background: var(--gray-3, #333b47);
}
.invite .rate h4 {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}
.invite .rate p {
  color: var(--edx_red, #C44525);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}

.board {
  gap: 1rem;
}
.board .page_title {
  gap: 0.5rem;
  margin-bottom: 0;
}
.board_list {
  display: flex;
  flex-direction: column;
}
.board_list_item {
  border-top: 1px solid var(--gray-3, #333b47);
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.board_list_link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.board_list_title {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.board_list_date {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333; /* 133.333% */
}
.board_detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.board_detail_content {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.board_detail_content .list {
  gap: 0;
}
.board_detail_content .board_img {
  overflow: hidden;
  border-radius: 0.5rem;
  background: var(--white, #fff);
}
.board_detail_content img {
  max-width: 100%;
}
.board_detail_sub_content {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}

.faq {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.faq > h3 {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
}

.side .user_info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.side .user_info .info_title {
  display: flex;
  gap: 0.25rem;
  align-items: flex-end;
  align-self: stretch;
}
.side .user_info .info_title span {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
  text-align: center;
}
.side .user_info .info_title span .user_name {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
  text-align: center;
}
.side .user_info .info_desc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
}
.side .user_info .info_desc.no_bg i {
  background-color: transparent;
}
.side .user_info .info_desc_item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.side .user_info .info_desc_item i {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 12px;
  background-color: var(--gray-2, #29313d);
  background-size: 1rem;
}
.side .user_info .info_desc_item i.icon_copy {
  background-size: 1.5rem;
}
.side .user_info .info_desc_item span {
  flex: 1 0 0;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.side .user_asset {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  padding: 1rem 0px;
}
.side .user_asset h3 {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.side .user_asset .assets {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  align-self: stretch;
}
.side .user_asset .asset_btc {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
}
.side .user_asset .asset_btc span {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
}
.side .user_asset .asset_usdt {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  letter-spacing: -0.42px;
}
.side_home_menu {
  padding-bottom: 2.1875rem;
}
.side_home_menu .menu_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.side_home_menu .menu_list_item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.side_home_menu .menu_list_item .btn_menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  padding: 1rem 0.5rem;
  border-radius: 0.5rem;
  background: var(--gray-2, #29313d);
}
.side_home_menu .menu_list_item .btn_menu span {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.side .member_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}
.side .member_info h3 {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
}
.side .member_info .member_card {
  display: flex;
  gap: 1rem;
  align-items: center;
  align-self: stretch;
  padding: 1rem 0rem;
}
.side .member_info .member_card_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6.5rem;
  height: 4.5rem;
  padding: 0rem 1rem;
}
.side .member_info .member_card_img img {
  border-radius: 50%;
}
.side .member_info .member_card_img img.regular {
  box-shadow: inset 0 0 2px 2px var(--gray-5, #848b9c);
}
.side .member_info .member_card .member_card_info {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
}
.side .member_info .member_card .member_card_info h4 {
  color: var(--edx_red, #C44525);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.side .member_info .member_card .member_card_info dl {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.side .member_info .member_card .member_card_info dl div {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.125rem;
  align-items: flex-start;
}
.side .member_info .member_card .member_card_info dl dt {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.side .member_info .member_card .member_card_info dl dd {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.side .list_section {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.side .popular_list {
  flex-shrink: 0;
}
.side .popular_list .list {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  overflow-x: auto;
}
.side .popular_list .list::-webkit-scrollbar {
  display: none;
}
.side .popular_list .list .list_item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
}
.side .popular_list .list .list_item .list_item_image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 11.5rem;
  height: 6.5rem;
  border-radius: 0.5rem;
  background: var(--white, #fff);
}
.side .popular_list .list .list_item .list_item_image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.side .popular_list .list .list_item .list_item_title {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.side .popular_list + .total_list {
  margin-top: 2rem;
}
.side .total_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.side .total_list .list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.side .total_list .list .list-item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem 0rem;
}
.side .total_list .list .list-item .list_item_text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
}
.side .total_list .list .list-item .list_item_text .list_item_title {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.side .total_list .list .list-item .list_item_text .list_item_date {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
}
.side .total_list .list .list-item .list_item_image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 6.5rem;
  height: 3.625rem;
  border-radius: 0.25rem;
  background: var(--white, #fff);
}
.side .total_list .list .list-item .list_item_image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.side.activity_log {
  padding: 0;
}
.side.activity_log .list {
  gap: 0;
}
.side.activity_log .list_item:first-child {
  border-top: 0;
}
.side.activity_log .btns_group {
  padding: 40px 1rem;
}

.trade.content {
  padding: 0;
}
.trade.content section {
  margin: 0;
}
.trade.content section ~ .inline_tabs {
  margin-top: 3rem;
}
.trade .title_brand {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  align-self: stretch;
  padding: 0rem 1rem;
}
.trade .title_brand .container {
  display: flex;
  flex: 1 0 0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.5rem 0 0.5rem 0;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.trade .title_brand .container .title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.trade .title_brand .container .title .title_info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.trade .title_brand .container .title h2 {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--white, #fff);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.trade .title_brand .container .title h2 em {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  padding: 0.125rem 0.25rem;
  border-radius: 0.125rem;
  background: var(--gray_red, #3c2125);
  color: var(--red, #f6465d);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}
.trade .title_brand .container .title h2 em.bg_color--gray_green {
  background: var(--gray_green, #233e33);
}
.trade .title_brand .container .title h2 em.bg_color--gray_red {
  background: var(--gray_red, #3c2125);
}
.trade .title_brand .container .title .type {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}
.trade .title_brand .container .option {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}
.trade .trade_top_area {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
  align-self: stretch;
  padding: 1rem;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.trade .trade_top_area .trade_top_area_left {
  display: flex;
  flex: 0 0 12.5rem;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  max-width: 12.5rem;
}
.trade .trade_top_area .trade_top_area_right {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.trade .trade_options {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
  align-self: stretch;
}
.trade .trade_options button {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: stretch;
  height: auto;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
}
.trade .trade_options button span {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.trade .trade_options button span.value {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.trade .trade_options button span.value em {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.trade .usable_asset {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 1.75rem;
  padding: 0.25rem 0px;
}
.trade .usable_asset .txt_list.data {
  display: flex;
  flex: 1 0 0;
  gap: 0.25rem;
  align-items: center;
}
.trade .usable_asset .txt_list.data .data_title {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.625rem;
  line-height: normal;
  text-align: center;
}
.trade .usable_asset .txt_list.data .data_value {
  flex: 1 0 0;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  line-height: 1rem;
  text-align: right;
}
.trade .usable_asset .txt_list.data .data_unit {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.6; /* 160% */
  text-align: center;
}
/*.trade .selection_percentage {
  align-self: stretch;
  padding-top: 1rem;
  padding-bottom: 2rem;
}
.trade .selection_percentage .range_slider.range {
  margin-right: 1rem;
  margin-left: 1rem;
}*/
.trade .trade_order {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-self: stretch;
}
.trade .trade_order .btn_trade {
  height: 2rem;
  border: 1px solid var(--gray-3, #2e3744);
  border-radius: 0.25rem;
}
.trade .trade_order .btn_trade span {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
  text-align: center;
}
.trade .trade_action {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: stretch;
}
.trade .trade_action .open_position {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.trade .trade_action .open_position .txt_list.data.type_2 {
  align-items: center;
}
.trade .trade_action .open_position .txt_list.data.type_2 .data_title {
  flex: 0 0 2.625rem;
  width: 2.625rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.625rem;
  line-height: normal;
  line-height: 1rem;
}
.trade .trade_action .open_position .txt_list.data.type_2 .data_value {
  font-size: 0.75rem;
  line-height: 1rem;
}
.trade .trade_action .open_position .txt_list.data.type_2 .data_unit {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-size: 0.625rem;
  line-height: 1rem;
}
.trade .funding_ratio {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
  align-self: stretch;
}
.trade .funding_ratio span:not(.partition) {
  flex: 1 0 0;
}
.trade .funding_ratio .data {
  padding: 0.25rem;
}
.trade .order_book {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
  padding: 0.25rem 0;
}
.trade .order_book .txt_list.counts {
  width: 100%;
}
.trade .order_book .txt_list.counts span {
  flex: 1 0 0;
  font-size: 0.75rem;
}
.trade .order_book .book_list {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: stretch;
}
.trade .order_book .book_list .txt_list {
  z-index: 1;
  flex: 1;
  padding: 0.25rem;
  letter-spacing: -0.42px;
  position: relative;
}
.trade .order_book .book_list .txt_list span {
  position: relative;
  z-index: 1;
}
.trade .order_book .book_list .txt_list .bar {
  z-index: 0;
  position: absolute;
  top: 0;
  height: 100%;
}
.trade .order_book .book_list.sell .txt_list .bar {
  left: 0;
  background: var(--alpha_red, rgba(245, 0, 32, 0.2));
}
.trade .order_book .book_list.buy .txt_list .bar {
  right: 0;
  background: var(--alpha_green, rgba(0, 209, 127, 0.2));
}
.trade .order_book .call_price {
  display: flex;
  justify-content: center;
  align-items: center;
}
.trade .order_book .call_price span {
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  font-family: "Bahnschrift";
  line-height: normal;
  text-align: center;
}
.trade .order_book .order_book_setting {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.trade .order_book .order_book_setting .select_dropdown {
  flex: 1 1 50%;
  border-radius: 4px;
  background: var(--gray-2, #29313d);
}
.trade .order_book .order_book_setting button {
  flex: 1 1 50%;
  height: 2rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.trade .order_book .order_book_setting button span {
  flex: 1 0 0;
}
.trade .trade_bottom_area .list_action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.trade .trade_bottom_area .list_action .trade_options {
  gap: 0.5rem;
}
.trade .trade_bottom_area .list_action .trade_options button {
  height: 2rem;
  padding: 0.25rem 0.75rem;
}
.trade .trade_bottom_area .list_action .btns button {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}

.wallet.content {
  padding: 2rem 1rem;
}
.wallet_info .section_top {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
}
.wallet_info .section_top h2 {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.wallet_info .section_top .select_type {
  margin-left: auto;
}
.wallet_info .section_top .select_type .ui-selectmenu-button {
  min-width: 5rem;
  height: 1.5rem;
  border-color: var(--gray-2, #29313d);
  background: var(--gray-2, #29313d);
}
.wallet_info .section_top .select_type .ui-selectmenu-menu ul li .ui-menu-item-wrapper {
  height: 2rem;
}
.wallet_info .numbs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1.5rem 0px;
}
.wallet_info .numbs .large_numb {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 2rem;
  line-height: normal;
}
.wallet_info .numbs .calc_numb {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.wallet_info .buttons {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  align-self: stretch;
  padding: 0.5rem 0px;
}
.wallet_info .buttons button {
  flex: 1;
  height: 2.75rem;
}
.wallet_info .btns {
  display: flex;
  gap: 0.5rem;
  align-self: stretch;
}
.wallet_info .btns button {
  flex: 1;
  height: 2rem;
}
.wallet_info .asset_info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.wallet_info .asset_info > div {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  padding: 0.5rem 0;
}
.wallet_info .asset_info dt {
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.wallet_info .asset_info dd {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.wallet_info .asset_info dd .calc_numb {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.wallet_info .blank {
  height: 3rem;
}
.wallet_info .blank.half {
  height: 1.5rem;
}
.wallet_info .section_bottom {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.wallet_info .section_bottom .page_tab {
  align-self: stretch;
}
.wallet_info .section_bottom .asset_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.wallet_info .section_bottom .asset_list_item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 0px;
}
.wallet_info .section_bottom .asset_info {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
}
.wallet_info .section_bottom .asset_title {
  padding: 0;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.wallet_info .section_bottom .asset_value {
  display: flex;
  flex: 1 0 0;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  font-family: Bahnschrift;
  line-height: normal;
  text-align: right;
}
.wallet_info .section_bottom .asset_unit {
  flex: 0 0 auto;
  padding: 0;
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.6; /* 160% */
}
.wallet_info .section_bottom .asset_calc {
  align-self: stretch;
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: right;
}
.wallet.deposit {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem;
}
.wallet .deposit_qr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 12.5rem;
}
.wallet .deposit_info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 1rem;
  border: 1px solid var(--gray-3, #2e3744);
  border-radius: 0.5rem;
  background: var(--gray-0, #1c1f25);
}
.wallet .deposit_info > div {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
}
.wallet .deposit_info dt {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.wallet .deposit_info dd {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.wallet .deposit_info dd span {
  flex: 1 0 0;
  word-break: break-all;
}
.wallet.withdrawal {
  gap: 1.5rem;
}
.wallet .withdrawal_info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.wallet .position_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.wallet .position_list h3 {
  display: flex;
  flex: 1 0 0;
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 2.75rem;
  padding: 0.8125rem 0.75rem;
  border-bottom: 2px solid var(--gray-6, #a5acb6);
  color: var(--gray-6, #a5acb6);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.wallet .position_list .position {
  border-top: 1px solid var(--gray-3, #2e3744);
}
.wallet .withdrawal_amount {
  padding: 1rem;
}
.wallet .withdrawal_amount dl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
}
.wallet .withdrawal_amount dt {
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
  text-align: center;
}
.wallet .withdrawal_amount dd {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.wallet .withdrawal_amount dd .amount {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
  text-align: center;
}
.wallet .withdrawal_amount dd .amount em {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.wallet .withdrawal_amount dd .calc_numb {
  color: var(--gray-6, #a5acb6);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.wallet .withdrawal_detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem 0rem;
  border-top: 1px solid var(--gray-3, #2e3744);
  border-radius: 0.5rem;
}
.wallet .withdrawal_detail .txt_list {
  padding: 0.5rem 0;
}
.wallet .profit_analyze .box {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.wallet .profit_analyze .box .profits {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  align-self: stretch;
}
.wallet .profit_analyze .box .profits .profit_title {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.wallet .profit_analyze .box .profits .profit_percentage {
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
}
.wallet .profit_analyze .box .profits .profit_value {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.wallet .profit_chart {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
}
.wallet .profit_chart .chart {
  height: 10rem;
}
.wallet .profit_chart .chart svg {
  height: 10rem;
}
.wallet .transection_list {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem 0px;
}
.wallet .transection_list_item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--gray-3, #2e3744);
}
.wallet .transection_list_item .transection_title {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
}
.wallet .transection_list_item .transection_title .title {
  color: var(--gray-7, #eaecef);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.wallet .transection_list_item .transection_title .date {
  color: var(--gray-5, #848b9c);
  font-weight: 350;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333; /* 133.333% */
}
.wallet .transection_list_item .transection_value {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-end;
}
.wallet .transection_list_item .transection_value .value {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
}
.wallet .transection_list_item .transection_value .status {
  font-weight: 350;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333; /* 133.333% */
}

.input_check {
  position: relative;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.input_check label {
  display: flex;
  flex: 1 0 0;
  gap: 0.5rem;
  align-items: center;
}
.input_check label input {
  position: absolute;
  z-index: -1;
  width: 1rem;
  height: 1rem;
  opacity: 0;
}
.input_check label input:checked ~ span {
  color: var(--gray-7, #eaecef);
}
.input_check label span {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}

.page_title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}
.board .date {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
}

.board .subject {
  display: -webkit-box;
  align-self: stretch;
  overflow: hidden;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  /* pretendard/body_s */
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.page_title .greeting {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1.75rem;
  line-height: normal;
}
.page_title .message {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.71429;
}
.page_title .info {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  word-break: keep-all;
}
.page_title .title {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.5;
}

.txt_data {
  font-weight: 600;
}

.txt_list {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-size: 0.875rem;
}
.txt_data + .txt_list {
  margin-top: 2.5rem;
}

.txt_list.imgfield, .txt_list.typefield, .txt_list.transformed {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.txt_list.imgfield label, .txt_list.typefield label, .txt_list.transformed label {
  width: 100%;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 166.667%;
}
.txt_list.imgfield.typefield, .txt_list.typefield.typefield, .txt_list.transformed.typefield {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.txt_list.imgfield.typefield .select_dropdown .ui-selectmenu-button, .txt_list.typefield.typefield .select_dropdown .ui-selectmenu-button, .txt_list.transformed.typefield .select_dropdown .ui-selectmenu-button {
  height: 2.625rem;
  background: var(--gray-2, #29313d);
}
.txt_list.imgfield.typefield .select_dropdown .ui-selectmenu-button .ui-selectmenu-text, .txt_list.typefield.typefield .select_dropdown .ui-selectmenu-button .ui-selectmenu-text, .txt_list.transformed.typefield .select_dropdown .ui-selectmenu-button .ui-selectmenu-text {
  text-align: center;
}
.txt_list.imgfield.transformed, .txt_list.typefield.transformed, .txt_list.transformed.transformed {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
.txt_list.data {
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
}
.txt_list.data.type_2 {
  align-items: center;
  width: 100%;
}
.txt_list.data.type_2::after {
  content: "";
  flex: 1 1 auto;
}
.txt_list.data.type_2 .data_title {
  flex: 0 0 5rem;
}
.txt_list.data.type_2 .data_value {
  flex: 0 0 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift", "Pretendard";
  line-height: 1.3333; /* 133.333% */
  text-align: left;
  word-break: break-all;
}
.txt_list.data.type_2 .data_value strong {
  font-weight: inherit;
  font-size: 0.875rem;
}
.txt_list.data.type_2 .unit {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333; /* 133.333% */
  text-align: right;
}
.txt_list.data.type_3 {
  gap: 0.5rem;
}
.txt_list.data.type_3::after {
  content: "";
  flex: 1 1 auto;
}
.txt_list.data.type_3 .data_title {
  flex: 0 0 auto;
  color: var(--gray-5, #848b9c);
}
.txt_list.data.type_3 .data_value {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: left;
}
.txt_list.data.vertical {
  flex-direction: column;
  align-items: stretch;
}
.txt_list.data.vertical .data_value {
  text-align: left;
}
.txt_list.data .data_title {
  flex: 0 0 auto;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.txt_list.data .data_title .big {
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.txt_list.data .data_value {
  flex: 1 1 auto;
  color: var(--gray-7, #eaecef);
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.6666;
  text-align: right;
  word-break: break-all;
}
.txt_list.data .data_value strong {
  display: inline-block;
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1rem;
  letter-spacing: -0.42px;
}
.txt_list.data .data_unit {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.6666; /* 166.667% */
}
.txt_list.data .link {
  color: var(--edx_red, #C44525);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
  text-underline-offset: 0.125rem;
}
.txt_list.data button {
  flex: 0 0 auto;
}
.txt_list.counts {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}
.txt_list.counts .data_value {
  color: var(--gray-7, #eaecef);
  font-family: "Bahnschrift";
}
.txt_list.checkbox .form_checkbox {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}
.txt_list.checkbox label {
  flex: 0 0 auto;
}
.txt_list.checkbox input[type=checkbox] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.txt_list.checkbox span {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.txt_list.checkbox span.self_center {
  align-self: center;
}
.txt_list.checkbox a {
  color: var(--edx_red, #C44525);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.txt_list.type_form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: stretch;
  align-self: stretch;
}
.txt_list.type_form label {
  display: flex;
  justify-content: space-between;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.txt_list.type_form .select_form select {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d) url(../images/icons/dark/icon_8_dropdown_line.svg) no-repeat right 0.5rem center;
}
[data-theme=light] .txt_list.type_form .select_form select {
  background: var(--gray-2, #29313d) url(../images/icons/light/icon_8_dropdown_line.svg) no-repeat right 0.5rem center;
}

.txt_list.type_form input[type=text] {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 2.5rem;
  padding: 0.5rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 4px;
  background: var(--gray-0, #1c1f25);
}
.txt_list.type_form input[type=text].address {
  border: 0;
  border-radius: 4px;
  background: var(--gray-2, #29313d);
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
}
.txt_list.type_form textarea {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  align-self: stretch;
  padding: 8px;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 0.25rem;
  background: var(--gray-0, #1c1f25);
  color: var(--gray-7, #eaecef);
  line-height: 1.71429;
  height: calc(1.71429em * 5); /* 5줄 크기로 설정 */
}
.txt_list.type_form textarea:focus {
  border-color: var(--edx_red, #C44525);
  outline: none;
}
.list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
}
.title_description .list {
  width: 100%;
}
.title_description .list_item {
  font-size: inherit;
}

.list_item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  align-self: stretch;
  width: 100%;
  color: inherit;
  font-style: normal;
  font-size: 0.875rem;
  line-height: inherit;
}
.list_item::before {
  content: attr(data-symbol);
}
.list_item:not([data-symbol])::before {
  content: none;
}
.list.address_list {
  gap: 0;
}
.list.address_list .list_item {
  border-top: 1px solid var(--gray-3, #333b47);
}
.list.address_list .list_item:last-child {
  border-bottom: 1px solid var(--gray-3, #333b47);
}

.form_textfield {
  height: 2.625rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 4px;
}
.form_textfield:hover {
  border-color: var(--edx_red, #C44525);
}
.form_textfield.package {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem;
}
.content > .form_textfield.package {
  flex: 0 0 auto;
}

.form_textfield.package.is-error {
  border-color: var(--error, #f6465d);
}
.form_textfield.package.is-focused {
  border-color: var(--edx_red, #C44525);
}
.form_textfield.package input,
.form_textfield.package textarea {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.5rem !important;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.5rem;
  border: 0 !important;
  background: transparent !important;
}
.form_textfield.package input:focus,
.form_textfield.package textarea:focus {
  outline: none;
}
.form_textfield.package input:empty ~ .btn_clear,
.form_textfield.package textarea:empty ~ .btn_clear {
  display: none;
}
.form_textfield.package input::-ms-clear, .form_textfield.package input::-ms-reveal,
.form_textfield.package textarea::-ms-clear,
.form_textfield.package textarea::-ms-reveal {
  display: none;
}
.form_textfield.package input::-webkit-search-decoration, .form_textfield.package input::-webkit-search-cancel-button, .form_textfield.package input::-webkit-search-results-button, .form_textfield.package input::-webkit-search-results-decoration,
.form_textfield.package textarea::-webkit-search-decoration,
.form_textfield.package textarea::-webkit-search-cancel-button,
.form_textfield.package textarea::-webkit-search-results-button,
.form_textfield.package textarea::-webkit-search-results-decoration {
  display: none;
}
.form_textfield.package .btn_clear {
  display: none;
}
.form_textfield.package .unit {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.6; /* 160% */
}
.form_textfield.select {
  display: flex;
  display: flex;
  gap: 0.25rem;
  align-items: stretch;
  align-items: center;
  height: 2.625rem;
  padding: 0.5rem;
}
.form_textfield.select.region {
  width: 7.5rem;
}
.form_textfield.select.region ~ .package {
  flex: 0 1 calc(100% - 7.5rem - 0.5rem);
  max-width: calc(100% - 7.5rem - 0.5rem);
}
.form_textfield.select span {
  flex: 1 1 auto;
}

.form_img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 14.25rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 4px;
}

.form_message {
  display: flex;
  gap: 0.5rem;
  min-height: 1.25rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 166.667%; /* 166.667% */
}
.is-error ~ .form_message {
  color: var(--error, #f6465d);
}

.form_menu_item {
  color: var(--edx_red, #C44525);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-decoration-line: underline;
  text-underline-offset: 0.125rem;
}

.country_list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}
.country_list_item {
  display: flex;
  gap: 1rem;
  align-items: center;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.country_list_link .code {
  flex: 0 0 3rem;
  width: 3rem;
}
.country_list_link .country {
  flex: 1 1 auto;
}

.join_complete_img {
  width: 21.125rem;
  max-width: 100%;
  height: 15.6875rem;
  margin: 0 auto;
  padding: 1rem;
  background: url(../images/common/dark/img_celebration.svg) no-repeat center center/contain;
}
[data-theme=light] .join_complete_img {
  background: url(../images/common/light/img_celebration.svg) no-repeat center center/contain;
}

.inline_tabs {
  padding: 0 1rem;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
section .inline_tabs {
  padding: 0;
}

.tab_list {
  position: relative;
  display: flex;
}
.inline_tabs .tab_list {
  display: inline-flex;
  margin-bottom: 0;
}
.inline_tabs .tab_list_item {
  display: flex;
  border-bottom: 0;
  border-bottom: 2px solid transparent;
}
.inline_tabs .tab_list_item.is-active {
  border-bottom: 2px solid var(--edx_red, #C44525);
  color: var(--edx_red, #C44525);
}
.inline_tabs .tab_list_link {
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  height: 2.75rem;
  padding: 0.8125rem 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
}

.tab_list_item {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid var(--gray-3, #333b47);
  color: var(--gray-6, #a5acb6);
}
.tab_list_item.is-active {
  border-color: var(--gray-6, #a5acb6);
  color: car(--gray-5, #eaecef);
}
.tab_list_link {
  display: flex;
  flex: 1 0 0;
  gap: 10px;
  justify-content: center;
  align-items: center;
  height: 43px;
  padding: 13px 12px;
  font-size: 0.875rem;
}
.tab_list.type_2 {
  padding: 0 1rem;
}
.tab_list.type_2::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 0;
  height: 1px;
  background: var(--gray-3, #333b47);
}
.tab_list.type_2 .tab_list_item {
  position: relative;
  z-index: 1;
  border-bottom-color: transparent;
}
.tab_list.type_2 .tab_list_item.is-active {
  border-color: var(--edx_red, #C44525);
  color: var(--gray-7, #eaecef);
}

.tab_panel {
  display: none;
}
.tab_panel.is-active {
  display: block;
}
.tab_panel_group {
  flex: 1 1 auto;
  overflow-y: auto;
}
.tab_panel_group.hidden {
  overflow: hidden;
}

.terms_area {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.666; /* 166.667% */
  word-break: keep-all;
}

.qr_code {
  display: block;
  width: 10rem;
  height: 10rem;
}

.box {
  border-radius: 1rem;
  background: var(--gray-2, #29313d);
}
.box.dark {
  background: var(--gray-0, #1c1f25);
}
.box.list_group {
  border-radius: 0.5rem;
}
.box.code_box {
  display: flex;
  gap: 1rem;
  align-items: center;
  align-self: stretch;
  padding: 1.25rem 1.5rem;
}
.box.code_box .code {
  flex: 1 1 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
  word-break: break-all;
}

.img_upload_form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
  align-self: stretch;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--gray-0, #1c1f25);
}
.img_upload_form.example_photo .img_preview_area {
  height: auto;
}
.img_upload_form.example_photo img {
  display: block;
  width: 8.75rem;
  height: 7.125rem;
  margin: 0 auto;
}
.img_upload_form .img_preview_area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  height: 12.5rem;
  background: url(../images/icons/dark/img_area.svg) no-repeat center center/contain;
}
[data-theme=light] .img_upload_form .img_preview_area {
  background: url(../images/icons/light/img_area.svg) no-repeat center center/contain;
}

.img_upload_form .img_preview_area label {
  flex: 1 1 auto;
  overflow: hidden;
}
.img_upload_form .img_preview_area label img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}

.img_upload {
  display: flex;
}
.img_upload [type=file] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.img_upload .btn_upload {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  height: 2.5rem;
  padding: 0.625rem 1rem;
  border-radius: 4px;
  background: var(--gray-2, #29313d);
  color: var(--gray-7, #eaecef);
  font-weight: 700;
  font-style: normal;
  /* pretendard/title_b_l */
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}

.btns_group {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 0rem;
}
.btns_group button {
  flex: 1;
}
.btns_group.normal button {
  border: 2px solid var(--gray-2, #29313d);
  border-radius: 4px;
  background: var(--gray-2, #29313d);
}
.btns_group.normal button.is-active {
  border: 2px solid var(--edx_red, #C44525);
  background: var(--gray-2, #29313d);
}
.btns_group.normal button.is-active span {
  color: var(--edx_red, #C44525);
}
.btns_group.normal button.btn_size-sm.is-active {
  border-width: 1px;
}
.btns_group.normal button.btn_size-sm span {
  font-size: 0.75rem;
}
.btns_group.normal button span {
  color: var(--gray-6, #a5acb6);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.btns_group.type_2 {
  gap: 0;
}
.btns_group.type_2 button {
  border-radius: 0;
}
.btns_group.type_2 button:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.btns_group.type_2 button:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}
.btns_group.type_2 button.is-active span {
  color: var(--white_darkbg, #ffffff);
}
.btns_group.type_2 button span {
  color: var(--gray-6, #51575f);
}

.code_list_item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
  padding: 1rem 0px;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.code_list_item:first-child {
  border-top: 1px solid var(--gray-3, #333b47);
}
.code_list_item.is-default .txts .title .icon_check {
  display: block;
}
.code_list_item .txts {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.code_list_item .txts .title {
  display: flex;
  flex: 1 0 0;
  gap: 0.25rem;
  align-items: flex-start;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  line-height: normal;
  letter-spacing: -0.42px;
}
.code_list_item .txts .title .icon_check {
  display: none;
}
.code_list_item .txts .txt_list {
  display: flex;
  flex: 1 0 0;
  gap: 4px;
  align-items: center;
  font-weight: 400;
  font-size: 0.75rem;
}
.code_list_item .txts .txt_list.data .data_value {
  color: var(--gray-7, #eaecef);
}
.code_list_item .btns {
  display: flex;
  gap: 0.5rem;
}
.code_list_item .btns button {
  display: flex;
  flex: 1 1 auto;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 0.1875rem 1rem;
  font-size: 0.75rem;
  line-height: 1.5;
}

.selection_percentage {
  position: relative;
}
.selection_percentage input[type=range] {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.selection_percentage .range_slider {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
  height: 0.75rem;
  margin: 0 1rem;
}
.selection_percentage .range_slider.is-tooltip {
  margin: 0 1rem 1.4rem;
}
.selection_percentage .range_slider.is-pressed .slider_tooltip {
  font-size: 1rem;
}
.selection_percentage .range_slider .slider_track {
  position: relative;
  width: 100%;
  height: 0.375rem;
}
.selection_percentage .range_slider .slider_track::before {
  content: "";
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 100%;
  height: 0.0625rem;
  background: var(--gray-2, #29313d);
  transform: translateY(-50%);
}
.selection_percentage .range_slider * {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}
.selection_percentage .range_slider .slider_thumb {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--edx_red, #C44525);
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
  transform: translateY(-50%); /* X축 -50% 제거 */
}
.selection_percentage .range_slider .slider_tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 8px;
  padding: 0.125rem 0.25rem;
  border-radius: 0.1875rem;
  background-color: var(--edx_red, #C44525);
  color: var(--gray-1, #1f232a);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  font-family: "Bahnschrift";
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transition: font-size 0.25s;
  transform: translateX(-50%);
  touch-action: none;
  font-feature-settings: "clig" off, "liga" off;
}
.selection_percentage .range_slider .slider_tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 0.1875rem solid transparent;
  border-bottom: 0.1875rem solid var(--edx_red, #C44525);
  border-left: 0.1875rem solid transparent;
  transform: translateX(-50%);
}
.selection_percentage .range_slider .slider_fill {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  height: 1px;
  background: var(--edx_red, #C44525);
  transform: translateY(-50%);
}
.selection_percentage .range_slider .step_group {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.selection_percentage .range_slider .step_group .slider_step {
  position: relative;
  width: 6px;
  height: 6px;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 2px;
  background: var(--gray-2, #29313d);
}
.selection_percentage .range_slider .step_group .slider_step.is-active {
  border-color: var(--edx_red, #C44525);
  background: var(--edx_red, #C44525);
}
.selection_percentage .range_slider .step_group .slider_step .step_scale {
  position: absolute;
  top: 100%;
  left: 50%;
  color: var(--gray-6, #a5acb6);
  font-weight: 350;
  font-style: normal;
  font-size: 0.625rem;
  font-family: "Bahnschrift";
  line-height: normal;
  text-align: center;
  transform: translate(-50%, 0.5rem);
}

.indicator {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.5rem 0px;
}
.indicator .selection_percentage {
  height: 2rem;
}
.indicator .rate {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.indicator .rate_item {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
}
.indicator .rate_item h3 {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.indicator .rate_item p {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
}
.indicator .txt_list {
  padding: 1rem 0;
}

.board_detail_profile {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.board_detail_profile_img {
  width: 2rem;
  height: 2rem;
  border-radius: 2.5rem;
  background: var(--gray-2, #29313d);
}
.board_detail_profile_img img {
  -o-object-fit: fill;
     object-fit: fill;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.board_detail_profile_info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.board_detail_profile_name {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.board_detail_profile_date {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
}

.cell {
  width: 100%;
}
.cell.btn_subtxt {
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  padding: 1rem 0px;
  border-top: 1px solid var(--gray-3, #333b47);
}
.cell.btn_subtxt .cell_subtxt {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
}
.cell.btn_subtxt .cell_subtxt .category {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
}
.cell.btn_subtxt .cell_subtxt .subject {
  display: -webkit-box;
  align-self: stretch;
  overflow: hidden;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.cell.btn_subtxt .cell_subtxt .date {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
}
.cell.btn_subtxt .cell_subtxt .info {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  word-break: keep-all;
}
.cell.btn_subtxt .cell_btns {
  padding-left: 1rem;
}
.cell.address {
  display: flex;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  padding: 1rem 0px;
}
.cell.address .address_title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  padding: 0.25rem 0px;
}
.cell.address .address_title h3 {
  flex: 1 0 0;
  color: var(--gray-7, #eaecef);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.cell.trade {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 1rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: var(--gray-2, #29313d);
}
.cell.trade.is-checked {
  border: 1px solid var(--edx_red, #C44525);
}
.cell.trade .cell_title {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.cell.trade .cell_title span {
  flex: 1 0 0;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  font-family: "Bahnschrift";
  line-height: normal;
}
.cell.trade .cell_description {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.cell.trade .cell_description .row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.cell.trade .cell_description dt {
  width: 7.5rem;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.trade .cell_description dd {
  flex: 1 0 0;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.uncompleted_order {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  align-self: stretch;
  padding: 1.5rem 1rem;
}
.cell.uncompleted_order .cell_title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  align-self: stretch;
}
.cell.uncompleted_order .cell_title .order_info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
}
.cell.uncompleted_order .cell_title .order_info .coin_name {
  color: var(--gray-7, #eaecef);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.cell.uncompleted_order .cell_title .order_info .type {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.uncompleted_order .cell_title .order_info .date {
  margin-left: auto;
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
  text-align: right;
}
.cell.uncompleted_order .cell_title .order_info .leverage {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.uncompleted_order .cell_title .type_info {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
}
.cell.uncompleted_order .cell_title .type_info .order_type {
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.uncompleted_order .cell_title .type_info .order_status {
  margin-left: auto;
  padding: 0.1875rem 1rem;
  border: 1px solid var(--gray-3, #2e3744);
  border-radius: 0.25rem;
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.uncompleted_order .cell_title .type_info .order_status.complete {
  border-color: var(--gray-2, #29313d);
  background: var(--gray-2, #29313d);
  color: var(--edx_red, #C44525);
}
.cell.uncompleted_order .cell_info {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  align-self: stretch;
  width: 100%;
}
.cell.uncompleted_order .cell_info .complete_status {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--gray-3, #333b47);
}
.cell.uncompleted_order .cell_info .complete_status .status {
  position: absolute;
  inset: 0.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--gray-1, #1f232a);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.5; /* 133.333% */
  text-align: center;
}
.cell.uncompleted_order .cell_info .complete_status .status.canceled {
  color: var(--gray-5, #848b9c);
}
.cell.uncompleted_order .cell_info .info_text {
  flex: 1 0 0;
}
.cell.uncompleted_order .cell_info .info_text div {
  display: flex;
  align-items: center;
}
.cell.uncompleted_order .cell_info .info_text div dt {
  flex: 1 0 0;
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.cell.uncompleted_order .cell_info .info_text div dd {
  flex: 1 0 0;
  color: var(--gray-5, #848b9c);
  font-weight: 350;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: 1.3333; /* 133.333% */
}
.cell.uncompleted_order .cell_info .info_text div dd strong {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
}
.cell.uncompleted_order .cell_info .info_text.type_2 div dd {
  text-align: right;
}
.cell.uncompleted_order .cell_info button {
  align-self: flex-end;
}
.cell.uncompleted_order.buy .cell_title .type_info .order_type {
  color: var(--green, #f6465d);
}
.cell.uncompleted_order.buy .complete_status .status {
  color: var(--green);
}
.cell.uncompleted_order.sell .cell_title .type_info .order_type {
  color: var(--red, #f6465d);
}
.cell.uncompleted_order.sell .complete_status .status {
  color: var(--red);
}
.cell.position {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  align-self: stretch;
  padding: 1.5rem 1rem;
}
.cell.position .cell_title {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
}
.cell.position .cell_title .position_flag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  color: var(--white_darkbg, #fff);
  font-weight: 500;
  font-style: normal;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.position .cell_title .position_flag.sell {
  background: var(--red, #f6465d);
}
.cell.position .cell_title .position_flag.buy {
  background: var(--green, #f6465d);
}
.cell.position .cell_title .coin_name {
  color: var(--gray-7, #eaecef);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.cell.position .cell_title .type {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.position .cell_title .leverage {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.cell.position .cell_title button {
  margin-left: auto;
}
.cell.position .position_profits {
  display: flex;
  gap: 0.25rem;
  align-items: stretch;
  align-self: stretch;
}
.cell.position .position_profits > div {
  flex: 1;
}
.cell.position .position_profits dt {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.cell.position .position_profits dd {
  display: flex;
  gap: 10px;
  align-items: center;
  align-self: stretch;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--gray-3, #2e3744);
  border-radius: 0.25rem;
  color: var(--red, #f6465d);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
}
.cell.position .position_info {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem 0.25rem;
}
.cell.position .position_info > div {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.cell.position .position_info dt {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.cell.position .position_info dd {
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.cell.position .position_actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.cell.position .position_actions button {
  flex: 1;
  height: 2rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
}
.cell.position .position_actions button span {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

.cell_list_item,
.btns_list_item {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.cell_list_item.no_result,
.btns_list_item.no_result {
  justify-content: center;
  align-items: flex-start;
  height: 37.0625rem;
  padding: 3.5rem 0;
  border: 0;
}
.cell_list_item.no_result .no_result_inner,
.btns_list_item.no_result .no_result_inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}
.cell_list_item.no_result p,
.btns_list_item.no_result p {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
  text-align: center;
}
.cell_list.cell_list,
.btns_list.cell_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.cell_list.cell_list .btns_list_item,
.btns_list.cell_list .btns_list_item {
  align-self: stretch;
  border-bottom: none;
}
.cell_list .btn_txt,
.btns_list .btn_txt {
  flex: 1;
  height: 3rem;
}
.cell_list .btn_txt.is-checked span,
.btns_list .btn_txt.is-checked span {
  color: var(--edx_red, #C44525);
}
.cell_list .btn_txt.is-checked .icon_check,
.btns_list .btn_txt.is-checked .icon_check {
  display: block;
}
.cell_list .btn_txt span,
.btns_list .btn_txt span {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.cell_list .btn_txt .icon_check,
.btns_list .btn_txt .icon_check {
  display: none;
}

.search_result {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
}
.search_result h3 {
  color: var(--gray-6, #a5acb6) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 0.875rem !important;
  line-height: normal !important;
}

.tag_btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-content: flex-start;
  align-items: flex-start;
}
.tag_btns button {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  height: 2rem;
  padding: 0.1875rem 1rem;
  border-radius: 0.25rem;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}
.coin_list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 0;
}
.coin_list_item {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  padding: 0.25rem 0px;
}
.coin_list_icon img {
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.coin_list_info, .coin_list_value {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: flex-start;
}
.coin_list_value {
  text-align: right;
}
.coin_list_value .coin_value {
  align-self: stretch;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.coin_list_value .calc_value {
  align-self: stretch;
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  letter-spacing: -0.42px;
}
.coin_list_code {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.coin_list_name {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}

.security_level {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  padding: 1rem 0rem;
}
.security_level h3 {
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
  text-align: center;
}
.security_level_grade {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem 0rem;
  background: var(--gray-2, #29313d);
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}
.security_level_grade strong {
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
  text-align: center;
}
.security_level .txt {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
  padding: 0.5rem 0rem;
}
.security_level p {
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  text-align: center;
}
.security_level .info {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.6; /* 160% */
  text-align: center;
}

.activity_log_type {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  align-self: stretch;
  height: 2rem;
}
.activity_log_data {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.activity_log .log {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 0rem;
}
.activity_log .list_item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem;
  border-top: 1px solid var(--gray-3, #333b47);
}

.bottom_menu_bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 0.4375rem;
  padding-right: 1rem;
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 1rem;
  border-top: 1px solid rgba(172, 179, 187, 0.2);
  background: var(--gray-0, #1c1f25);
}
.bottom_menu_bar button {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  height: 2.6875rem;
  padding: 0.0625rem 0.75rem 0.125rem 0.75rem;
}
.bottom_menu_bar button.is-active span {
  color: var(--edx_red, #C44525);
}
.bottom_menu_bar button span {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: normal;
  text-align: center;
}

.market_list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
.market_list .market_info {
  flex: 1 0 0;
}
.market_list .market_price {
  flex: 1 0 0;
}
.market_list .market_change {
  flex: 0 0 4rem;
}
.market_list .market_list_title {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: flex-end;
  align-self: stretch;
  padding: 0.3125rem 0;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}
.market_list .market_list_title .market_price {
  text-align: right;
}
.market_list .market_list_title .market_change {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.market_list .market_list_item {
  display: flex;
  align-items: center;
}
.market_list .market_list_item .market_info {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  height: 2.75rem;
}
.market_list .market_list_item .market_info_text {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 0.125rem;
}
.market_list .market_list_item .market_name {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.market_list .market_list_item .market_type {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
}
.market_list .market_list_item .market_price {
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  line-height: normal;
  text-align: right;
}
.market_list .market_list_item .market_change {
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  line-height: normal;
  text-align: right;
}

.market_chart {
  gap: 0;
  padding: 0;
}

.market_detail_info {
  display: flex;
  flex: 0 0 auto;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  align-items: center;
  align-self: stretch;
  padding: 1rem;
}
.market_detail_info .current_price {
  display: flex;
  flex: 1 0 0;
  flex-shrink: 0;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
}
.market_detail_info .current_price .current_value {
  font-weight: 600;
  font-style: normal;
  font-size: 1.75rem;
  font-family: "Bahnschrift";
  line-height: normal;
}
.market_detail_info .current_price .market_change {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  line-height: normal;
}
.market_detail_info .current_price .market_change em {
  display: flex;
  gap: 0.625rem;
  justify-content: center;
  align-items: center;
  padding: 0.125rem 0.25rem;
  border-radius: 2px;
  background: var(--gray_red, #3c2125);
  font-weight: 500;
  font-style: normal;
  font-size: 0.625rem;
  font-family: Pretendard;
  line-height: normal;
}
.market_detail_info .current_price .market_change em.bg_color--gray_green {
  background: var(--gray_green, #233e33);
}
.market_detail_info .current_price .market_change em.bg_color--gray_red {
  background: var(--gray_red, #3c2125);
}
.market_detail_info .current_price .market_avg_price dl {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
  align-items: center;
}
.market_detail_info .current_price .market_avg_price dl dt {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: normal;
}
.market_detail_info .current_price .market_avg_price dl dd {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: normal;
}
.market_detail_info .market_trade_info {
  display: grid;
  flex: 1 0 0;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 0.25rem;
}
.market_detail_info .market_trade_info dl div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.125rem 0;
}
.market_detail_info .market_trade_info dl dt {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: normal;
}
.market_detail_info .market_trade_info dl dd {
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Bahnschrift";
  line-height: normal;
}

.chart {
  display: flex;
  width: 100%;
  height: 100%;
  flex: 1 0 0;
  justify-content: center;
  align-items: center;
  justify-self: stretch;
}

.toggle_btns {
  display: flex;
  align-self: stretch;
}
.toggle_btns .select_dropdown {
  flex: 1 1 50%;
}
.toggle_btns .select_dropdown .ui-selectmenu-text {
  text-align: center;
}
.toggle_btns button {
  flex: 1 1 50%;
  height: 2rem;
}
.toggle_btns button:not(:first-child):not(:last-child) {
  border-top: 1px solid var(--gray-3, #333b47);
  border-bottom: 1px solid var(--gray-3, #333b47);
}
.toggle_btns button:first-child {
  border-top: 1px solid var(--gray-3, #333b47);
  border-bottom: 1px solid var(--gray-3, #333b47);
  border-left: 1px solid var(--gray-3, #333b47);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.toggle_btns button:last-child {
  border-top: 1px solid var(--gray-3, #333b47);
  border-right: 1px solid var(--gray-3, #333b47);
  border-bottom: 1px solid var(--gray-3, #333b47);
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.toggle_btns button.is-active {
  border-color: var(--edx_red, #C44525);
  background-color: var(--edx_red, #C44525);
}
.toggle_btns button.is-active span {
  color: var(--gray-1, #1f232a);
}
.toggle_btns button span {
  color: var(--gray-6, #a5acb6);
  font-weight: 600;
  font-style: normal;
  font-size: 0.75rem;
  line-height: normal;
  text-align: center;
}
.toggle_btns.type_2 {
  gap: 0.25rem;
  padding: 0;
}
.toggle_btns.type_2 button {
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 0.25rem;
}
.toggle_btns.type_2 button.is-active {
  border-color: var(--gray-2, #29313d);
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
}
.toggle_btns.type_2 button.is-active span {
  color: var(--gray-7, #eaecef);
}

.select_dropdown {
  position: relative;
}
.select_dropdown .ui-selectmenu-button.ui-button {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  align-items: center;
  align-self: stretch;
  width: auto;
  height: 2rem;
  margin: 0;
  padding: 0rem 0.5rem;
  border: 1px solid var(--gray-3, #333b47);
  border-radius: 0.25rem;
  background-color: transparent;
}
.type_form .select_dropdown .ui-selectmenu-button.ui-button {
  height: 2.5rem;
  border: 0;
  background: var(--gray-2, #29313d);
}

.select_dropdown .ui-selectmenu-button.ui-button .ui-selectmenu-text {
  flex: 1 0 0;
  margin-right: 0.25rem;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  font-family: "Pretendard";
  line-height: 1.5; /* 150% */
}
.select_dropdown .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  width: 0.5rem;
  height: 0.5rem;
  background: url(../images/icons/dark/icon_8_dropdown_line.svg) no-repeat center/contain;
}
[data-theme=light] .select_dropdown .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/light/icon_8_dropdown_line.svg) no-repeat center/contain;
}

.select_dropdown .ui-selectmenu-button.ui-button[aria-expanded=true] {
  border-bottom-color: transparent;
  border-radius: 0.25rem 0.25rem 0 0;
  background: var(--gray-2, #29313d);
}
.select_dropdown .ui-selectmenu-button.ui-button[aria-expanded=true] .ui-selectmenu-icon {
  transform: rotate(180deg);
}
.select_dropdown .ui-selectmenu-menu {
  width: 100%;
  border-radius: 0 0 0.25rem 0.25rem;
}
.select_dropdown .ui-selectmenu-menu ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
  width: 100% !important;
  max-height: 50vh;
  border: 1px solid var(--gray-3, #333b47);
  border-top: 0;
  background: var(--gray-1, #1f232a);
}
.select_dropdown .ui-selectmenu-menu ul li {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 18px; /* 150% */
  text-align: center;
}
.select_dropdown .ui-selectmenu-menu ul li .ui-menu-item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5rem;
  padding: 0 0.5rem;
  background: none;
  text-align: center;
}
.select_dropdown .ui-selectmenu-menu ul li .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  border: 0;
  color: var(--fubit-yellow, #C44525);
}
.select_dropdown.num_only .ui-selectmenu-text {
  font-family: "Bahnschrift";
}
.select_dropdown.num_only .ui-selectmenu-menu ul li {
  font-family: "Bahnschrift";
}
.select_dropdown.is-bottom .ui-selectmenu-button.ui-button {
  border: 1px solid var(--gray-3, #333b47);
}
.select_dropdown.is-bottom .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/dark/icon_8_dropdown_line.svg) no-repeat center/contain;
}
[data-theme=light] .select_dropdown.is-bottom .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/light/icon_8_dropdown_line.svg) no-repeat center/contain;
}

.select_dropdown.is-bottom .ui-selectmenu-button.ui-button[aria-expanded=true] {
  border-top: 0;
  border-radius: 0 0 0.25rem 0.25rem;
}
.select_dropdown.is-bottom .ui-selectmenu-button.ui-button[aria-expanded=true] .ui-selectmenu-icon {
  transform: rotate(180deg);
}
.select_dropdown.is-bottom .ui-selectmenu-menu {
  border-bottom: 0;
  border-radius: 0.25rem 0.25rem 0 0;
}
.select_dropdown.is-bottom .ui-selectmenu-menu ul {
  border: 1px solid var(--gray-3, #333b47);
  border-bottom: 0;
  border-radius: 0.25rem 0.25rem 0 0;
}
.select_dropdown.type_2 .ui-selectmenu-button.ui-button {
  border: 0;
  background: var(--gray-2, #29313d);
}
.select_dropdown.type_2 .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/dark/icon_8_dropdown.svg) no-repeat center/contain;
}
[data-theme=light] .select_dropdown.type_2 .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/light/icon_8_dropdown.svg) no-repeat center/contain;
}

.select_dropdown.type_2 .ui-selectmenu-menu ul {
  border: 0;
  background: var(--gray-2, #29313d);
}
.select_dropdown.type_2 .ui-selectmenu-menu ul li {
  text-align: left;
}
.select_dropdown.type_2 .ui-selectmenu-menu ul li .ui-menu-item-wrapper {
  justify-content: flex-start;
  height: 1.5rem;
}
.select_dropdown.type_3 .ui-selectmenu-button.ui-button {
  border: 0;
  background: var(--gray-2, #29313d);
}
.select_dropdown.type_3 .ui-selectmenu-button.ui-button .ui-selectmenu-text {
  text-align: center;
}
.select_dropdown.type_3 .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/dark/icon_8_dropdown_line.svg) no-repeat center/contain;
}
[data-theme=light] .select_dropdown.type_3 .ui-selectmenu-button.ui-button .ui-selectmenu-icon {
  background: url(../images/icons/light/icon_8_dropdown_line.svg) no-repeat center/contain;
}

.select_dropdown.type_3 .ui-selectmenu-menu ul li .ui-menu-item-wrapper {
  text-align: center;
  justify-content: center;
  height: 1.5rem;
}

.lists {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
}
.lists_item.title_description {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 1rem;
  border: 1px solid var(--gray-3, #2e3744);
  border-radius: 4px;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.lists_item.title_description .title {
  flex: 0 0 auto;
}
.lists_item.title_description .description {
  flex: 1 0 0;
  word-break: keep-all;
}

.warning {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
  color: var(--red, #f6465d);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.warning p {
  word-break: keep-all;
}
.warning_box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray_red, #3c2125);
}

.btn_trade_control_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 2rem;
  padding: 0rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
}
.btn_trade_control_wrap .input {
  flex: 1 0 0;
  min-width: 0;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  font-family: "Bahnschrift";
  line-height: 1.71429; /* 171.429% */
  text-align: center;
  text-align: center;
}

.switching_transfer {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--gray-2, #29313d);
}
.switching_transfer .transfer_list {
  flex: 1 0 auto;
  flex-direction: column;
}
.switching_transfer .transfer_list .from,
.switching_transfer .transfer_list .to {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.switching_transfer .transfer_list .from button,
.switching_transfer .transfer_list .to button {
  flex: 1 0 0;
  margin-left: auto;
  padding: 0.25rem 0.5rem;
}
.switching_transfer .transfer_list .from button span,
.switching_transfer .transfer_list .to button span {
  flex: 1 1 auto;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
  text-align: right;
}
.switching_transfer .transfer_list .from .unit,
.switching_transfer .transfer_list .to .unit {
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
  text-align: right;
}
.switching_transfer.type_2 {
  background: none;
}
.switching_transfer.type_2 .transfer_list .from,
.switching_transfer.type_2 .transfer_list .to {
  padding: 0.75rem;
}
.switching_transfer.type_2 .transfer_list .from button,
.switching_transfer.type_2 .transfer_list .to button {
  padding: 0.25rem 0.5rem;
  justify-content: flex-start;
  text-align: left;
}
.switching_transfer.type_2 .transfer_list .from button span,
.switching_transfer.type_2 .transfer_list .to button span {
  font-size: 0.875rem;
  line-height: 1.5; /* 150% */
  text-align: left;
}
.switching_transfer.type_2 .transfer_list .from .unit,
.switching_transfer.type_2 .transfer_list .to .unit {
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}

.txt_field_enter_amount {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.txt_field_enter_amount .form_textfield {
  padding: 0.5rem 1rem;
}

.select_time_period .btns_group button.is-checked {
  border: 1px solid var(--edx_red, #C44525);
  color: var(--edx_red, #C44525);
}
.select_time_period .date_range_group {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
.select_time_period .date_range_group span {
  flex: 0 0 auto;
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
}
.select_time_period .date_range_group label {
  flex: 1;
  overflow: hidden;
}
.select_time_period .date_range_group input.date {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 2.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-0, #1c1f25);
  color: var(--gray-7, #eaecef);
  font-weight: 350;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
  text-align: center;
}
.select_date_slot {
  position: relative;
  display: flex;
  overflow: hidden;
  padding: 3.375rem 0;
}
.select_date_slot::before, .select_date_slot::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
}
.select_date_slot::before {
  top: 3.375rem;
}
.select_date_slot::after {
  bottom: 3.375rem;
}
.select_date_slot .swiper {
  flex: 1;
  overflow: visible;
  height: 1.6875rem;
  border-top: 1px solid var(--gray-3, #2e3744);
  border-bottom: 1px solid var(--gray-3, #2e3744);
}
.select_date_slot .swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.6875rem;
  color: var(--gray-3, #2e3744);
  font-weight: 600;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
}
.select_date_slot .swiper .swiper-slide-active {
  color: var(--gray-7, #eaecef);
}
.select_date_slot .swiper .swiper-slide-prev, .select_date_slot .swiper .swiper-slide-next {
  color: var(--gray-5, #848b9c);
}

.title_bundle .type {
  color: var(--gray-5, #848b9c);
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5;
}
.title_bundle h2 {
  display: flex;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
}
.title_bundle h2 em {
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.title_bundle span {
  color: var(--gray-6, #a5acb6);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}

.textarea_auto_height {
  flex: 0 0 auto;
  overflow: hidden;
}

.sel_amount {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  align-self: stretch;
}
.sel_amount li {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.sel_amount button {
  display: flex;
  flex: 1 0 0;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  padding: 0.1875rem 1rem;
  border-radius: 0.25rem;
  background: var(--gray-2, #29313d);
}
.sel_amount button span {
  font-weight: 400 !important;
}
.sel_amount button.is-checked {
  background: var(--edx_red, #C44525);
}
.sel_amount button.is-checked span {
  color: var(--gray-1, #1f232a) !important;
}

.slider_set {
  display: flex;
  padding: 1.5rem 0rem 1rem 0rem;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
}
.slider_set .selection_percentage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.5rem;
  align-self: stretch;
}
.slider_set .selection_percentage .range_slider {
  flex: 1 0 0;
}

.calculated_result {
  display: flex;
  padding: 1.5rem 0rem;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  align-self: stretch;
}

.popup {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  background: var(--black-50, rgba(0, 0, 0, 0.75));
  opacity: 0;
  transition: 0.35s;
}
.popup.is-active {
  z-index: 100;
  opacity: 1;
}
.popup.type_alert, .popup.type_message {
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.popup.type_alert.is-active .popup_inner, .popup.type_message.is-active .popup_inner {
  opacity: 1;
  transform: translateY(0);
}
.popup.type_alert.type_alert .popup_inner, .popup.type_message.type_alert .popup_inner {
  padding-top: 1rem;
  padding-bottom: 1rem;
  width: 31.25rem;
}
.popup.type_alert.type_alert .popup_content, .popup.type_message.type_alert .popup_content {
  text-align: center;
}
.popup.type_alert .popup_inner, .popup.type_message .popup_inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  opacity: 0;
  transition: 0.35s;
  transform: translateY(6.25rem);
}
.popup.type_alert .popup_inner .popup_content, .popup.type_message .popup_inner .popup_content {
  flex: 1 1 auto;
  overflow-y: auto;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  /* pretendard/body_m */
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
}
.popup.type_alert .popup_inner .bottom_btns, .popup.type_message .popup_inner .bottom_btns {
  padding: 0;
}
.popup.type_slide {
  justify-content: flex-end;
  align-items: flex-end;
  padding: 0;
}
.popup.type_slide.is-active .popup_inner {
  opacity: 1;
  transform: translateY(0);
}
.popup.type_slide.is-resizable .popup_inner {
  min-height: 9.375rem;
}
.popup.type_slide.is-resizable .popup_drag_handler {
  align-items: flex-end;
  height: 1rem;
}
.popup.type_slide .popup_inner {
  padding: 1rem 1.5rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  border-radius: 1rem 1rem 0 0;
  transition: 0.35s;
  transform: translateY(100%);
}
.popup.type_left.is-active .popup-inner {
  opacity: 1;
  transform: translateX(0);
}
.popup.type_left .popup-inner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  width: 18.75rem;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--gray-1, #1f232a);
  box-shadow: 0px -4px 16px 0px rgba(0, 0, 0, 0.25);
  transition: 0.35s;
  transform: translateX(-100%);
  height: 100vh; /* Viewport height */
  box-sizing: border-box; /* 패딩을 포함한 높이 계산 */
}
.popup.type_left .popup-inner .search_form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
  padding: 0rem 1rem;
}
.popup.type_left .popup-inner .search_form h3 {
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
}
.popup.type_left .popup-inner .market_list {
  margin-top: 1rem;
  padding: 0 1rem;
}
.popup.type_share {
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.popup.type_share.is-active .popup_inner {
  opacity: 1;
  transform: translateY(0);
}
.popup.type_share .popup_inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  opacity: 0;
  transition: 0.35s;
  transform: translateY(6.25rem);
}
.popup.type_share .popup_inner.center_floating {
  display: flex;
  padding: 1.5rem 1rem;
  width: 31.25rem;
}
.popup.type_share .popup_inner.center_floating .popup_head i {
  display: block;
}
.popup.type_share .popup_inner.center_floating .popup_content {
  /*flex-direction: row;
  gap: 0.5rem;
  align-items: stretch;
  align-self: stretch;
  padding: 8px 0px;*/
  flex-direction: row;
  flex: 1 1 auto;
  overflow-y: auto;
  color: var(--gray-7, #eaecef);
  font-weight: 400;
  font-style: normal;
  /* pretendard/body_m */
  font-size: 0.875rem;
  line-height: 1.71429; /* 171.429% */
}
.popup.type_share .popup_inner.center_floating .popup_foot .nickname {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  align-items: center;
  height: 2rem;
  border: 1px solid var(--gray-3, #2e3744);
  border-radius: 0.25rem;
}
.popup.type_share .popup_inner.center_floating .popup_foot .nickname span {
  display: flex;
  gap: 0.1875rem;
  justify-content: center;
  color: var(--gray-6, #a5acb6);
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
}
.popup.type_share .popup_inner.center_floating .popup_foot .nickname span em {
  color: var(--gray-5, #848b9c);
  font-weight: 400;
  font-style: normal;
  font-size: 0.625rem;
  line-height: 1.6; /* 160% */
}
.popup.type_share .popup_inner.center_floating .share_content_left {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: flex-start;
}
.popup.type_share .popup_inner.center_floating .share_content_left .title_brand {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.popup.type_share .popup_inner.center_floating .share_content_left .title_brand .title {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.popup.type_share .popup_inner.center_floating .share_content_left .title_brand .title strong {
  color: var(--gray-7, #eaecef);
  font-weight: 700;
  font-style: normal;
  font-size: 1rem;
  line-height: normal;
}
.popup.type_share .popup_inner.center_floating .share_content_left .title_brand .brand {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  font-weight: 500;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.5; /* 150% */
}
.popup.type_share .popup_inner.center_floating .share_content_left .txt_big_percentage {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 3.75rem;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: var(--gray-0, #1c1f25);
}
.popup.type_share .popup_inner.center_floating .share_content_left .txt_big_percentage .percentage {
  font-weight: 600;
  font-style: normal;
  font-size: 20px;
  font-family: Bahnschrift;
  line-height: normal;
  text-align: center;
}
.popup.type_share .popup_inner.center_floating .share_content_left .txt_big_percentage .profit {
  font-weight: 350;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333;
}
.popup.type_share .popup_inner.center_floating .share_content_left .txt_big_percentage .profit em {
  font-style: normal;
  font-size: 0.625rem;
}
.popup.type_share .popup_inner.center_floating .share_content_left .position_info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
}
.popup.type_share .popup_inner.center_floating .share_content_left .position_info div {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
}
.popup.type_share .popup_inner.center_floating .share_content_left .position_info dt {
  flex: 0 0 5rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.popup.type_share .popup_inner.center_floating .share_content_left .position_info dd {
  color: var(--edx_red, #C44525);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333; /* 133.333% */
}
.popup.type_share .popup_inner.center_floating .share_content_left .cap_date {
  color: var(--gray-6, #a5acb6);
  font-weight: 350;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.3333; /* 133.333% */
}
.popup.type_share .popup_inner.center_floating .share_content_right {
  position: relative;
  display: flex;
  flex: 1 0 0;
}
.popup.type_share .popup_inner.center_floating .share_content_right .profit_img {
  position: absolute;
  inset: 0;
  border-radius: 0.25rem;
}
.popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_-50 {
  background: url(../images/common/dark/img-50.png) no-repeat center center/cover;
}
.popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_-25 {
  background: url(../images/common/dark/img-25.png) no-repeat center center/cover;
}
.popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_0 {
  background: url(../images/common/dark/img-0.png) no-repeat center center/cover;
}
.popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_25 {
  background: url(../images/common/dark/img+25.png) no-repeat center center/cover;
}
.popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_50 {
  background: url(../images/common/dark/img+50.png) no-repeat center center/cover;
}
[data-theme=light] .popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_-50 {
  background: url(../images/common/light/img-50.png) no-repeat center center/cover;
}
[data-theme=light] .popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_-25 {
  background: url(../images/common/light/img-25.png) no-repeat center center/cover;
}
[data-theme=light] .popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_0 {
  background: url(../images/common/light/img-0.png) no-repeat center center/cover;
}
[data-theme=light] .popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_25 {
  background: url(../images/common/light/img+25.png) no-repeat center center/cover;
}
[data-theme=light] .popup.type_share .popup_inner.center_floating .share_content_right .profit_img.img_profit_50 {
  background: url(../images/common/light/img+50.png) no-repeat center center/cover;
}

.popup.type_share .popup_inner.bottom_sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  gap: 0;
  width: 100%;
  height: auto;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom);
  border-radius: 0;
}
.popup.type_share .popup_inner .bottom_sheet .bottom_checkbox {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 1rem;
}
.popup.type_share .popup_inner .bottom_sheet .bottom_checkbox .txt_list.checkbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-self: stretch;
  padding: 0.5rem 0rem;
}
.popup.type_share .popup_inner .bottom_sheet .bottom_checkbox .txt_list.checkbox .form_checkbox {
  display: flex;
  flex: 1 0 0;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem 0rem;
}
.popup.type_share .popup_inner .bottom_sheet .btn_list {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  align-self: stretch;
  padding: 0.5rem 1rem;
}
.popup.type_share .popup_inner .bottom_sheet .btn_list button {
  flex: 1;
}
.popup_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-height: calc(100vh - 9.375rem);
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--gray-1, #1f232a);
  box-shadow: 0 -0.25rem 1rem 0 rgba(0, 0, 0, 0.25);
}
.popup_inner_close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--gray-7, #eaecef);
  font-size: 1.5rem;
  cursor: pointer;
}
.popup_head {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
}
.popup_head h2 {
  flex: 1 0 0;
  color: var(--gray-7, #eaecef);
  font-weight: 500;
  font-style: normal;
  font-size: 1rem;
  line-height: 1.5; /* 150% */
}
.popup_head h2.single_title {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 2.75rem;
  text-align: center;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.popup_head.bottom_title {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}
.popup_head.bottom_title .btn_close {
  align-self: flex-end;
}
.popup_head.bottom_title h2 {
  align-self: stretch;
  color: var(--gray-7, #eaecef);
  font-weight: 600;
  font-style: normal;
  font-size: 1.25rem;
  line-height: normal;
}
.popup_content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.popup_content.has-tab_group {
  padding: 0;
}
.popup_content.has-tab_group > .tab_panel_group {
  padding: 1.5rem 1rem;
}
.popup_info {
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
}
.popup.caution .popup_content {
  gap: 0;
}
.popup.caution .caution_message {
  padding-bottom: 1rem;
  color: var(--gray-6, #a5acb6);
  font-weight: 400;
  font-style: normal;
  font-size: 0.75rem;
  line-height: 1.6666; /* 166.667% */
  text-align: center;
}
.popup.caution .message_icon {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  align-self: stretch;
  padding: 1rem 0px;
}
.popup.caution .message_icon span {
  color: var(--edx_red, #C44525);
  font-weight: 600;
  font-style: normal;
  font-size: 0.875rem;
  line-height: normal;
  text-align: center;
}/*# sourceMappingURL=fubit-style.css.map */



/* 2024-04-25 input caret color */
input{
  caret-color: var(--edx_red, #C44525);
}
[data-theme=light] input{
  caret-color: var(--edx_red, #FB562C);
}