@charset "UTF-8";

@import url("/inc/coinone/shared/shared.css?ver=20260731");
:root {
  --line-aa: 1px solid #aaa;
  --line-dd: 1px solid #ddd;
  --line-ee: 1px solid #eee;
  --line-e6: 1px solid #e6e6e6;
  --line-f5: 1px solid #f5f5f5;
}

.ios .contents {
  min-height: 100vh;
}

/* iphone 7 ~ 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) {
  .ios .contents {
    min-height: 100%;
  }
}
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) {
  .ios .contents {
    min-height: 100%;
  }
}
/* color */
.color-primary {
  color: #0199e8;
}

.color-secondary {
  color: #33ffce;
}

.color-red,
.color-buy,
.color-plus,
.stock-increase {
  color: #f24538 !important;
}

.color-buy-part {
  color: #f03c88 !important;
}

.color-blue,
.color-sell,
.color-minus,
.stock-decrease {
  color: #0083d1 !important;
}

.stock-steady {
  color: #aaa;
}

.color-darkgray {
  color: #666 !important;
}

.color-kpink {
  color: #ec5f5f;
}

.bg-primary {
  background-color: #000;
}

.bg-secondary {
  background-color: #33ffce;
}

.bg-red,
.bg-buy {
  background-color: #f24538;
}

.bg-blue,
.bg-sell {
  background-color: #0083d1;
}

.bg-careful {
  background-color: #ffe300;
}

.bg-purple {
  background-color: #783cc6;
}

.bg-gray {
  background-color: #f7f7f7;
}

.bg-gray2 {
  background: #f7f7f7 !important;
}

.bg-black {
  background-color: #222;
}

.bg-kpink {
  background-color: #ec5f5f;
}

/* text */
.em {
  font-weight: 700;
}

.title-wrap.inline {
  display: block;
}

.title-wrap.inline h2 {
  display: inline;
}

.title-wrap.inline .btn-tooltip {
  margin-top: -6px;
  margin-left: 2px;
}

.filter {
  color: #888;
  font-size: 12px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.filter::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #888;
  /* -webkit-mask: url(/inc/coinone/img/ico-arrow-minus.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 12px 9px;
  display: inline-block;
}

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

.ellipsis2 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* button */
.wrap-btn {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrap-btn.main {
  margin-top: 40px;
  position: relative;
}

.wrap-btn-sticky {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  bottom: 0;
  padding: 0 16px 30px;
  display: -webkit-flex;
  display: flex;
  z-index: 10;
  width: 100%;
  background: linear-gradient(360deg, #fff 37.22%, rgba(255, 255, 255, 0) 100%);
  flex-shrink: 0;
  transition: opacity 0.8s;
}

.wrap-btn-sticky.bg-gray2 {
  background: linear-gradient(360deg, #f7f7f7 37.22%, rgba(255, 255, 255, 0) 100%) !important;
  position: fixed;
}

.wrap-btn-sticky.hide {
  opacity: 0;
}

.wrap-btn-fixed {
  padding: 0 16px 30px;
  display: -webkit-flex;
  display: flex;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  background: linear-gradient(360deg, #fff 37.22%, rgba(255, 255, 255, 0) 100%);
  margin-top: auto;
  flex-shrink: 0;
}

[id^="layer-pop-terms"] .tab-content {
  -webkit-flex: 1;
  flex: 1;
  height: initial;
}

.bg-gray [id^="layer-pop-terms"] .wrap-btn-fixed {
  background-color: #fff;
}

.wrap-btn-fixed.sticky {
  position: relative;
}

.bg-gray .wrap-btn-fixed {
  background-color: #f7f7f7;
}

.btn-bottom {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  width: 100%;
  height: 62px;
}

[class^="btn-flat"] {
  width: 40%;
  height: 100%;
  background-color: #444;
  color: #fff;
  font-size: 16px;
}

.btn-flat-primary {
  width: 60%;
  background-color: #000;
}

[class^="wrap-btn"] [class^="btn-"] {
  width: 100%;
  border-radius: 8px;
  text-align: center;
}

[class^="wrap-btn"] .btn-icon {
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 60px;
  height: 60px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

[class^="wrap-btn"] .btn-icon .icon {
  display: block;
  width: 16px;
  height: 2px;
  background-color: #222;
}

[class^="wrap-btn"] .btn-icon .icon::before,
[class^="wrap-btn"] .btn-icon .icon::after {
  content: "";
  width: 16px;
  height: 2px;
  background-color: #222;
  display: block;
  position: absolute;
}

[class^="wrap-btn"] .btn-icon .icon::before {
  top: 23px;
}

[class^="wrap-btn"] .btn-icon .icon::after {
  bottom: 23px;
}

.btn-xlg {
  height: 72px;
  line-height: 72px;
  font-size: 20px;
  color: #000;
  font-weight: 700;
}

.btn-md2 {
  height: 40px;
  line-height: 40px;
}

.btn-sm {
  height: 32px;
  line-height: 32px;
  padding: 0 14px;
}

button .add::before {
  content: "+";
}

[class^="wrap-btn"] .btn-confirm {
  width: 134px;
}

[class^="wrap-btn"] .btn-confirm + [class^="btn"] {
  flex: 1;
}

[class^="wrap-btn"] .btn-line {
  border: var(--line-dd);
  color: #222;
  font-size: 15px;
  background-color: #fff;
}

[class^="wrap-btn"].select .btn-line.on {
  background-color: #000;
  color: #fff;
}

[class^="wrap-btn"] .btn-line:disabled {
  background-color: #fff !important;
}

[class^="wrap-btn"] .btn-line .add::before {
  content: "+";
}

[class^="wrap-btn"] .btn-block {
  background-color: #f7f7f7;
}

[class^="wrap-btn"] .btn-block2 {
  background-color: #434343;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
}

[class^="wrap-btn"] .btn-underline {
  border-bottom: 1px solid #666;
  color: #666;
  font-size: 13px;
  border-radius: 0;
  display: inline-block;
  width: auto;
  margin: 16px 0 60px;
}

[class^="wrap-btn"] .btn-xs {
  height: 22px;
  line-height: 22px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 4px;
  font-weight: 400;
  color: #222;
}

[class^="wrap-btn"] [class^="btn-"] + [class^="btn-"] {
  margin-left: 8px;
}

[class^="wrap-btn"] [hidden] + [class^="btn-"] {
  margin-left: 0;
}

[class^="wrap-btn"] .btn-xs + .btn-xs {
  margin-left: 3px;
}

[class^="wrap-btn"] [class^="btn-"][class*="bg-"] {
  color: #fff;
}

[class^="wrap-btn"] [class^="btn-"].bg-careful {
  font-weight: 700;
  color: #222;
}

[class^="wrap-btn"] [class^="btn-"].bg-bg-purple {
  font-weight: 700;
  color: #fff;
}

[class^="wrap-btn"] [class^="btn-"].bg-careful img {
  margin: auto;
}

[class^="wrap-btn"] .btn-select {
  height: 40px;
  line-height: 40px;
  border: var(--line-dd);
  border-radius: 4px;
  font-size: 15px;
}

[class^="wrap-btn"] .btn-select.on {
  background-color: #222;
  color: #fff;
  border-color: #222;
}

[class^="wrap-btn"] .bg-gray {
  color: #222 !important;
  font-size: 15px;
}

[class^="wrap-btn"] .btn-col {
  border: var(--line-dd);
  background-color: #fff;
  color: #333;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
}

[class^="wrap-btn"] .btn-col + .btn-col {
  margin-left: 4px;
}

[class^="wrap-btn"] .btn-col.on {
  background-color: #222;
  color: #fff;
  border-color: #222;
}

.wrap-btn-round {
  display: -webkit-flex;
  display: flex;
}

.wrap-btn-round button + button {
  margin-left: 4px;
}

.pop-content + .wrap-btn {
  margin-top: 40px;
}

.modal-content .pop-content + .wrap-btn {
  margin-top: 32px;
}

div + .wrap-btn {
  margin-top: 24px;
}

[class^="wrap-btn"] .btn-round {
  width: auto;
  font-weight: 700;
  font-size: 13px;
  padding: 0 14px;
  border-radius: 30px;
  background-color: #f8f8f8;
}

[class^="wrap-btn"] .btn-round.on {
  color: #fff;
  background-color: #222;
}

[class^="wrap-btn"] .btn-round-line {
  width: auto;
  font-weight: 700;
  font-size: 13px;
  padding: 0 14px;
  border-radius: 30px;
  background-color: #fff;
  border: var(--line-dd);
}

.btn-tooltip {
  /* background: url(/inc/coinone/img/ico-qmark.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.block-tag {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block-tag > .label-text {
  line-height: initial;
  font-weight: 400;
}

.block-tag > em {
  line-height: 22px;
  font-weight: 400;
}

.flex-box {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* tab */
.tabs {
  position: fixed;
  top: 56px;
  width: 100%;
  height: 40px;
  background-color: #fff;
  z-index: 10;
}

.tabs ul {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  border-bottom: var(--line-ee);
  padding: 0 16px;
}

.tabs ul li {
  width: 50%;
}

.tabs ul li.on {
  position: relative;
}

.tabs ul li.on::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #222;
  position: absolute;
  bottom: -1px;
}

.tabs ul li button {
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  display: block;
  margin: auto;
  color: #888;
}

.tabs ul li.on button {
  font-weight: 700;
  color: #222;
}

.tab-content {
  padding-top: 40px;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  flex: 1;
}

/* loading */
.loading-container {
  width: 100%;
  z-index: 1;
  position: relative;
}

.chart-content .loading-container::after {
  content: "";
  width: 100%;
  height: calc(100vh - 72px);
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
  z-index: -1;
}

.loading-spinner {
  background: rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 110;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-spinner svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #fff;
  stroke-width: 12;
  stroke-linecap: round;
  animation: spinner 1s linear infinite;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  width: 100%;
  color: #fff;
  display: block;
}

.spinner::after {
  content: "";
  background: url(/inc/coinone/img/spinner.svg) no-repeat center;
  animation: spinner 1s linear infinite;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 12px);
  left: calc(50% - 12px);
}

.loading-list li + li {
  margin-top: 24px;
}

.loading-list li {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  width: 100%;
}

.list-right {
  margin-left: 8px;
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
}

[class^="skeleton-"] {
  background-color: #f7f7f7;
}

.skeleton-total {
  width: 20%;
  height: 19px;
  margin: 10px 0 0;
}

.skeleton-price {
  width: 50%;
  height: 26px;
  margin: 10px 0 0;
}

.skeleton-stock {
  width: 45%;
  height: 19px;
  margin: 10px 0 0;
}

.skeleton-btn {
  width: 50%;
  height: 54px;
  border-radius: 10px;
  margin-top: 10px;
}

.skeleton-number {
  width: 68px;
  height: 20px;
  margin-left: 8px;
}

.skeleton-stockname {
  width: 80px;
  height: 28px;
  margin: 20px 0 0 8px;
}

.skeleton-stockstar {
  width: 20px;
  height: 20px;
  background: #ddd;
  /* -webkit-mask: url(/inc/coinone/img/ico-star.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 20px 20px;
  position: absolute;
  left: 84px;
  top: 3px;
  display: block;
}

.skeleton-stockprice {
  width: 150px;
  height: 32px;
  margin: 4px 0 0 8px;
}

.skeleton-change {
  width: 170px;
  height: 15px;
  margin: 9px 0 0 8px;
}

.skeleton-graph {
  width: 100%;
  height: 246px;
  margin-top: 26px;
}

.skeleton-graphbar {
  width: 100%;
  height: 44px;
  margin-top: 8px;
}

.skeleton-btn + .skeleton-btn {
  margin: 0 0 0 8px;
}

.skeleton-img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.skeleton-list-top {
  width: 65%;
  height: 20px;
}

.skeleton-list-bottom {
  width: 55%;
  height: 14px;
  margin-top: 10px;
}

.loader {
  background: #f1f1f1;
  background-image: linear-gradient(90deg, #f1f1f1 0%, #e9e9e9 20%, #e9e9e9 40%, #f1f1f1 100%);
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: skeletonmove 1s infinite linear forwards;
  position: relative;
}

.loader {
  background: #f7f7f7;
  background-image: none;
  background-size: auto;
  background-repeat: no-repeat;
  animation: none;
  position: relative;
}

.loader::before {
  content: "";
  display: block;
  background: #f7f7f7;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #f7f7f7 0%, #f1f1f1 20%, #f1f1f1 40%, #f7f7f7 100%);
  background-size: 800px 100%;
  background-repeat: no-repeat;
  animation: skeletonmove 1s infinite linear forwards;
  position: relative;
}

[class^="skeleton"] {
  background-color: #f7f7f7;
  overflow: hidden;
}

@keyframes skeletonmove {
  0% {
    /* background-position: -468px 0; */
    transform: translateX(-468px);
  }
  100% {
    /* background-position: 468px 0; */
    transform: translateX(468px);
  }
}
/* list */
.list-dot li {
  position: relative;
  color: #888;
  padding-left: 7px;
  font-size: 12px;
  line-height: 20px;
  word-break: keep-all;
}

.list-dot li::before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  display: inline-block;
  background-color: #888;
  position: absolute;
  left: 0;
  top: 8px;
}

.list-bar li {
  position: relative;
  color: #666;
  padding-left: 7px;
  font-size: 15px;
  line-height: 26px;
}

.list-bar li::before {
  content: "";
  width: 4px;
  height: 1px;
  border-radius: 50%;
  display: inline-block;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 12px;
}

.list-bar li + li {
  margin-top: 8px;
}

.list-bar strong {
  color: #222;
}

.list-bar + .list-asterisk {
  margin-top: 8px;
}

.list-asterisk {
  font-size: 12px;
  color: #aaa;
  position: relative;
  padding-left: 7px;
  display: inline-block;
}

.list-asterisk::before {
  content: "*";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 2px;
}

/* form */
.form-group {
  position: relative;
}

.form-group [type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 24px;
  height: 24px;
}

.form-group [type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: 0 0 0 30px;
  display: inline-block;
  font-size: 16px;
  color: #888;
}

.form-group [type="checkbox"] + label::before {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat center;
  -webkit-mask-size: 15px auto;
  background-color: #ddd;
  border: none;
}

.form-group [type="checkbox"]:checked + label::before {
  background-color: #222;
  color: #222;
}

.form-group .inp-sub[type="checkbox"] + label {
  color: #888;
  font-size: 15px;
}

.form-group .chk-sm {
  font-size: 13px;
  color: #333;
  margin-right: 6px;
}

.form-group .chk-sm::before {
  content: "[";
}

.form-group .chk-sm::after {
  content: "]";
}

.form-group [type="checkbox"]:checked + label .chk-sm {
  color: #222;
}

.form-group.type-r {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
}

.form-group [type="radio"] {
  position: absolute;
  opacity: 0;
  width: 28px;
  height: 28px;
}

.form-group [type="radio"] + label {
  position: relative;
  cursor: pointer;
  padding: 0 0 0 38px;
  display: inline-block;
  font-size: 15px;
}

.form-group [type="radio"] + label::before {
  content: "";
  width: 28px;
  height: 28px;
  display: inline-block;
  border: var(--line-e6);
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: -5px;
}

.form-group [type="radio"] + label::after {
  content: "";
  background-color: #ddd;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat center;
  -webkit-mask-size: 15px auto;
  position: absolute;
  left: 0;
  top: -5px;
  width: 28px;
  height: 28px;
}

.form-group [type="radio"]:checked + label::before {
  background-color: #000;
  border-color: #000;
}

.form-group [type="radio"]:checked + label::after {
  background-color: #fff;
}

.layer-pop.tooltip-pop {
  position: initial;
}

.dim-toast {
  background-color: #000;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 9999;
}

/*
.ios .slide-content{
  padding-bottom:34px;
}
*/
.pop-content.al-left {
  padding: 0 8px;
}

.pop-content.al-left .pop-info-tit,
.pop-content.al-left .pop-info-txt,
.pop-content.al-left .label-text {
  text-align: left;
}

.modal-content.event {
  padding-top: 32px;
}

.slide-content .pop-info-tit.chk {
  margin-bottom: 16px;
}

.pop-info-txt {
  text-align: center;
  font-size: 17px;
  line-height: 24px;
  word-break: keep-all;
}

.pop-info-txt.em {
  font-weight: 700;
  line-height: 28px;
}

.pop-info-tit .form-group [type="checkbox"] + label {
  font-size: 18px;
  color: #222;
  font-weight: 700;
}

.slide-content .pop-info-tit {
  text-align: left;
  margin-left: 8px;
  margin-bottom: 24px;
}

.slide-content .trade-list .pop-info-tit {
  margin-left: 0;
}

.pop-info-txt .stock-name {
  font-size: inherit;
}

.pop-text-cont {
  font-size: 15px;
  color: #666;
  position: relative;
  line-height: 26px;
  word-break: keep-all;
}

.pop-text-cont .img-logo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.pop-text-cont + .pop-text-cont {
  margin-top: 16px;
}

.slide-content .pop-info-txt {
  font-weight: 700;
  font-size: 20px;
}

.slide-content .stock-name {
  font-size: 20px;
  margin-top: 8px;
}

.pop-content .trade-info-txt {
  margin: 40px 18px 10px;
}

.pop-content .trade-info-txt dl {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pop-content .trade-info-txt dl + dl {
  margin-top: 8px;
}

.pop-content .trade-info-txt .line-top {
  border-top: var(--line-f5);
  margin-top: 16px;
  padding-top: 16px;
}

.pop-content .trade-info-txt dt {
  color: #888;
  font-size: 15px;
}

.pop-content .trade-info-txt dd {
  font-size: 15px;
}

.attention {
  font-size: 13px;
  color: #aaa;
}

.page-last-logo .page-top::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  background: url(/inc/coinone/img/logo-korea.svg) no-repeat center;
  background-size: 56px auto;
  margin: auto auto 20px;
  position: relative;
}

/* font */
.numberB {
  font-size: 36px;
  line-height: 44px;
}

h1.title {
  font-size: 24px;
  line-height: 32px;
}

h2.title {
  font-size: 20px;
  line-height: 34px;
}

h3.title {
  font-size: 20px;
  line-height: 28px;
}

h4.title {
  font-size: 18px;
  line-height: 28px;
}

.sub-title1 {
  font-size: 17px;
  line-height: 24px;
}

.sub-title2 {
  font-size: 16px;
  line-height: 24px;
}

.sub-title22 {
  font-size: 16px;
  line-height: 32px;
}

.sub-title3 {
  font-size: 15px;
  line-height: 22px;
}

.sub-title33 {
  font-size: 15px;
  line-height: 26px;
}

.sub-title4 {
  font-size: 14px;
  line-height: 20px;
}

.desc-text1 {
  font-size: 14px;
  line-height: 20px;
}

.desc-text2 {
  font-size: 13px;
  line-height: 20px;
}

.desc-text3 {
  font-size: 12px;
  line-height: 20px;
}

.desc-text4 {
  font-size: 12px;
  line-height: 14px;
}

.text-cont {
  font-size: 16px;
  color: #666;
  margin-top: 4px;
}

.md-text2 {
  font-size: 16px;
  line-height: 24px;
}

.lg-text {
  font-size: 17px;
  line-height: 24px;
}

.lg2-text {
  font-size: 19px;
  line-height: 23px;
}

.md-text,
.text-cont-md {
  font-size: 15px;
  color: #666;
  margin-top: 4px;
  line-height: 26px;
}

.text-cont-sm {
  font-size: 14px;
  color: #222;
  line-height: 22px;
}

.text-cont-xs {
  font-size: 13px;
  color: #222;
  line-height: 20px;
}

.sm-text,
.order-date {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
  line-height: 20px;
}

.sm-text2 {
  font-size: 13px;
  color: #aaa;
  margin-top: 4px;
  line-height: 20px;
}

/* color */
.color-white {
  color: #fff !important;
}

.color-dark {
  color: #333 !important;
}

.color-dark2 {
  color: #222 !important;
}

.color-gray {
  color: #888 !important;
}

.color-green {
  color: #0baa7b !important;
}

/* bg color */
.bg-red2 {
  background-color: #ec5f5f;
}

.bg-white {
  background-color: #fff !important;
}

.bg-gray {
  background-color: #f7f7f7 !important;
}

.bg-none {
  background: transparent !important;
}

.bg-cyan2 {
  background: #009da7 !important;
}

.bg-cyan {
  background: #00bcca !important;
}

.last.bg-gray + .wrap-btn-fixed {
  background: #f7f7f7 !important;
}

/* 정렬 */
.ar-right {
  text-align: right;
}

.al {
  text-align: left !important;
}

.ac {
  text-align: center !important;
}

.mt0 {
  margin-top: 0 !important;
}

.mt4 {
  margin-top: 4px !important;
}

.mt8 {
  margin-top: 8px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt16 {
  margin-top: 16px !important;
}

.mt18 {
  margin-top: 18px !important;
}

.mt24 {
  margin-top: 24px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt32 {
  margin-top: 32px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt56 {
  margin-top: 56px !important;
}

.mt60 {
  margin-top: 60px !important;
}

.ml8 {
  margin-left: 8px !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mg0 {
  margin: 0 !important;
}

.mb6 {
  margin-bottom: 6px !important;
}

.mb16 {
  margin-bottom: 16px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb24 {
  margin-bottom: 24px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb56 {
  margin-bottom: 56px !important;
}

.mb60 {
  margin-bottom: 60px !important;
}

.mgb16 {
  margin: 0 !important;
  margin-bottom: 16px !important;
}

.pdt60 {
  padding-top: 60px !important;
}

.pdb50 {
  padding-bottom: 50px !important;
}

.pdt0 {
  padding-top: 0px !important;
}

.pdt8 {
  padding-top: 8px !important;
}

.pdt16 {
  padding-top: 16px !important;
}

.pdb0 {
  padding-bottom: 0px !important;
}

.pd-lr {
  padding-left: 0;
  padding-right: 0;
}

.flex-end {
  justify-content: flex-end;
}

.flex-center2 {
  display: flex;
  align-items: center;
}

.flex-column {
  flex-direction: column;
  align-items: flex-start;
}

.center-area {
  text-align: center;
  margin-top: 16px;
}

/* 넓이 */
.wid-zero {
  width: 0% !important;
}

.wid-S {
  width: 20% !important;
}

.wid-h {
  width: 50% !important;
}

.wid-m {
  width: 35% !important;
}

.wid-L {
  width: 70% !important;
}

.wid-XL {
  width: 80% !important;
}

.wid-max {
  width: 100% !important;
}

.link-txt-S {
  color: #f24538;
  text-decoration: underline;
}

.link-txt-line {
  text-decoration: underline;
}

.line-divider {
  height: 8px;
  background-color: #f7f7f7;
  margin: 32px -24px;
  display: block;
  position: relative;
  width: calc(100% + 48px);
}

.line-divider.mg40 {
  margin: 40px -24px;
}

.line-divider.sty01 {
  width: calc(100% + 32px);
  margin: 40px -16px;
}

.line-divider.sty02 {
  width: calc(100% + 32px);
  margin: 32px -16px;
}

.line-divider.sty03 {
  height: 1px;
  background-color: #eee;
  margin: 24px 0;
  display: block;
  position: relative;
  width: 100%;
}

.line-divider.sty04 {
  width: 100%;
  margin: 0;
}

.line-divider.mg-bottom {
  margin: 32px -24px 0;
}

input {
  font-family: inherit;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  display: block;
}

.list-bar-text {
  position: relative;
  color: #666;
  padding-left: 7px;
  font-size: 15px;
  line-height: 26px;
}

.list-bar-text::before {
  content: "";
  width: 4px;
  height: 1px;
  border-radius: 50%;
  display: inline-block;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 12px;
}

.list-bar li.color-red::before {
  background-color: #f24538;
}

.input-bg-wrap {
  position: relative;
}

.input-bg-wrap input {
  background-color: #f3f3f3;
  border: none;
  padding: 17px 16px;
  font-size: 15px;
  line-height: 22px;
}

.input-bg-wrap .input-clear {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: 0;
  width: 40px;
  height: 20px;
  transform: translateY(-10px);
}

input::-webkit-input-placeholder,
input::placeholder {
  color: #aaa;
}

.input-bg-wrap input[type="text"]:-ms-clear {
  display: none;
}

.select-form2 li.on.input-bg-wrap button::after {
  content: none;
}

table caption {
  display: none;
}

.list-asterisk {
  color: #888;
  font-size: 13px;
  display: block;
  line-height: 20px;
  padding-left: 10px;
}

.pop-content .list-asterisk {
  color: #aaa;
}

.btn-tooltip {
  width: 20px;
  height: 18px;
  margin-left: 2px;
}

/* .btn-tooltip{background-position-x: 4px;} */
.normal {
  font-weight: 400 !important;
}

.pop-content .list-bar li + li {
  margin-top: 4px;
}

/* 완료 로딩바 */
.loading-list-between li + li {
  margin-top: 0;
}

.list-loader {
  display: flex;
  justify-content: space-between;
  width: 100%;
  -webkit-flex: 1;
  flex: 1;
  padding: 14px 0;
}

.skeleton-list-dt {
  width: 30%;
  height: 20px;
}

.skeleton-list-dd {
  width: 50%;
  height: 20px;
}

/* button */
.bottom-content [class^="wrap-btn"] .btn-line {
  background-color: transparent;
}

.btn-md.btn-line.more-view {
  height: 40px;
  line-height: 40px;
}

.btn-md.bg-gray.btn-more {
  height: 40px;
  line-height: 40px;
  color: #222;
  border-radius: 8px;
  border-top: none;
  font-size: 15px;
  margin-top: 16px;
}

.btn-md.bg-gray.btn-more::after {
  content: none;
}

.wrap-btn-plus {
  margin: 32px 0 28px;
}

.wrap-btn-plus .btn-plus {
  font-size: 15px;
  font-weight: 700;
  position: relative;
  padding-left: 56px;
  text-align: left;
  display: flex;
  align-items: center;
  line-height: 48px;
}

.wrap-btn-plus .btn-plus::before {
  content: "";
  /* background: url('/inc/coinone/img/ico-plus.svg') center 50% no-repeat #f7f7f7; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-image: 12px auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 200px;
}

.bg-gray .agree-content + .wrap-btn-sticky {
  background-color: #f7f7f7;
}

.bottom-btn-content.wrap-btn-sticky {
  display: flex;
  flex-direction: column;
  padding: 0 0 30px;
}

.bottom-btn-content.wrap-btn-sticky .wrap-btn {
  margin: 0 16px;
  background: #fff;
}

.bottom-btn-content.wrap-btn-sticky [hidden] + .wrap-btn {
  background: linear-gradient(360deg, #fff 10%, rgba(255, 255, 255, 0) 50%);
}

.bottom-btn-content.wrap-btn-sticky .info-text {
  padding: 40px 0 16px;
  text-align: center;
  background: linear-gradient(360deg, #fff 37.22%, rgba(255, 255, 255, 0) 100%);
}

.bottom-btn-content.wrap-btn-sticky .info-text::before {
  content: "";
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  display: inline-block;
  left: -4px;
  top: 3px;
  background: #0083d1;
  /* -webkit-mask: url(/inc/coinone/img/icon-point.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

.bottom-btn-content.wrap-btn-sticky .info-text.text {
  color: #888;
  padding: 40px 0 16px;
  text-align: center;
  background: linear-gradient(360deg, #fff 37.22%, rgba(255, 255, 255, 0) 100%);
}

.bottom-btn-content.wrap-btn-sticky .info-text.text::before {
  content: none;
}

.bottom-btn-content .info-text {
  color: #0083d1;
}

.bottom-btn-content .info-text::before {
  content: "";
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  display: inline-block;
  left: 0;
  top: 3px;
  margin-right: 4px;
  background: #0083d1;
  /* -webkit-mask: url(/inc/coinone/img/icon-point.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

.btn-line-arr {
  padding-right: 10px;
  font-size: 14px;
  line-height: 18px;
}

.btn-line-arr::after {
  content: "";
  width: 6px;
  height: 10px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat 50% center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-5px);
}

.btn-line-sm {
  background-color: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  border: var(--line-dd);
  font-size: 14px;
  line-height: 18px;
}

.btn-line-sm.text {
  border: none;
  padding: 0;
  cursor: text;
}

.ipo[hidden] + .section-swiper,
.search-content + .section-swiper {
  margin-top: 24px;
}

.division {
  border-bottom: 10px solid #f7f7f7;
}

.contents > .section:first-child {
  margin-top: 8px;
  position: relative;
}

.section.division {
  margin-top: 16px !important;
  margin-bottom: 32px;
  padding-bottom: 40px;
  border-bottom: 10px solid #f7f7f7;
  background-color: #fff;
}

.section.division.text {
  margin-top: 8px;
  margin-bottom: 0;
  padding-bottom: 32px;
}

.section.division .rate-container {
  /* margin-top: 8px;  */
  margin-left: 8px;
}

.section.division2 {
  margin: 16px 16px 24px;
}

.section.division2 .section-inner {
  padding: 0 8px;
}

.section.division2 + .section {
  margin-top: 0px;
}

.landing.search-content,
.division.search-content {
  padding: 24px 0;
  margin: 0;
}

.landing.search-content form,
.division.search-content .search-wrap {
  margin: 0 16px;
}

[hidden] + .section {
  margin-top: 24px;
}

#serviceHome_content [hidden] + .section {
  margin-top: 40px;
}

.section.gap,
.section-swiper.gap,
.section.gap + .section.gap {
  margin: 60px 0 0 0;
}

.tab-content > .section,
.section.main,
.section.amount {
  margin: 0 !important;
}

.section .section-inner.last-banner {
  margin: 20px 0 0 0;
}

.section .section-inner.last-banner .title-wrap {
  margin: 0;
}

.section .section-inner.last-banner .btn-wrap-box {
  margin: 16px 0 0 0;
}

.section.last-banner .title-wrap {
  margin-bottom: 16px;
}

.section-password {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: calc(100vh - 56px);
}

.list + .footer {
  margin-top: 0;
}

.section-swiper.autoplay + .footer {
  margin-top: 40px;
}

.footer .section-swiper.autoplay {
  margin-top: 0px;
  margin-bottom: 40px;
}

.content-trade {
  margin: 16px 0 32px;
  text-align: center;
}

.section-input {
  padding: 0 16px;
}

.section-swiper {
  margin: 40px 0 0 0;
  flex: initial;
  background-color: #fff;
}

.section-swiper .title-wrap {
  margin: 0 16px 24px;
}

section + section {
  flex: 1;
}

.section-list {
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.section-list .no-result::before {
  background: #fff url(/inc/coinone/img/ico-mark.svg) no-repeat center;
  background-size: 3px auto;
}

.title-center {
  text-align: center;
  margin-top: 80px;
}

.search-wrap {
  position: relative;
}

.search-wrap .btn-search,
.search-wrap input {
  width: 100%;
  border: none;
  height: 56px;
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  color: #aaa;
  font-size: 16px;
  outline: none;
}

.search-wrap + .title-wrap {
  margin-top: 40px;
}

.search-form input {
  font-size: 16px;
  font-weight: 700;
}

.pop-content .search-wrap input {
  background: #f7f7f7;
  padding: 16px 40px 16px 16px;
}

.search-wrap input {
  color: #222;
}

.select-form2 li.on button.btn-clear::after {
  content: none;
}

.search-wrap input::placeholder {
  color: #aaa;
}

.search-wrap .btn-search {
  line-height: 1;
}

.list-stock + .wrap-btn {
  margin-top: 24px;
}

.full-pop .list-stock {
  margin-bottom: 60px;
}

/* .list-stock {margin-bottom: 28px;} */
.list-stock {
  margin-bottom: 24px;
}

.list-stock li {
  display: flex;
  align-items: center;
  padding: 4px 0;
}

.list-stock a {
  display: flex;
  align-items: center;
  width: 100%;
}

.list-stock li + li {
  margin-top: 24px;
}

.list-stock li[hidden] + li,
.list-stock-type li[hidden] + li {
  margin-top: 0;
}

.list-stock-type a {
  display: block;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.list-stock-type {
  padding: 16px 16px 0;
}

.list-stock-type .stock-per .stock-steady {
  color: #aaa;
}

.list-stock-type .title-wrap {
  margin: 16px 0;
}

/* 개발 id적용 */
#investListDiv.list-stock-type {
  margin-bottom: 60px;
}

.list-stock-type li + li {
  margin-top: 10px;
}

.list-stock-type li.unactive a,
.list-stock-type li.cancel a {
  background-color: #ebebeb;
}

.list-stock-type li.unactive .stock-title {
  color: #888;
}

.sortable .list-item.sortable-chosen {
  background-color: #fff;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  min-height: 76px;
}

.sortable .list-item.sortable-chosen.sortable-ghost {
  opacity: 0;
}

.list-account li {
  border-bottom: var(--line-ee);
}

.list-account li a {
  display: flex;
  padding: 24px 16px;
}

.list-account .transfer-date {
  font-size: 12px;
  color: #888;
  background-color: #e6e6e6;
  padding: 9px 16px;
}

.list-account .name-cont {
  max-width: 58%;
}

.list-account .name-cont .name {
  word-break: break-all;
}

.list-account .name-cont .name {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}

.list-account .name-cont .em {
  margin-right: 4px;
}

.list-account .name-cont .time {
  font-size: 12px;
  line-height: 14px;
  color: #888;
  margin-top: 4px;
}

.list-account .name-cont .time span + span {
  margin-left: 2px;
}

.list-account .amount {
  margin-left: auto;
  text-align: right;
}

.list-account .amount > p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.bottom-content {
  padding: 32px 16px 60px 16px;
  text-align: center;
  background-color: #f7f7f7;
}

.bottom-content.white-bg {
  background-color: #fff;
  padding-top: 0;
}

.ios .bottom-content {
  padding-bottom: 60px;
}

.bottom-content .info-text {
  font-size: 13px;
  color: #888;
  padding-top: 16px;
}

.stock-icon {
  width: 56px;
  height: 56px;
  text-align: center;
  line-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.stock-icon img,
.comm-icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
  max-width: initial;
  flex-shrink: 0;
}

.stock-icon span,
.comm-icon span {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  border-radius: 50%;
}

.list-stock .stock-icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-stock-type .stock-icon {
  width: 32px;
  height: 32px;
}

.list-stock-type li {
  position: relative;
}

.list-stock-type .wrap-btn.fix {
  position: absolute;
  right: 20px;
  top: 20px;
}

.stock-name {
  font-size: 15px;
  line-height: 22px;
  word-break: break-word;
}

.stock-name .stock-title {
  font-weight: 700;
  word-break: keep-all;
}

.stock-icon + .stock-name {
  margin: 0 8px;
  flex: 1;
  width: calc(100% - 180px);
}

.list-stock .stock-text .stock-name {
  width: calc(100% - 65px);
}

.main-list .list-stock .stock-text .stock-name {
  width: calc(100% - 80px);
}

.main-list .list-stock .stock-text .stock-name .text-sm {
  line-height: 16px;
}

.list-stock.type-top .stock-name {
  width: 100%;
}

.list-stock .stock-text .stock-name .ellipsis {
  display: block;
}

.list-stock .stock-text .stock-name .text-level .label {
  border: none;
  margin-top: 8px;
  position: relative;
  line-height: 20px;
  height: auto;
}

.section-swiper.main-list .banner-guide {
  margin: 34px auto 0;
  width: calc(100% - 32px);
}

/* 종목명 리스트 제외인 경우 */
.category-slider .stock-icon + .stock-name {
  width: auto;
}

.list-stock .stock-per {
  text-align: right;
}

.stock-per {
  margin-left: auto;
  font-size: 15px;
  min-width: 65px;
}

.stock-per .price {
  font-weight: 700;
}

.stock-per .stock-steady {
  color: #222;
}

.stock-name .stock-per {
  font-size: 12px;
  margin-left: 4px;
  text-align: left;
}

.stock-name .stock-per .stock-steady {
  color: #222;
}

.category-slider .stock-per {
  font-size: 13px;
}

.category-slider .tag-text {
  background-color: #f7f7f7;
  border-radius: 8px;
  height: 50px;
  line-height: 50px;
  min-width: 110px;
  padding: 0 24px;
}

.list-stock-type .stock-per {
  line-height: 20px;
  position: relative;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
}

.list-stock-type .stock-per .date {
  font-size: 12px;
  color: #888;
  font-weight: 700;
  margin-top: 0px;
  display: flex;
  align-items: flex-end;
  line-height: 10px;
}

/* 신용 적용 후 삭제 */
.list-stock-type .stock-per .date + [class^="stock"] {
  margin-top: 0px;
}

.list-stock-type .stock-per .d-day {
  position: relative;
  color: #f24538;
  padding-left: 10px;
  display: inline-block;
}

.list-stock-type .stock-per .d-day::before {
  content: "";
  width: 2px;
  height: 2px;
  background-color: #888;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.list-stock-type .stock-per [class^="stock"] {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
}

.account-copy {
  height: 24px;
  margin-top: 16px;
}

.account-copy button {
  color: #666;
  font-size: 12px;
  line-height: 24px;
}

.account-copy button:disabled {
  background-color: transparent !important;
  color: #666 !important;
}

.price-cont {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 0;
  height: 24px;
}

.price-cont .count {
  font-size: 13px;
  color: #888;
  display: inline-flex;
  line-height: 20px;
}

.price-cont .price {
  font-size: 17px;
  color: #000;
  font-weight: 700;
}

.stock-top {
  display: flex;
  align-items: center;
}

.stock-top .stock-name {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1;
}

.stock-top .stock-icon + .stock-name {
  margin-left: 4px;
  margin-right: 0;
  overflow: hidden;
}

.stock-top .stock-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.stock-top .stock-title,
.order-list .stock-name {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  margin-right: 4px;
}

.label {
  border: var(--line-dd);
  border-radius: 2px;
  font-size: 10px;
  color: #888;
  padding: 0 6px;
  height: 18px;
  line-height: 16px;
  margin-right: 4px;
  border-width: 1px;
  flex: none;
  display: inline-block;
}

.trade-list .label {
  margin-bottom: 8px;
}

.label.case2 {
  color: #f24538;
  border-color: rgba(242, 69, 56, 0.6);
}

.label.case3 {
  color: #0083d1;
  border-color: rgba(0, 131, 209, 0.6);
}

.label.case-bg {
  background-color: #f24538;
  color: #fff;
  border-color: #f24538;
}

.stock-top .label-text {
  margin-left: auto;
  font-size: 13px;
  color: #888;
}

.stock-trade {
  margin-top: 16px;
  text-align: right;
}

.stock-trade [class^="stock-"] {
  font-size: 15px;
  font-weight: 700;
}

.stock-trade [class^="stock-"] span + span::before {
  content: "·";
  margin: 0 2px;
}

li.cancel .stock-trade [class^="stock-"] {
  position: relative;
  display: inline-block;
  color: #c4c4c4;
}

li.cancel .stock-trade [class^="stock-"]::before {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #c4c4c4;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.chart-content .favorite {
  margin: 6px 0 0 0;
  line-height: 0;
}

.chart-content .refresh {
  margin-top: 2px;
}

.wrap-chart {
  position: absolute;
  right: 0;
  bottom: 0;
}

.rate-container {
  position: relative;
}

.rate-container .total {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.rate-container .price {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.rate-container .price-wrap {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.btn-refresh {
  width: 24px;
  height: 24px;
  /* background: url(/inc/coinone/img/ico-refresh.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 14px 14px;
}

.rate-container .price-wrap .btn-refresh {
  width: 24px;
  height: 24px;
  background-color: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/ico-refresh.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 14px 14px;
  background-image: none;
}

.rate-container .price-wrap .btn-refresh:disabled {
  background-color: #e6e6e6 !important;
}

.rate-container [class^="stock-"] {
  font-size: 15px;
  line-height: 22px;
  display: inline-block;
  position: relative;
  padding-left: 16px;
  margin-top: 4px;
  font-weight: 700;
  color: #aaa;
}

.rate-container [class^="stock-"]::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 6px;
}

.rate-container .stock-increase::before {
  /* background: url(/inc/coinone/img/ico-arrow-plus.svg) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 12px 9px;
  width: 12px;
  height: 9px;
}

.rate-container .stock-decrease::before {
  /* background: url(/inc/coinone/img/ico-arrow-minus.svg) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 12px 9px;
  width: 12px;
  height: 9px;
}

.rate-container .stock-steady {
  padding-left: 0;
}

.rate-container .stock-upper {
  color: #f24538;
}

.rate-container .stock-upper::before {
  /* background: url(/inc/coinone/img/ico-arrow-upper.svg) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
  top: 2px;
}

.rate-container .stock-lower {
  color: #0083d1;
}

.rate-container .stock-lower::before {
  /* background: url(/inc/coinone/img/ico-arrow-lower.svg) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
  top: 3px;
}

.rate-container.fixed {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 5;
  height: 90px;
  animation: moveTop 0.3s ease-in;
}

.h-column .header-right {
  position: absolute;
  right: 16px;
  display: flex;
  align-items: center;
}

@keyframes moveTop {
  0% {
    height: 120px;
  }
  100% {
    height: 90px;
  }
}
/* 차트내에 나오는 시가/종가 박스 */
/* 개발은 highcharts.css 에 있음 */
.float-box {
  background-color: #222;
  border-radius: 8px;
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: absolute;
  width: 100%;
}

.float-box dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.float-box dl + dl {
  margin-top: 2px;
}

.float-box dt {
  font-size: 12px;
  color: #888;
  margin-right: 24px;
}

.float-box dd {
  color: #fff;
}

.top-content {
  padding: 40px 16px;
  text-align: center;
}

.top-content.list {
  padding: 24px 24px 40px;
}

.top-content .inner {
  padding: 0 16px;
}

.top-content .inner .label-text {
  font-size: 14px;
  line-height: 18px;
}

.top-content .price > span {
  font-size: 24px;
}

.top-content .price-wrap {
  justify-content: center;
  margin-top: 0;
}

.top-content .label-text + .price-wrap {
  margin-top: 4px;
}

.top-content.list .label-text + .price-wrap {
  margin-top: 2px;
}

.top-content .standard {
  font-size: 13px;
  color: #888;
  margin-top: 2px;
}

.summary-list {
  margin-top: 40px;
}

.summary-cell + .summary-cell,
.ipo-wrap [hidden] + .summary-cell {
  border-top: var(--line-ee);
  margin: 24px 0 0;
  padding-top: 24px;
}

[hidden] + .summary-cell {
  border-top: 0;
  margin: 0;
  padding: 0;
}

.summary-cell .cell-em {
  color: #f24538;
  font-weight: 700;
}

.summary-cell .chk-toggle + dl {
  margin-top: 12px;
}

.summary {
  text-align: center;
  border-top: var(--line-ee);
  margin: 24px 0 0;
  padding-top: 24px;
}

.summary dl,
.summary-cell dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.summary-cell dl + dl {
  margin-top: 10px;
}

.summary dl + dl {
  margin-top: 8px;
}

.summary dl dt {
  color: #888;
  font-weight: 400;
}

.summary-cell dl dt {
  align-items: center;
  text-align: left;
  color: #888;
  font-size: 15px;
  line-height: 22px;
  display: flex;
}

.summary-cell dl dd {
  font-size: 15px;
  text-align: right;
}

/* 23-02-24 */
.icon-arr-right {
  position: relative;
  padding-right: 14px;
  display: block;
}

.icon-arr-right::after {
  content: "";
  width: 6px;
  height: 10px;
  display: inline-block;
  background: #222;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat 50% center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-5px);
}

.icon-arr-right.gray::after {
  background: #666;
  right: 4px;
}

.summary-cell .cell-tit {
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  margin-bottom: 10px;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.summary-cell.cell-tit dl dd {
  font-size: 20px;
  line-height: 34px;
}

.summary-cell.cell-tit dl dt {
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  color: #222;
}

.top-content .flex-box {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.top-content .flex-box .price-wrap {
  justify-content: left;
}

.top-content .flex-box + .summary-list {
  margin-top: 32px;
}

.top-content .flex-box .form-group {
  margin-top: -6px;
}

.top-content .flex-box .label-text {
  color: #222;
  font-weight: 700;
}

.top-content .flex-box .date {
  font-size: 12px;
  line-height: 20px;
  color: #aaa;
  font-weight: 400;
  margin-top: 8px;
}

/* 23-02-24 */
/* 메인 슬라이드 배너 start */
.event-slide-area {
  padding: 0;
  background-color: transparent;
  border-radius: 20px;
  width: 100%;
}

.event-slide-area .swiper-wrapper {
  margin-bottom: 24px;
}

.event-slide-area .swiper-wrapper .swiper-slide {
  width: calc(100% - 64px);
  max-width: 622px;
}

.event-slide-area .swiper-wrapper .swiper-slide a img {
  border-radius: 20px 20px 0 0;
}

.event-slide-area .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.3;
}

.event-slide-area .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fff;
  opacity: 1;
}

.event-slide-area .swiper-pagination {
  bottom: -4px;
}

/* 메인 슬라이드 배너 end */
.summary dl .em {
  color: #222;
  font-weight: 700;
}

.chk-toggle {
  text-align: right;
}

.chk-toggle.form-group [type="checkbox"] + label {
  border-radius: 100px;
  height: 28px;
  line-height: 27px;
  border: 1px solid #aaa;
  padding: 0 8px 0 28px;
  font-size: 12px;
  color: #666;
}

.chk-toggle.form-group [type="checkbox"] + label::before {
  width: 20px;
  height: 20px;
  left: 8px;
  top: 3px;
  -webkit-mask-size: 12px auto;
  background-color: #888;
}

.chk-toggle.form-group [type="checkbox"]:checked + label {
  color: #fff;
  font-weight: 700;
  background-color: #222;
  border-color: #222;
}

.chk-toggle.form-group [type="checkbox"]:checked + label::before {
  background-color: #fff;
}

.period-view .option,
.option {
  border-top: var(--line-f5);
  border-bottom: var(--line-f5);
  text-align: right;
  width: 100%;
  background-color: #fff;
  padding: 12px 20px;
}

.option.tab {
  background-color: #fff;
  border: none;
  width: 100%;
}

.option.tab.active {
  color: #222;
}

.option button {
  font-size: 13px;
  border-bottom: 1px solid #222;
  position: relative;
  overflow: initial;
  display: inline-flex;
}

.option.select button {
  color: #aaa;
  border-bottom: var(--line-aa);
}

.option.select button.on {
  color: #222;
  border-bottom: 1px solid #222;
}

.option button span {
  position: relative;
}

.option button + button,
.option button span + span {
  margin-left: 10px;
}

.price-cont .count span {
  position: relative;
}

.price-cont .count span + span {
  margin-left: 9px;
}

.price-cont .count span + span::before,
.option button + button::before,
.option button span + span::before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #222;
  display: inline-block;
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
}

.price-cont .count span + span::before {
  background-color: #888;
}

.option button.on::before,
.option button.on span::before {
  background-color: #222;
}

.category-option button + button::before {
  content: "";
  width: 2px;
  height: 2px;
  background-color: #999;
  border-radius: 50%;
  display: inline-block;
  margin: 0 5px;
  vertical-align: middle;
}

.category-option {
  border-top: var(--line-ee);
  border-bottom: var(--line-ee);
  padding: 12px 20px;
  text-align: right;
}

.category-option button {
  font-size: 13px;
  color: #666;
  text-decoration: underline;
}

.category-option button.on {
  color: #222;
}

.option-list + dl {
  margin-top: 32px;
}

.option-list dt {
  text-align: center;
  color: #888;
  margin-bottom: 16px;
}

.stock-order {
  padding: 41px 16px 40px;
}

.stock-order [class^="wrap-btn"] [class^="btn-"] {
  border-radius: 8px;
}

.stock-order [class^="wrap-btn"] [class^="btn-"] + [class^="btn-"] {
  margin-left: 4px;
}

.order-count {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  position: relative;
}

.order-count dt {
  font-size: 13px;
  color: #888;
}

.order-count dd {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}

.order-count dl + dl {
  margin-left: 134px;
}

.order-count::before,
.order-count::after {
  content: "";
  width: 14px;
  height: 1px;
  background-color: #494949;
  display: inline-block;
  position: absolute;
}

.order-count::before {
  transform: rotate(45deg);
  top: calc(50% - 5px);
}

.order-count::after {
  transform: rotate(-45deg);
  top: calc(50% + 5px);
}

.chart-content {
  padding: 16px 16px 0;
  position: relative;
  background-color: #fff;
}

.chart-content .rate-container {
  margin-bottom: 28px;
  margin: 0 8px;
}

.chart-info .chart-stock-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  margin-right: 4px;
}

.chart-info .chart-stock-name {
  font-size: 24px;
  line-height: 32px;
  transition: all 0.3s;
  margin-right: 8px;
  word-break: break-all;
}

.chart-info .chart-flex {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
  margin-bottom: 4px;
  position: relative;
}

header .chart-flex .chart-stock-name {
  font-size: 13px;
  line-height: 20px;
  margin: 0;
}

.rate-container .chart-info [class^="stock-"] {
  font-size: 13px;
  line-height: 20px;
}

.rate-container .chart-info [class^="stock-"]::before {
  top: 5px;
}

.rate-container .chart-info .stock-steady::before {
  top: 8px;
}

.rate-container .chart-info .stock-upper::before {
  top: 4px;
}

.label-tip {
  font-size: 12px;
  position: absolute;
  top: -40px;
  right: 0;
  background-color: #666;
  color: #fff;
  padding: 5px 12px;
  border-radius: 8px;
  line-height: 20px;
}

.label-tip.em {
  background-color: #f24538;
  font-weight: 400;
}

.label-tip .point {
  display: block;
  position: absolute;
  border-top-right-radius: 30%;
  transform: rotate(-120deg) skewX(-30deg) scale(1, 0.866);
  background-color: #666;
  width: 8px;
  height: 8px;
  right: 14px;
  bottom: 0;
}

.label-tip .point::before,
.label-tip .point::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: inherit;
}

.label-tip.em .point {
  background-color: #f24538;
}

.label-tip .point::before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
  border-top-right-radius: 30%;
}

.label-tip .point::after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
  border-top-right-radius: 30%;
}

.wrap-btn.label-in {
  position: relative;
  text-align: initial;
}

.wrap-btn.label-in .label-tip {
  right: 50%;
  transform: translateX(50%);
  min-width: fit-content;
}

.wrap-btn.label-in .label-tip .point {
  right: calc(50% - 5px);
}

.wrap-btn-fixed.left {
  position: relative;
  margin-top: 40px;
}

.wrap-btn-fixed.left .label-tip {
  left: 16px;
  right: auto;
}

.wrap-btn-fixed.left .label-tip .point {
  left: 14px;
}

.chart-wrap {
  margin: 24px 0 0;
}

.tooltip-cont {
  display: inline-block;
  line-height: initial;
  font-size: 12px;
  vertical-align: middle;
}

[class*="tooltip-label"] {
  height: 18px;
  border-radius: 2px;
  padding: 0 6px;
  line-height: 18px;
  font-size: 10px;
  display: inline-block;
  color: #fff;
}

.tooltip-label {
  background-color: #0083d1;
}

.tooltip-label2 {
  background-color: #ffe300;
  color: #000;
}

.tooltip-label3 {
  background-color: #f24538;
}

.tooltip-label4 {
  background-color: #000;
}

.tooltip-label5 {
  color: #222;
  background-color: #f5f5f5;
}

/* 삭제영역 */
.flex-box .tooltip-text {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.flex-box .tooltip-text strong {
  color: #000;
}

.flex-box .tooltip-text .btn-tooltip {
  width: auto;
  background-position: right center;
  padding-right: 20px;
}

.flex-box .tooltip-text .text-al {
  font-size: 13px;
  color: #666;
  position: relative;
}

.flex-box .tooltip-text .text-al span {
  margin-left: 2px;
}

.flex-box .tooltip-text .text-al + .text-al::before {
  content: "·";
  margin-left: 3px;
  margin-right: 3px;
}

/* // 삭제영역 */
.tooltip-text-button {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.tooltip-text-button .btn-tooltip {
  width: auto;
  background-position: right center;
  padding-right: 20px;
}

.tooltip-text-button .text-al {
  font-size: 13px;
  color: #666;
  position: relative;
}

.tooltip-text-button .text-al span {
  margin-left: 2px;
}

.tooltip-text-button .text-al + .text-al::before {
  content: "·";
  margin-left: 3px;
  margin-right: 3px;
}

.tooltip-view {
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 12px 16px;
  position: absolute;
  background-color: #fff;
  font-size: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 4px;
  display: none;
  z-index: 12;
}

.tooltip-view.left {
  left: 16px;
}

.tooltip-view.left2 {
  left: 0px;
}

.tooltip-view.left3 {
  left: 32px;
}

.tooltip-view[class*="left"] {
  max-width: 80%;
  margin-top: 8px;
  padding: 12px 16px;
  width: auto;
}

.tooltip-view.right {
  right: 16px;
  max-width: 65%;
  margin-top: 8px;
  text-align: left;
  padding: 12px 16px;
}

.tooltip-view.open {
  display: flex;
}

.tooltip-view.auto {
  bottom: -90px;
  position: absolute;
}

.tooltip-view.auto .tooltip-text {
  width: 108px;
}

.tooltip-view.left .tooltip-text strong {
  color: #222;
}

.tooltip-view.center {
  left: 50%;
  max-width: 80%;
  margin-top: 8px;
  padding: 12px 16px;
  width: auto;
  transform: translateX(-50%);
}

.tooltip-text {
  font-size: 12px;
  color: #666;
  line-height: 20px;
  word-break: keep-all;
  font-weight: 400;
}

.fixed .chart-info .chart-stock-name {
  font-size: 16px;
  margin: 0;
  animation: fontSize 0.3s ease-in-out;
}

@keyframes fontSize {
  0% {
    font-size: 24px;
  }
  100% {
    font-size: 16px;
  }
}
.chart-period {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 14px;
  align-items: center;
  margin: 0 0 32px;
}

.chart-period button {
  font-size: 13px;
  color: #888;
  text-align: center;
  width: 34px;
  height: 24px;
  line-height: 22px;
  border-radius: 6px;
}

.chart-period button:disabled {
  color: #ddd !important;
  background-color: transparent !important;
}

@media screen and (max-width: 374px) {
  .chart-period button {
    width: auto;
  }
}
.chart-period button.on {
  color: #fff;
  background-color: #222;
}

.period-view {
  display: flex;
  justify-content: space-between;
}

.period-view > div {
  padding: 16px 20px 0;
}

.period-view + .no-result {
  height: calc(100% - 80px);
}

.period {
  font-size: 13px;
  color: #888;
  text-align: right;
  margin-left: auto;
}

.period.left {
  margin: 0;
}

.invest-info {
  margin-top: 60px;
}

.invest-info .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.invest-info .info dl dt {
  font-size: 12px;
  line-height: 14px;
  color: #aaa;
}

.invest-info .info dl dd {
  font-size: 13px;
  color: #222 !important;
  font-weight: 700;
  margin-top: 5px;
}

.invest-info .info dl + dl dt {
  text-align: right;
}

.bar-range {
  width: 100%;
  height: 20px;
  background-color: #e6e6e6;
  border-radius: 100px;
  position: relative;
}

.bar-range .bar {
  width: 4px;
  height: 20px;
  background-color: #222;
  position: absolute;
  top: 0;
  margin-left: -2px;
}

.bar-range + .list-type {
  margin: 20px 8px;
}

.list-type {
  margin: 0 8px;
}

.list-type dl {
  display: flex;
  align-items: center;
}

.list-type dl {
  padding: 12px 0;
}

.list-type dl + dl {
  border-top: var(--line-f5);
}

.list-type dt {
  min-width: 90px;
  color: #888;
}

.list-type1 + .list-wrap {
  margin-top: 40px;
}

.list-type1 .list-tit {
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid #0b0b0b;
  padding-bottom: 4px;
}

.list-type1 + .list-type1 {
  margin-top: 40px;
}

.list-type1 dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: var(--line-f5);
}

.list-type1 dt {
  min-width: 90px;
  color: #888;
  text-align: left;
  line-height: 18px;
}

.list-type1 dd {
  line-height: 18px;
  text-align: right;
}

.list-type1 dd .result span {
  display: block;
}

.list-type2 dd {
  color: #888;
}

.list-type2 dd .info-blue {
  color: #0083d1 !important;
  font-weight: 700;
}

.list-type2 dd .info-red {
  color: #f24538 !important;
  font-weight: 700;
}

.list-type2 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.list-type2 dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  border-bottom: var(--line-ee);
  font-size: 15px;
  line-height: 22px;
}

.list-type2.flex-top dl {
  align-items: flex-start;
}

.list-type2.flex-top dt {
  font-weight: 400;
}

.list-type2.flex-top dd {
  margin-top: 0;
}

.list-type2.flex-top dl + dl {
  margin-top: 0;
}

.list-type2 dl:first-child {
  border-top: var(--line-ee);
}

.list-type2 dt {
  min-width: 90px;
  color: #222;
  text-align: left;
}

.list-type2.short {
  text-align: right;
  margin-top: 0;
}

.list-type2.short dl + dl {
  border-top: var(--line-ee);
}

.list-type2.short dl {
  border: none;
  padding: 16px 0;
}

.list-type2.short dl:first-child {
  padding-top: 0;
  margin-top: 0;
}

.invest-banner {
  height: 80px;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.invest-banner .link-arrow {
  padding: 18px 40px 18px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  background-color: #f7f7f7;
  width: 50%;
  height: 100%;
}

.invest-banner .link-arrow + .link-arrow {
  margin-left: 8px;
}

.invest-banner .bnr-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.link-arrow {
  display: block;
  position: relative;
}

.link-arrow::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.link-arrow2 {
  display: block;
  position: relative;
}

.link-arrow2::after {
  content: "";
  width: 18px;
  height: 8px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-bottom.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 10px auto;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.invest-banner .bnr-cont {
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.news-list li + li {
  margin-top: 24px;
}

.news-list li a {
  display: flex;
  justify-content: space-between;
}

.news-list .news-title {
  font-size: 15px;
  font-weight: 400;
}

.news-list .news-img {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background-color: #494949;
  margin-left: 70px;
}

.news-list .news-text {
  flex: 1;
}

.news-list .time-name {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
}

.news-list .time-name .name {
  position: relative;
}

/* .news-list .time-name .name::before {content: '·'; margin-right: 2px;} */
.news-list .time-name .name::before {
  content: "/";
  margin-right: 2px;
}

.notice-wrap.bottom {
  padding-bottom: 150px;
}

.notice-wrap.bottom2 {
  padding: 24px 16px 60px;
  margin-top: 60px;
}

.notice-wrap h2 {
  font-size: 15px;
  color: #aaa;
}

.wrap-btn-notice .title-wrap {
  margin-bottom: 16px;
}

.header-stock {
  width: 100%;
  text-align: center;
}

.header-stock .stock-name {
  font-size: 13px;
  line-height: 20px;
  display: block;
}

.header-stock .stock-per {
  font-size: 14px;
  line-height: 18px;
}

.acount-num {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
  font-size: 13px;
}

.acount-num .num {
  margin-left: 4px;
}

.acount-num .bank-logo {
  display: inline-block;
  margin-right: 4px;
  width: 24px;
  height: 24px;
}

.trade-cell + .trade-cell {
  margin-top: 8px;
}

.trade-info {
  text-align: center;
  height: calc(100vh - 476px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.trade-info.transfer {
  height: calc(100vh - 542px);
}

.trade-info.transfer + .label-round {
  margin-bottom: 48px;
}

.trade-info .info-text {
  font-size: 36px;
  line-height: 44px;
  color: #d8d8d8;
  margin-bottom: 8px;
}

.trade-info .output {
  font-size: 36px;
  line-height: 44px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.trade-info .price {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
}

.trade-list {
  margin: 0 8px;
  word-break: keep-all;
}

.trade-list .pop-info-txt {
  font-size: 20px;
  font-weight: 700;
  text-align: left;
  display: block;
  position: relative;
  padding-bottom: 24px;
}

.trade-list .pop-info-txt.left {
  font-size: 18px;
}

.trade-list a.pop-info-txt {
  padding-right: 30px;
}

.trade-list a.pop-info-txt::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #222;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 8px auto;
  position: absolute;
  right: 0;
  top: 2px;
}

.trade-list a.pop-info-txt.icon-del::after {
  content: none;
}

.trade-list .list-bar .list-won li {
  position: relative;
  padding-left: 8px;
  margin-top: 0px;
}

.trade-list .list-bar .list-won li::before {
  content: "";
  width: 2px;
  height: 2px;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-2px);
}

.trade-cell.add-list {
  display: none;
  border-top: none;
  padding: 0;
}

.trade-cell:last-child {
  padding-bottom: 0;
}

.trade-cell dl + dl {
  margin-top: 8px;
}

.trade-cell dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.trade-cell dt {
  color: #666;
}

.trade-cell .d-day {
  color: #aaa;
  margin-right: 6px;
  font-weight: 400;
}

.trade-cell .d-day.days {
  color: #f24538;
  font-weight: 700;
}

.list-wrap + .list-wrap {
  margin-top: 24px;
}

.list-wrap dt {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 8px;
}

.trade-list.list .list-wrap dd {
  position: relative;
  color: #666;
  font-size: 15px;
  line-height: 26px;
}

.trade-list.list .list-wrap dd p.list-asterisk {
  display: block;
  line-height: 20px;
  margin-top: 4px;
}

.trade-list.list .list-wrap dd table {
  color: #222;
}

.pop-info-tit.chk .link-arr::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #222;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 8px auto;
  position: absolute;
  right: 0;
  top: 2px;
}

/* bullet List */
.list-wrap .list-bull li {
  position: relative;
  padding-left: 8px;
  margin-top: 0px;
  color: #666;
  font-size: 15px;
  line-height: 26px;
}

.list-wrap .list-bull li::before {
  content: "";
  width: 3px;
  height: 3px;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 10px;
  border-radius: 10px;
}

.list-wrap .list-bullet li {
  position: relative;
  color: #666;
  padding-left: 7px;
  font-size: 13px;
}

.list-wrap .list-bullet li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  display: inline-block;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 7px;
  border-radius: 10px;
}

.list-wrap .list-bullet li + li {
  margin-top: 4px;
}

.label-text {
  font-size: 13px;
  line-height: 20px;
  color: #888;
  text-align: center;
}

.label-text.fail {
  color: #222;
}

.label-text.fail strong {
  margin: 0 2px;
  color: #f24538;
}

.line-break {
  display: block;
}

.line-break + .line-break {
  margin-top: 4px;
}

.pop-content .label-text {
  margin-top: 8px;
}

.label-round {
  font-size: 13px;
  font-weight: 700;
  background-color: #f7f7f7;
  border-radius: 30px;
  height: 32px;
  line-height: 32px;
  padding: 0 14px;
  display: inline-block;
}

.text-line {
  font-size: 13px;
  color: #888;
  text-decoration: underline;
}

.text-line + .filter {
  margin-left: 10px;
  margin-top: -1px;
}

.filter + .text-line {
  margin-left: 10px;
  margin-top: -1px;
}

.label-text + .flex-center,
.label-text + .text-line {
  margin-top: 8px;
}

.input-btn-wrap {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 90px;
}

.input-buttons {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 0 calc(33.33% - 60px);
  padding: 0 28px 36px; /* position:fixed; width:calc(100% - 96px); left:0; bottom:92px; */
}

.pop-content .input-btn-wrap {
  position: relative;
  bottom: 0;
}

.pop-content .input-buttons {
  padding: 0;
}

.input-buttons .btns {
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-buttons button {
  width: 60px;
  height: 60px;
  font-size: 20px;
  font-weight: 700;
  position: relative;
  border-radius: 50%;
}

.input-buttons button.active {
  background-color: #f1f1f1;
}

.input-buttons .del-all {
  font-size: 14px;
  font-weight: 400;
}

.input-buttons button img {
  margin: auto;
}

.input-buttons .zero {
  grid-row: 4;
  grid-column: 2;
}

.input-buttons .del {
  grid-row: 4;
  grid-column: 3;
}

.input-buttons .btn-delete {
  width: 60px;
  height: 60px;
  background-color: #f1f1f1;
  /* background: url(/inc/coinone/img/ico-delete.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
}

.wrap-btn.control {
  margin: 32px auto 40px;
  justify-content: center;
}

.wrap-btn.control button {
  min-width: 62px;
}

.wrap-btn.control .minus {
  /* background: url(/inc/coinone/img/ico-minus.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
}

.wrap-btn.control .plus {
  /* background: url(/inc/coinone/img/ico-plus.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
}

/* 폴드폰 접힘 */
@media screen and (max-width: 280px) {
  .banner-wrap .txtarea,
  .banner-wrap .txtarea .banner-txt {
    font-size: 14px !important;
    line-height: 20px;
  }
}
/* 아이폰 se */
@media screen and (max-width: 320px) {
  .trade-info {
    height: calc(100vh - 402px);
  }
  .trade-info .info-text {
    font-size: 24px;
    line-height: 32px;
  }
  .input-buttons {
    padding: 24px 32px;
    grid-gap: 0 calc(33.33% - 48px);
  }
  .input-buttons button,
  .input-buttons .btn-delete {
    height: 40px;
  }
  .trade-info.transfer {
    height: calc(100vh - 450px);
  }
  .trade-info.transfer + .label-round {
    margin-bottom: 16px;
  }
}
.over-scroll {
  overflow: hidden;
  overflow-x: scroll;
  margin: 24px 0 0;
}

.over-scroll::-webkit-scrollbar {
  display: none;
}

.over-scroll .wrap-btn {
  width: auto;
  display: inline-flex;
  white-space: nowrap;
  padding: 0 16px;
}

.over-scroll [class^="wrap-btn"] [hidden] + [class^="btn-"] {
  margin-left: 8px;
}

.flex-wrap {
  margin: 16px 12px 0;
}

.flex-wrap .wrap-btn {
  display: flex;
  flex-wrap: wrap;
}

.flex-wrap .wrap-btn button {
  margin: 4px !important;
}

.list-qna li {
  background-color: #fff;
  padding: 0 16px;
}

.list-qna.accordion li {
  border-top: var(--line-f5);
}

.list-qna.accordion li:last-child {
  border-bottom: var(--line-f5);
}

.list-qna li.on {
  background-color: #f7f7f7;
}

.list-qna li .title {
  font-size: 16px;
  line-height: 24px;
  position: relative;
  padding-left: 20px;
  word-break: keep-all;
}

.list-qna li .title::before {
  content: "Q";
  font-size: 17px;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

.list-qna li a {
  padding: 32px 0;
  display: block;
  border-top: var(--line-e6);
}

.list-qna.accordion li a {
  border-top: none;
}

.list-qna .list-sub {
  margin: 24px 0 0 24px;
  display: none;
  font-size: 15px;
  line-height: 26px;
  color: #666;
  word-break: keep-all;
}

.list-news,
.list-notice {
  padding: 0 16px;
}

.list-news li + li,
.list-notice li + li {
  border-top: var(--line-ee);
  min-height: 100px;
}

.list-news li:last-child {
  border-bottom: var(--line-ee);
}

.good-tip .list-news li:last-child {
  border-bottom: none;
}

.list-news li[hidden] + li,
.list-notice li[hidden] + li {
  border-top: none;
}

.list-news li .list-title,
.list-notice li .list-title {
  padding-right: 40px;
  line-height: 24px;
}

.list-news li a,
.list-notice li a {
  padding: 24px 0;
  display: block;
  font-size: 16px;
  position: relative;
}

.list-news .link-arrow::after,
.list-notice .link-arrow::after {
  right: 0;
}

.list-news .desc,
.list-news .desc .date,
.list-news .desc .company {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}

/* .list-news .desc .company::before {content: ''; width: 1px; height: 1px; background-color: #888; display: inline-block; vertical-align: middle; margin-right: 2px;} */
.list-news .desc .company::before {
  content: "/";
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px 0 0;
}

.list-notice li .date {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}

/* 투자꿀팁 */
.list-news .news-img a {
  display: flex;
  align-items: center;
}

.list-news .news-img .img-area {
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 8px;
  text-align: center;
  line-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-right: 16px;
}

.list-news .news-img .img-area span {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #f7f7f7;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f7f7f7;
}

.list-news .news-img .img-area::before {
  content: "";
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #f7f7f7;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background-color: #f7f7f7;
}

.list-news .news-img .img-area img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
  max-width: initial;
  flex-shrink: 0;
}

.list-news .desc {
  font-size: inherit;
  margin-top: 0;
  width: calc(100% - 100px);
}

.list-news .desc .list-title {
  color: #222;
}

.news-view .title-box.i-new::before,
.list-news .i-new::after {
  content: "NEW";
  background-color: rgba(242, 69, 56, 0.08);
  color: #f24538;
  border-radius: 4px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  font-size: 10px;
  line-height: 18px;
  font-weight: 700;
  padding: 1px 6px 0;
  min-width: 35px;
  transform: translateY(-9px);
}

.news-view .title-box.i-new {
  position: relative;
}

.news-view .title-box.i-new::before {
  position: relative;
  left: 0;
  top: 0;
}

.notice-view,
.news-view {
  padding: 24px 16px 60px;
}

.view .news-view {
  padding-bottom: 40px;
}

.view .view-img {
  margin-bottom: 24px;
}

.view .view-img img {
  border-radius: 16px;
  width: 100%;
  height: auto;
}

.view .view-content p {
  font-size: 16px;
  line-height: 32px;
}

.notice-view .title-box,
.news-view .title-box {
  margin-bottom: 40px;
}

.notice-view .title-box .date {
  font-size: 12px;
  color: #888;
}

.view-content table {
  table-layout: fixed !important;
}

.notice-view .view-content table {
  table-layout: initial !important;
  width: 100% !important;
}

.view-content table img {
  max-width: 100% !important;
}

.view-content {
  font-size: 16px;
  color: #666;
}

.view-content .file-download {
  padding: 40px 0 0;
  margin-top: 40px;
  border-top: 1px solid #eee;
}

.view-content .file-download li a {
  display: block;
  font-size: 15px;
  color: #0083d1;
  text-decoration: underline;
  line-height: 20px;
}

.view-content .file-download li + li {
  margin-top: 16px;
}

/* 공지사항 font 통일 */
.view-content .default > table td span,
.view-content .default > table td,
.view-content .default > table th,
.view-content .default > table h1 span,
.view-content .default > table h2 span,
.view-content .default > table h3 span,
.view-content .default > table h2,
.view-content .default > table h3,
.view-content .default > table h1 {
  font-size: 16px !important;
  font-family: inherit !important;
  line-height: 26px;
}

.view-content .default > table td > table td,
.view-content .default > table td > table th,
.view-content .default > table td > table td span,
.view-content .default > table td > table th span {
  font-size: 12px !important;
  font-family: inherit !important;
  line-height: 18px !important;
}

.view-content table th .view-content table td {
  word-break: break-all !important;
  width: auto !important;
}

.view-content pre {
  font-size: 14px !important;
  overflow: hidden;
  white-space: pre-wrap;
}

.notice-view .title-box .view-title,
.news-view .title-box .view-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #222 !important;
}

.news-view .desc {
  font-size: 12px;
  line-height: 20px;
  color: #888;
}

.news-view .desc .company {
  position: relative;
  padding-left: 7px;
}

/* .news-view .desc .company::before {content: ''; width: 2px; height: 2px; background-color: #888; border-radius: 50%; position: absolute; left: 2px; top: 6px;} */
.news-view .desc .company::before {
  content: "/";
  position: absolute;
  left: 0px;
  top: -3px;
}

.news-view .img-box {
  width: 100%;
  height: 208px;
  background-color: #f7f7f7;
  border-radius: 10px;
}

.news-view .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.news-view .img-box + .default {
  margin-top: 40px;
}

.table-type table {
  table-layout: fixed;
  width: 100%;
}

.table-type thead th {
  color: #888;
  padding: 12px 0;
  font-weight: 400;
  border-bottom: var(--line-e6);
}

.table-type tbody th,
.table-type tbody td {
  border-bottom: var(--line-e6);
  padding: 12px 0;
  text-align: center;
}

.table-type tbody th {
  font-weight: 400;
  color: #666;
}

.table-type .more-view {
  display: none;
}

.btn-more-view {
  font-size: 13px;
  color: #666;
}

/* 호가 */
.price-list {
  height: calc(100vh - 186px);
  position: relative;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
}

.fixed + .price-list {
  height: calc(100vh - 328px);
}

.header-pop.h-column .rate-label span {
  min-width: 55px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border-radius: 4px;
  background-color: #f24538;
  text-align: center;
  display: block;
  line-height: 20px;
  padding: 2px 0;
}

.header-pop.h-column .rate-btn {
  margin-left: 8px;
}

.price-list .price-per {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  grid-column: 2;
  position: relative;
  color: #000;
  padding: 0 8px;
  text-align: center;
}

.price-list .price-per .price {
  color: #000 !important;
}

.price-list .price-per .price.color-red {
  color: #f24538 !important;
}

.price-list .price-per .price.color-blue {
  color: #0083d1 !important;
}

.price-list .check[vhidden] {
  height: 0;
}

.price-list .rate-label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.price-list .buy-check .rate-label {
  justify-content: flex-end;
}

.price-list .rate-label .badge {
  height: 18px;
  line-height: 18px;
  display: block;
  border-radius: 2px;
  font-size: 10px;
  color: #fff;
  padding: 0 6px;
}

.price-list .rate-label span + span {
  margin-left: 4px;
}

.price-list .rate-label .badge.vi {
  background-color: #f24538;
}

.price-list .rate-label .badge.inc {
  background-color: #222;
}

.price-list .rate-label [class^="price-"] {
  display: inline-block;
  width: 21px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid #222;
  font-size: 10px;
  color: #222;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
}

.price-list .rate-label .price-high {
  border-color: #f24538;
  color: #d2190b;
}

.price-list .rate-label .price-row {
  border-color: #0083d1;
  color: #005f98;
}

.price-list .lower {
  position: relative;
}

.price-list .lower::before {
  content: "";
  width: 200px;
  height: 1px;
  background-color: #e6e6e6;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.price-list .column {
  position: relative;
  padding: 0 24px;
  margin: auto 0;
}

.price-list .column::after {
  left: initial;
  right: calc(50% - 79px);
}

.price-list [class^="check"] {
  display: grid;
  grid-template-columns: 1fr 90px 1fr;
  grid-column-gap: inherit;
  align-content: center;
  position: relative;
  height: 57px;
  align-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.price-list [class^="check"].upper-price {
  overflow: initial;
}

.price-list [class^="check"].on {
  border: 1px solid #222;
  border-radius: 8px;
}

.price-list [class^="check"].active-sell .rate-bar {
  background: rgba(0, 131, 209, 0.1);
}

.price-list [class^="check"].active-buy .rate-bar {
  background: rgba(242, 69, 56, 0.1);
}

.price-list [class^="check"]::after {
  left: initial;
  right: calc(50% - 90px);
}

.price-list [class^="check"].on .price-per {
  position: relative;
}

.price-list .color-red .per,
.price-list .color-blue .per {
  color: inherit;
}

.price-list .per {
  font-size: 12px;
  line-height: 20px;
  color: #888;
  font-weight: 400;
}

.price-list [class*="present-"] {
  background-color: #f7f7f7;
  border-radius: 8px;
}

.price-list .present-sell {
  border: 1px solid #0083d1;
}

.price-list .present-buy {
  border: 1px solid #f24538;
}

.rate-wrap {
  position: relative;
}

.rate-wrap .cont {
  display: block;
  line-height: 32px;
  padding: 0 4px;
  position: absolute;
  right: 0;
}

.buy-check .rate-wrap .cont {
  right: initial;
  left: 0;
}

.rate-wrap .rate-bar {
  height: 32px;
  background: rgba(0, 131, 209, 0.4);
  font-size: 12px;
  color: #005f98;
  text-align: right;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 4px;
  max-width: 100% !important;
}

.price-list .buy-check .rate-bar {
  background: rgba(242, 69, 56, 0.4);
  left: 0;
  right: initial;
  text-align: left;
  color: #d2190b;
}

.upper-price,
.lower-price {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 35px;
  background-color: #fff;
  z-index: 1;
}

.upper-price .price-wrap,
.lower-price .price-wrap {
  font-size: 13px;
  font-weight: 700;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upper-price .price-wrap::after,
.lower-price .price-wrap::after {
  content: "";
  /* background: url(/inc/coinone/img/ico-arrow-upper.svg) no-repeat center center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 12px 12px;
  width: 20px;
  height: 20px;
  top: 2px;
  display: inline-block;
}

.upper-price {
  margin-top: 16px;
}

.lower-price {
  top: initial;
  bottom: 0;
  margin-bottom: 16px;
}

.upper-price::before,
.lower-price::before {
  content: "";
  width: 200px;
  height: 1px;
  background-color: #e6e6e6;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.upper-price::before {
  top: initial;
  bottom: -2px;
}

.fixed-content {
  background-color: #fff;
  width: 100%;
  height: 40px;
  bottom: 90px;
  position: fixed;
  border-top: var(--line-f5);
  padding: 0 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fixed-content.main {
  border: none;
  justify-content: center;
}

.fixed-content > div {
  color: #888;
  font-size: 12px;
  line-height: 20px;
  padding: 8px 0 12px;
}

.fixed-content .sell strong {
  color: #0083d1;
}

.fixed-content .buy strong {
  color: #f24538;
}

.stock-card-wrap {
  width: 100%;
  margin-top: 60px;
}

.card-title-wrap .tooltip-view {
  left: 20px;
}

.stock-card {
  width: 100%;
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  position: relative;
}

.stock-card + .stock-card {
  margin-top: 8px;
}

.stock-card .card-tit {
  font-weight: 700;
  display: inline;
}

.stock-card .price {
  text-align: right;
}

.stock-card [class^="stock-"] {
  margin-top: 4px;
}

.password-check {
  margin-top: 16px;
  text-align: center;
}

.password-check .account {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 24px;
}

.password-check .account .bank {
  background: url(/inc/coinone/img/logo-korea.svg) no-repeat 0 0;
  background-size: 24px 24px;
  padding-left: 28px;
  margin-right: 2px;
}

.password-check .password-desc {
  margin-top: 56px;
  font-size: 24px;
  line-height: 32px;
}

.password-check .area-info {
  font-size: 13px;
  line-height: 20px;
  color: #888;
  margin-top: 8px;
}

.masking {
  margin-top: 30px;
}

.masking.agree {
  margin: 0;
}

.password-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #e6e6e6;
  display: inline-block;
}

.password-dot.on {
  background-color: #222;
}

.password-dot + .password-dot {
  margin-left: 16px;
}

.masking.agree .password-dot {
  width: 10px;
  height: 10px;
}

.masking.agree .password-dot + .password-dot {
  margin-left: 8px;
}

.secure-keybord {
  width: 100%;
  min-height: 300px;
  background-color: #ddd;
}

.dl-list {
  padding: 0 16px;
  height: 60px;
}

.dl-list.auto {
  height: initial;
}

.dl-list.auto dd {
  font-size: 16px;
  width: 100%;
  height: 100%;
  line-height: 51px;
  flex: 1;
}

.dl-list dl {
  display: flex;
  align-items: center;
  height: 100%;
}

.dl-list + .dl-list {
  border-top: var(--line-f5);
}

.dl-list dt {
  min-width: 82px;
  color: #666;
  height: 60px;
  line-height: 60px;
}

.dl-list dd {
  font-size: 16px;
  width: 100%;
  height: 100%;
  line-height: 60px;
  flex: 1;
}

.dl-list .disabled {
  color: #888;
}

.dl-list .input-text {
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  height: 100%;
  line-height: initial;
  position: relative;
}

.dl-list .select {
  display: flex;
  align-items: center;
  width: calc(100% - 20px);
  height: 100%;
  line-height: initial;
  position: relative;
  min-height: 32px;
}

.dl-list .select::after {
  content: "";
  /* -webkit-mask: url(/inc/coinone/img/arrow-bottom.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 14px auto;
  display: block;
  width: 24px;
  height: 24px;
  background-color: #222;
  position: absolute;
  right: -18px;
  top: calc(50% - 12px);
}

.dl-list .list-asterisk {
  margin-bottom: 18px;
  line-height: 20px;
}

.dl-list .form-group [type="radio"] {
  right: 0;
}

.dl-list [type="radio"] + label {
  width: 100%;
  padding: 0;
}

.dl-list [type="radio"] + label::before {
  content: none;
}

.dl-list [type="radio"] + label::after {
  content: "";
  background-color: #ddd;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat center;
  -webkit-mask-size: 15px auto;
  box-shadow: none;
  display: inline-block;
  width: 24px;
  height: 24px;
  position: absolute;
}

.dl-list [type="radio"]:checked + label::after {
  box-shadow: none;
  width: 24px;
  height: 24px;
  left: initial;
  background-color: #222;
}

.dl-list [type="radio"] + label::after,
.dl-list [type="radio"]:checked + label::after {
  left: initial;
  right: 0;
  top: calc(50% - 12px);
}

.dl-list .input-type {
  border: none; /* height:100%; */
  height: calc(100% - 1px); /* bottom 라인이 가려짐 수정 */
  font-size: 16px;
  padding: 2px 4px;
  margin-left: -4px;
  width: 100%;
}

.dl-list .input-type.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-list .input-type::placeholder {
  color: #aaa;
}

.dl-list dd.flex-between {
  display: flex;
  align-items: center;
  line-height: 24px;
}

.dl-list dd.flex-between .inline-btn {
  font-size: 14px;
  line-height: 18px;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 7px 0;
  text-align: center;
  min-width: 73px;
  margin-left: 4px;
}

.dl-list dd.flex-between .inline-count {
  color: #f24538;
  font-size: 14px;
  line-height: 18px;
  width: 50px;
  text-align: right;
}

.agree-box .dl-list {
  height: auto;
}

.agree-box .dl-list dd {
  line-height: 24px;
  padding: 14px 0;
  min-height: 32px;
}

.form-content {
  margin-top: 32px;
}

.form-content em.plus {
  color: #f24538;
}

.form-content .plus-text {
  color: #666;
  font-size: 13px;
  line-height: 20px;
  margin: 24px 0 56px;
  word-break: keep-all;
}

.form-content dl + dl {
  margin-top: 40px;
}

.form-content dt {
  font-size: 15px;
  font-weight: 700;
}

.form-content dd {
  display: flex;
  align-items: center;
  margin-top: 16px;
  justify-content: space-between;
}

.form-content dd .form-group {
  width: 50%;
}

.form-group [type="radio"] + label {
  display: flex;
  align-items: center;
}

.chk-list li .form-group [type="radio"] + label {
  line-height: 22px;
}

.service-info {
  background-color: #fff;
  padding: 30px 0;
  text-align: center;
}

.service-info .logos {
  /* background: url(/inc/coinone/img/logos.svg) no-repeat 0 0; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100%;
  width: 180px;
  height: 20px;
  margin: auto;
}

.service-info .logos + .service-text {
  margin-top: 20px;
}

.service-text {
  font-size: 17px;
  line-height: 24px;
}

.service-text-sm {
  font-size: 13px;
  line-height: 20px;
  color: #888;
  margin-top: 8px;
}

.service-info .title-sub {
  font-size: 16px;
  color: #888;
  margin-top: 8px;
}

.agree-content {
  padding: 24px 16px 50px;
  flex: 1;
}

.agree-content .form-content {
  padding-left: 8px;
  padding-right: 8px;
}

.agree-content .info {
  text-align: right;
  font-size: 13px;
  color: #888;
  margin-bottom: 16px;
}

.agree-content .info .btn-tooltip {
  position: relative;
  width: auto;
  height: initial;
  background-position: 0 0;
}

.agree-content .info span {
  display: block;
  margin-left: 20px;
  line-height: 16px;
  font-size: 13px;
  color: #888;
}

.info-area .info {
  text-align: right;
  font-size: 13px;
  color: #888;
  margin-bottom: 16px;
}

.info-area .info .btn-tooltip {
  position: relative;
  width: auto;
  height: initial;
  background-position: 0 0;
}

.info-area .info span {
  display: block;
  margin-left: 20px;
  line-height: 16px;
  font-size: 13px;
  color: #888;
}

.agree-content .agree-box .dl-list dd {
  word-break: break-all;
}

.agree-box {
  background-color: #fff;
  border: var(--line-f5);
}

.agree-box + .agree-box {
  margin-top: 8px;
}

.chk-title + .chk-sub {
  border-top: var(--line-f5);
}

.chk-title .form-group [type="checkbox"] + label {
  font-weight: 700;
  font-size: 16px;
  padding: 16px 16px 16px 48px;
  display: block;
  width: 100%;
  color: #222;
}

.chk-title .form-group [type="checkbox"]:checked + label {
  background-color: #000;
  color: #fff;
}

.chk-title .form-group [type="checkbox"] + label::before {
  left: 16px;
  top: 16px;
}

.chk-title .form-group [type="checkbox"]:checked + label::before {
  background-color: #fff;
}

.agree-list .chk-top {
  margin: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.agree-list .chk-top label {
  color: #222;
  line-height: 24px;
}

.agree-list .chk-top .sm-text {
  padding-left: 32px;
  margin-top: 8px;
  line-height: 20px;
}

.agree-list .chk-top .form-group {
  width: 80%;
}

.agree-box .chk-text .sm-text + .sm-text {
  margin-top: 8px;
  line-height: 20px;
}

.agree-check {
  padding: 14px 16px 14px 24px;
  border-top: var(--line-f5);
}

.agree-check li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.agree-check li + li {
  margin-top: 8px;
}

.agree-check .flex-box {
  width: 100%;
  padding: 16px 0 8px 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 9px;
}

.agree-check .form-group [type="checkbox"] + label {
  font-size: 13px;
  line-height: 19px;
  color: #333;
  padding-left: 24px;
}

.agree-check .form-group [type="checkbox"] + label::before {
  width: 20px;
  height: 20px;
  -webkit-mask-size: 12px auto;
}

.agree-check .form-group [type="checkbox"] {
  width: 20px;
  height: 20px;
}

.agree-box .form-group.form-link {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.agree-box .form-group.form-link label {
  width: calc(100% + 24px);
  line-height: 24px;
  z-index: 1;
  padding-right: 20px;
}

.agree-box .form-group.form-link::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 0;
  z-index: 0;
}

.agree-check .form-group.form-link label {
  line-height: 20px;
}

.agree-check .form-group.form-link::after {
  width: 20px;
  height: 20px;
}

.chk-sub .agree-check .btn-text-link {
  margin: 0;
  width: calc(100% - 16px);
}

.chk-sub .btn-text-link {
  font-size: 15px;
  color: #888;
  display: block;
  position: relative;
  text-align: left;
  width: 100%;
}

.chk-sub .agree-link {
  padding: 16px;
}

.chk-sub .btn-link::after {
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
}

.chk-sub .btn-text-link::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.chk-sub .list {
  font-size: 15px;
  color: #888;
  line-height: 24px;
  padding: 0 16px 16px;
}

.resweb {
  width: 100%;
  height: 100vh;
}

.section-banner {
  height: 92px;
  /* background: #000 url(/inc/coinone/img/img-mzip.png) no-repeat right 24px top 20px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 52px 52px;
  padding: 22px 24px;
  border-radius: 8px;
  display: block;
}

.section-banner .bnr-label {
  color: #aaa;
}

.section-banner .bnr-tit {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
}

.section-banner .bnr-tit .dot {
  color: #ec5f5f;
}

#scrTop {
  display: none;
}

#scrTop.show {
  display: block;
}

/* 약관 */
/* 약관 상세 */
.terms-wrap {
  padding: 16px;
  height: initial;
}

.terms-tit {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.terms-tit2 {
  font-size: 20px;
  margin: 16px 0 8px;
}

.terms-tit3 {
  font-size: 15px;
  font-weight: 700;
  margin: 16px 0 8px;
}

.terms-tit .title-inner {
  font-size: 17px;
  word-break: keep-all;
}

.terms-tit img {
  width: 90px;
  height: 90px;
}

.terms-txt {
  font-size: 15px;
}

.tblinview {
  width: 100%;
  table-layout: fixed;
  word-break: keep-all;
}

.tblinview th,
.tblinview td {
  border: var(--line-ee);
  padding: 8px;
}

.terms-strong {
  font-size: 15px;
  display: block;
  margin: 8px 0;
}

.img-gap {
  margin: 8px 0;
}

/* // 약관 상세 */
.all-check {
  border: 1px solid #333;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.btn-link {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
}

.btn-link::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 8px auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.terms-box {
  padding: 16px;
  background-color: #f7f7f7;
}

.terms-box h2.terms-title {
  font-weight: 700;
  font-size: 14px;
}

.terms-list {
  margin-top: 4px;
}

.terms-list li {
  position: relative;
  color: #666;
  padding-left: 7px;
  font-size: 13px;
}

.terms-list li::before {
  content: "";
  width: 2px;
  height: 2px;
  border-radius: 50%;
  display: inline-block;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 7px;
}

.terms-list li + li {
  margin-top: 2px;
}

.terms-import {
  padding: 24px 16px 0;
  flex: 1;
}

.terms-import iframe {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  border: none;
}

.terms-import iframe.auto-frame {
  height: calc(100vh + 800px) !important;
}

.terms-import iframe.auto-frame2 {
  height: calc(100vh + 600px) !important;
}

@media screen and (max-width: 560px) {
  .terms-import iframe.auto-frame {
    height: calc(100vh + 550px) !important;
  }
}
@media screen and (max-height: 740px) {
  .terms-import iframe.auto-frame {
    height: calc(100vh + 900px) !important;
  }
}
@media screen and (max-height: 850px) {
  .terms-import iframe.auto-frame {
    height: calc(100vh + 700px) !important;
  }
}
@media screen and (max-width: 280px) {
  .terms-import iframe.auto-frame {
    height: calc(100vh + 1400px) !important;
  }
}
@media screen and (max-width: 320px) {
  .terms-import iframe.auto-frame {
    height: calc(100vh + 1200px) !important;
  }
}
.select-form,
.select-form2 {
  padding: 24px 24px 50px;
}

.select-form2 li button[class^="select"],
.pop-content .select-form > li button,
.pop-content .select-form2 > li button,
.select-form li button[class^="select"] {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 30px 8px 0;
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
}

button[class^="select"]:disabled {
  background-color: #fff !important;
  color: #aaa !important;
}

.open-sheet [class^="select"].disabled {
  background-color: #fff !important;
  color: #888 !important;
}

.open-sheet [class^="select"].disabled::after {
  content: none;
}

.open-sheet [class^="select"][disabled]::after {
  content: none;
}

.slide-content .select-form.check-list {
  margin-top: 32px;
}

.select-form li + li,
.select-form2 li + li {
  margin-top: 16px;
}

.select-form.check-list li + li {
  margin-top: 32px;
}

.select-form.check-list li[disabled="disabled"] {
  pointer-events: none;
  opacity: 0.4;
}

.select-form li.on .list-form::after,
.select-form li.on button::after,
.select-form2 li.on button::after {
  content: "";
  width: 24px;
  height: 24px;
  background-color: #222;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat center;
  -webkit-mask-size: 15px auto;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.slide-content .select-form {
  padding: 0 8px 30px 8px;
  margin-top: -8px;
  min-height: initial;
}

.select-form.line2 li.on button::after {
  transform: translateY(-100%);
}

.select-form li.on [class^="select"][disabled]::after {
  content: none;
}

.sheet .list-scroll .select-form li.on [class^="select"][disabled] {
  font-weight: inherit;
}

/* sheetsheetsheetsheetsheetsheetsheetsheetsheetsheetsheetsheetsheet */
.sheet2 .wrap-btn-sticky {
  position: fixed;
}

.dim-s {
  background-color: #000;
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  opacity: 0.6;
}

/* sheetsheetsheetsheetsheetsheetsheetsheetsheetsheetsheetsheetsheet */
.list-form {
  position: relative;
}

.list-form dt {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.list-form dt .label-wrap {
  margin-left: 6px;
}

.list-form dt .dotted::before {
  content: "·";
  margin: 0 4px;
}

.list-form dd {
  font-size: 13px;
  color: #666;
}

.label-wrap [class^="stock"] {
  font-size: 14px;
  font-weight: 400;
}

.label-wrap [class*="tooltip-label"] {
  vertical-align: text-top;
  font-weight: 400;
}

.label-wrap span + span {
  margin-left: 4px;
}

.summary-box {
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 8px;
}

.summary-box .date,
.summary-box .summary-text {
  font-size: 12px;
  color: #aaa;
}

.summary-box h3 {
  font-size: 16px;
  margin: 4px 0 16px;
}

.summary-box .text-content {
  font-size: 15px;
  color: #666;
  line-height: 26px;
}

.sheet,
.sheet2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  visibility: visible;
  transition:
    opacity 0.3s,
    visibility 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.sheet[aria-hidden="true"],
.sheet2[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheet .sheet-contents.vh-20 {
  transform: translateY(20vh);
}

.sheet .sheet-contents,
.sheet2 .sheet-contents {
  background-color: #fff;
  position: relative;
  overflow-y: hidden;
  border-radius: 30px 30px 0 0;
  transition: transform 0.3s;
  transform: translateY(0);
  max-height: calc(100vh - 88px);
  z-index: 1;
  width: 100%;
}

.sheet .sheet-contents .pop-content,
.sheet2 .sheet-contents .pop-content {
  height: 100%;
  overflow-y: scroll;
}

.sheet .sheet-contents:not(.not-selectable),
.sheet2 .sheet-contents:not(.not-selectable) {
  transition:
    transform 0.3s,
    height 0.3s;
}

.sheet[aria-hidden="true"] .sheet-contents,
.sheet2[aria-hidden="true"] .sheet-contents {
  transform: translateY(100%);
}

.sheet .sheet-contents.fullscreen .pop-content,
.sheet2 .sheet-contents.fullscreen .pop-content {
  height: 100%;
  overflow-y: scroll;
}

.sheet .sheet-contents .select-form {
  margin-bottom: 24px;
}

.sheet2 .sheet-contents .select-form2 {
  margin-bottom: 100px;
}

.sheet .controls,
.sheet2 .controls {
  height: 32px;
}

.sheet .draggable-area,
.sheet2 .draggable-area {
  width: 100%;
  padding: 14px 0;
  cursor: grab;
}

.sheet .draggable-thumb,
.sheet2 .draggable-thumb {
  width: 42px;
  height: 5px;
  margin: auto;
  display: block;
  border-radius: 10px;
  background-color: #ddd;
}

.banner-guide {
  width: 100%;
  height: 88px;
  border-radius: 8px;
  padding: 20px;
  background: #429bdf url(/inc/coinone/img/img-guide-banner.png) no-repeat right center;
  background-size: 100px auto;
}

.banner-guide .banner-tit {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
}

.main-list .banner-guide .banner-tit {
  font-size: 16px;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.6);
}

.banner-guide .banner-txt {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

/* .banner-guide a div + div {margin-top: 4px;} */
.banner-guide.bg-color1 {
  background-color: #3668e6;
}

.banner-guide.bg-color2 {
  /* background: #b7926f url(/inc/coinone/img/img-guide-banner03.png) no-repeat right top; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 113px auto;
}

.banner-guide.bg-color3 {
  /* background: #3f69d9 url(/inc/coinone/img/img-guide-banner04.png) no-repeat right top; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 113px auto;
}

.banner-guide.bg-color5 {
  /* background: #373d4e url(/inc/coinone/img/slide-banner-img-03.png) no-repeat right center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100px auto;
}

.banner-guide.bg-color6 {
  /* background: #3aafcb url(/inc/coinone/img/img-calendar-banner.png) no-repeat right center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100px auto;
}

.banner-guide.bg-color6 .banner-txt {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.section-inner.main-list .banner-guide.bg-color3 {
  margin-top: 32px;
}

/* 수익률 계산하기 버튼 */
.banner-guide-wrap {
  margin: 32px 0 20px;
}

/* .banner-guide.bg-color4{background: #6549b3 url(/inc/coinone/img/img-guide-banner05.png) no-repeat right center; background-size: 100px auto;} */
.banner-guide.bg-color4 {
  background: #6549b3;
  position: relative;
  border-radius: 16px;
}

.banner-guide.bg-color4 .tit-info {
  color: #fff;
  font-size: 15px;
  line-height: 22px;
}

.banner-guide.bg-color4 .banner-tit {
  color: #fff;
  opacity: 70%;
  font-size: 13px;
  line-height: 20px;
  margin-top: 4px;
}

.banner-guide.bg-color4::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #fff;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.banner-calculator-wrap {
  margin: 32px 0;
}

.banner-calculator-wrap .banner-guide.bg-color4 {
  background: rgba(236, 95, 95, 0.0588235294);
  border-radius: 8px;
  padding: 20px 16px 20px 24px;
}

.banner-calculator-wrap .banner-guide.bg-color4 .tit-info {
  color: #222;
}

.banner-calculator-wrap .banner-guide.bg-color4 .banner-tit {
  color: #888;
  opacity: 1;
}

.banner-calculator-wrap .banner-guide.bg-color4::after {
  background-color: #aaa;
}

/* swiper */
.category-wrap .swiper-slide {
  width: 120px;
}

.category-wrap .box {
  width: 100%;
  height: 80px;
  border-radius: 10px;
  background-color: #f7f7f7;
}

.category-wrap .ca-tit {
  text-align: center;
  margin-top: 16px;
}

.category-slider {
  padding: 0 16px;
}

.category-slider + .wrap-btn {
  margin: 40px 16px 0;
}

.box-line .swiper-slide {
  border: var(--line-ee);
  border-radius: 10px;
  width: 120px;
  height: 163px;
}

.box-line .swiper-slide + .swiper-slide {
  margin-left: 8px;
}

.box-line .swiper-slide.more-view {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: #f7f7f7;
}

.box-line .swiper-slide.more-view a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 163px;
}

.box-line .swiper-slide a {
  display: block;
  text-align: center;
}

.box-line .favorite {
  text-align: right;
  margin: 10px 8px 0 0;
}

.box-line .stock-icon {
  width: 48px;
  height: 48px;
  margin: auto;
}

.box-line .stock-name {
  margin-top: 16px;
}

.box-line .stock-title {
  font-size: 15px;
  font-weight: 400;
}

.box-line .price {
  font-size: 13px;
  color: #aaa;
}

.box-color .swiper-slide {
  min-width: 110px;
  width: initial;
  text-align: center;
}

.box-color .swiper-slide + .swiper-slide {
  margin-left: 8px;
}

.box-color .stock-per.symbol {
  font-size: 13px;
}

.banner-wrap {
  width: calc(100% - 32px);
  height: 92px;
  border-radius: 8px;
  background-color: #f7f7f7;
  position: relative;
  overflow: hidden;
}

.banner-wrap a {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.banner-wrap a::after {
  content: initial;
}

.banner-wrap .txtarea {
  padding: 20px 0 20px 20px;
  width: 100%;
  flex: 1;
  max-height: 92px;
}

.banner-wrap .txtarea strong {
  display: block;
}

.banner-wrap .txtarea .banner-txt {
  opacity: 0.8;
  font-size: 14px;
}

.banner-wrap .txtarea .banner-txt + strong {
  opacity: 1;
  margin-top: 4px;
}

.banner-wrap .txtarea strong + .banner-txt {
  opacity: 0.8;
  margin-top: 4px;
}

/* .banner-wrap a p {margin-bottom: 4px;} */
.banner-wrap:last-child {
  margin-right: 0 !important;
}

.banner-wrap:last-child {
  margin-right: 16px;
}

.main-card {
  margin: 0 16px;
  width: 100%;
  display: flex;
}

.main-card .card {
  width: 50%;
  height: 106px;
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 16px 8px;
  text-align: center;
}

.main-card .card .price {
  font-size: 16px;
  margin-top: 8px;
  display: block;
}

.main-card .card [class^="stock-"] {
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.main-card .card + .card {
  margin-left: 8px;
}

/* *** 홈 - 지수 슬라이드 (.main-slider) */
.page-home-contents .section-swiper {
  margin: 16px;
  background-color: transparent;
}

.main-slider.swiper {
  overflow: hidden;
  width: calc(100% + 32px);
  margin: -16px;
  padding: 16px;
}

.main-slider {
  padding: 0 16px;
}

.main-slider .main-card {
  margin: 0;
  gap: initial;
  transition-timing-function: linear;
}

.main-slider .main-card .card {
  width: auto;
  height: auto;
  padding: 0;
  flex: 1;
  background-color: #fff;
  border-radius: 12px;
  box-shadow:
    0 0 2px 0 rgba(40, 41, 61, 0.04),
    0 4px 8px 0 rgba(96, 97, 112, 0.16);
  text-align: left;
}

.main-slider .main-card .card > a {
  display: block;
  min-width: 136px;
  height: 78px;
  padding: 16px 24px;
  box-sizing: border-box;
  color: var(--Gray-Gray-1000, #1e1e23);
  font-size: 14px;
  line-height: 20px;
}

.main-slider .main-card .card .group-num {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.main-slider .main-card .card .price {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  color: var(--Gray-Gray-1000, #1e1e23);
}

.main-slider .main-card .card [class^="stock-"] {
  font-weight: 400;
  font-size: 13px;
  line-height: 22px;
  margin: 0 0 0 4px;
}

/* 레거시 삭제
.main-slider .main-card .card.event {
  background-color: #673d9e;
  color: #fff;
  padding: 20px 8px;
  line-height: 22px;
}
.main-slider .main-card .card.cardbg1 {
  background: #f9f6ea;
}
.main-slider .main-card .card.cardbg2 {
  background: #ecf3f6;
}
.main-slider .main-card .card.cardbg3 {
  background: #e7efda;
}
.main-slider .main-card .card.cardbg4 {
  background: #f5eded;
}
*/
/* guide */
.guide-wrap {
  padding: 20px 16px 80px; /* background:linear-gradient(180deg, rgba(247,247,247,0)0%, rgba(247,247,247,0.7)3.12%,#f7f7f7 100%); */
  background: linear-gradient(
    180deg,
    rgba(247, 247, 247, 0) 0%,
    rgb(247, 247, 247) 4.12%,
    #f7f7f7 100%
  );
}

.guide-wrap .list-asterisk {
  font-size: 13px;
  line-height: 20px;
  margin-top: 8px;
}

.guide-main {
  padding: 32px 24px 84px;
  /* background: #000 url(/inc/coinone/img/guide-main.png) no-repeat right 24px bottom; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 143px auto;
}

.guide-main .logos {
  width: 180px;
  height: 20px;
  /* -webkit-mask: url(/inc/coinone/img/logos.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 180px auto;
  background-color: #aaa; /* background:url(/inc/coinone/img/logos.svg) no-repeat center; */
}

.guide-main .visual-title {
  font-size: 32px;
  line-height: 38px;
  color: #fff;
  margin: 16px 0 8px;
}

.guide-main .visual-sub {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: 0.8;
}

.guide-conten-main {
  margin: -60px -15px;
  padding: 60px 15px;
  background-color: #fff;
}

.tabs.guide {
  position: relative;
  top: 0;
  height: 50px;
}

.tabs.guide.fixed {
  position: -webkit-sticky;
  position: sticky;
  top: 55px;
}

.tabs.guide ul li button {
  font-size: 16px;
  line-height: 50px;
}

.guide-content .guide-sub .list-asterisk::before {
  position: relative;
  left: -4px;
}

/* guide2(채권,발행어음) */
.guide-wrap2 {
  padding: 20px 16px 80px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.21) 0%,
    rgb(247, 247, 247) 38.12%,
    #f7f7f7 100%
  );
}

.guide-main2 {
  padding: 32px 24px 64px;
  /* background: #29303d url(/inc/coinone/img/guide-main2.png) no-repeat right 13px bottom 14px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 143px auto;
}

.guide-main2 .logos {
  width: 180px;
  height: 20px;
  /* -webkit-mask: url(/inc/coinone/img/logos.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 180px auto;
  background-color: #aaa;
}

.guide-main2 .visual-title {
  font-size: 30px;
  line-height: 36px;
  color: #fff;
  margin: 16px 0 8px;
}

.guide-main2 .visual-sub {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  opacity: 0.8;
}

.guide-conten-main2 {
  margin: -20px -15px;
  padding: 60px 15px 0;
}

.guide-conten-main2 .guide-title {
  text-align: center;
  font-size: 24px;
  line-height: 30px;
  font-weight: 400;
  color: #000;
}

/* 팝업용 guide 추가 start */
.full-pop .guide-wrap {
  padding: 0px 16px 80px;
  background: #f7f7f7;
}

.full-pop .guide-card-banner {
  margin: 0px 0px 80px;
}

.full-pop .guide-conten {
  margin: 0 -16px 0;
  padding: 60px 24px 48px;
  background: #fff;
}

.guide-card-banner {
  height: 90px;
  /* background: #429bdf url(/inc/coinone/img/img-notebook.png) no-repeat right 20px top 24px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 50px 50px;
  border-radius: 8px;
  margin-top: 60px;
}

.guide-card-banner button,
.guide-card-banner a {
  padding: 20px;
  text-align: left;
  width: 100%;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  display: block;
}

.guide-card-banner p {
  margin-top: 2px;
}

.pop-guide-content .faq-list.mt {
  margin-top: 0;
}

/* 팝업용 guide 추가 end */
/* 신용거래 추가 - start */
.tabs.guide ul li {
  width: 23.325%;
}

.tabs.guide ul li:nth-child(3) {
  width: 30.03%;
}

.tabs.guide ul li.icon-new button::after {
  content: "";
  width: 5px;
  height: 5px;
  background-color: #f24538;
  border-radius: 10px;
  font-size: 0;
  position: absolute;
  right: 50%;
  top: 8px;
  transform: translateX(35px);
}

/* 신용거래 탭 추가 */
.guide-sub.icon-check {
  color: #222;
  text-align: left;
  margin-top: 32px !important;
  padding-left: 8px;
  max-width: 290px;
  margin: 0 auto;
}

.guide-sub.icon-check ul li::before {
  content: "";
  /* background: url(/inc/coinone/img/ico-check-1.svg) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 12px 10px;
  width: 12px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 7px;
  display: inline-block; /* transform: translateY(-50%); */
}

.guide-sub.icon-check ul li {
  margin-bottom: 16px;
  font-size: 16px;
  position: relative;
  padding-left: 18px;
}

.guide-sub.icon-check ul li .kpink {
  color: #ec5f5f;
}

.guide-sub.icon-check ul li:last-child {
  margin-bottom: 0;
}

.guide-sub-box {
  border-radius: 8px;
  text-align: center;
  margin-top: 48px;
  padding: 32px 8px;
  background-color: rgba(236, 95, 95, 0.0588235294);
}

.guide-sub-box .sub-title {
  font-size: 17px;
  margin-bottom: 16px;
}

.guide-sub-box .sub-text > ul > li {
  font-size: 15px;
}

.guide-sub-box .sub-text > ul > li + li {
  margin-top: 16px;
}

.guide-sub .sub-text > ul > li + li {
  margin-top: 8px;
}

.guide-sub .list-bar .info-text {
  font-size: 13px;
  line-height: 20px;
  display: block;
}

.faq-card + .num-column {
  margin-top: 80px;
}

.faq-list.mt {
  margin-top: 48px;
}

.guide-conten-main.mt {
  margin: -60px -16px -48px;
  padding: 60px 24px 48px;
  background-color: #fff;
}

.num-column .table-area,
.num-column .sub-text {
  padding-left: 8px;
  padding-right: 8px;
}

/* table */
.table-area {
  margin: 24px 0;
}

/* 세로가 2개 이하일때 */
.table-area .tblinview-st1 table {
  width: 100%;
  table-layout: fixed;
  word-break: keep-all;
  border-spacing: 0;
  border-collapse: separate;
}

.table-area .tblinview-st1 .radius1 th:first-child {
  border-radius: 4px 0 0 0;
  border-left: 1px solid #ddd !important;
}

.table-area .tblinview-st1 .radius1 th:last-child {
  border-radius: 0 4px 0 0;
}

.table-area .tblinview-st1 .radius2 th:first-child {
  border-radius: 0 0 0 4px;
}

.table-area .tblinview-st1 .radius2 td:last-child {
  border-radius: 0 0 4px 0;
}

.table-area .tblinview-st1 .radius2 td {
  border-left: none !important;
}

.table-area .tblinview-st1 .radius1 th {
  border-left: none !important;
  border-bottom: none !important;
}

.table-area .tblinview-st1 th {
  background-color: #eee;
  font-weight: 700;
}

.table-area .tblinview-st1 td {
  text-align: center;
}

.table-area .tblinview-st1 th,
.table-area .tblinview-st1 td {
  padding: 10px 12px;
  font-size: 12px;
  line-height: 20px;
  border: var(--line-dd);
}

/* 세로가 2개 이상일때 */
.table-area .tblinview-st1.length td:first-child {
  border-left: 1px solid #ddd !important;
}

.table-area .tblinview-st1.length .radius1 th:first-child {
  border-radius: 4px 0 0 0;
  border-left: 1px solid #ddd !important;
}

.table-area .tblinview-st1.length .radius1 th:last-child {
  border-radius: 0 4px 0 0;
}

.table-area .tblinview-st1.length .radius2 td:first-child {
  border-radius: 0 0 0 4px;
  border-left: 1px solid #ddd !important;
}

.table-area .tblinview-st1.length .radius2 td:last-child {
  border-radius: 0 0 4px 0;
}

.table-area .tblinview-st1.length .radius2 th,
.table-area .tblinview-st1.length .radius2 td {
  border-bottom: 1px solid #ddd !important;
}

.table-area .tblinview-st1.length td {
  border-left: none !important;
  border-bottom: none !important;
}

.table-area .tblinview-st1.length th {
  border-bottom: none !important;
  text-align: center;
}

.table-area .tblinview-st1.length td {
  text-align: left;
}

.table-area.mt16 .tblinview-st1.length td {
  text-align: center;
}

table.ac tr td {
  text-align: center;
}

.table-area .tbl-asterisk {
  font-size: 12px;
  text-align: right;
  display: block;
  line-height: 20px;
  margin-top: 8px;
  color: #888;
}

.tbl-type {
  width: 100%;
}

.tbl-type th,
.tbl-type td {
  padding: 10px;
  font-size: 12px;
  line-height: 20px;
  border: var(--line-dd);
}

.tbl-type th {
  background-color: #eee;
  text-align: left;
}

.tbl-type td {
  text-align: left;
}

.tbl-type tr > td:nth-child(3) {
  text-align: center;
}

.table-area1 {
  border-top: 1px solid #eee;
}

.tbl-type1 {
  width: 100%;
  font-size: 14px;
  line-height: 18px;
  color: #222;
}

.tbl-type1 th {
  color: #888;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

.tbl-type1 th,
.tbl-type1 td {
  padding: 16px 0 16px;
  border-bottom: 1px solid #eee;
}

.border-l-none {
  border-left: none !important;
}

/* 신용거래 탭 추가 - end */
.guide-title {
  text-align: center;
  font-size: 28px;
  line-height: 36px;
  font-weight: 400;
  color: #000;
}

.guide-title + .num-column,
.guide-sub.margin + .num-column {
  margin-top: 40px;
}

.guide-title strong {
  display: block;
}

.guide-sub {
  text-align: center;
  font-size: 15px;
  line-height: 22px;
  color: #666;
}

.guide-sub .em {
  font-size: 16px;
  color: #222;
  font-weight: 700;
  margin-bottom: 8px;
}

.guide-sub strong {
  color: #222;
}

.guide-sub + .img-area {
  margin-top: 24px;
}

.guide-sub .wrap + .wrap {
  margin-top: 16px;
}

.guide-title + .guide-sub {
  margin-top: 16px;
}

.img-area-main {
  margin: 16px 48px 0;
}

.img-area {
  text-align: center;
  margin: 0 14px 0;
}

.img-area-main img,
.img-area img {
  margin: auto;
}

@media screen and (min-width: 540px) {
  .guide-conten-main .img-area-main img,
  .guide-conten-main .img-area img {
    max-width: 50%;
  }
}
.faq-list {
  margin-top: 60px;
  padding: 60px 0 0;
  background-color: #f7f7f7;
}

.faq-list .faq {
  font-size: 15px;
  color: #f24538;
  font-weight: 700;
  padding: 0 8px;
}

.faq-list .faq-title {
  font-size: 32px;
  line-height: 44px;
  margin-top: 4px;
  padding: 0 8px;
}

.faq-list .faq-title strong {
  display: block;
}

.faq-list .list-content {
  margin: 16px 0 40px;
}

.faq-list .list-content li {
  padding: 24px 8px;
}

.faq-list .list-content li + li {
  border-top: var(--line-e6);
}

.faq-list .q-tit {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  word-break: keep-all;
}

.faq-list .q-tit .ico {
  margin-right: 4px;
}

.faq-list .q-cont {
  margin-top: 8px;
  word-break: keep-all;
}

.faq-list .answer {
  font-size: 15px;
  line-height: 22px;
}

.faq-list .faq-card {
  height: 90px;
  /* background: #eca336 url(/inc/coinone/img/img-talkbubble.png) no-repeat right 20px top 24px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 50px 50px;
  border-radius: 8px;
}

.faq-list .faq-card a {
  padding: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  display: block;
}

.faq-list .faq-card p {
  margin-top: 2px;
}

.num-column + .num-column {
  margin-top: 80px;
}

.num-column .num-title {
  text-align: center;
  font-size: 20px;
  margin-bottom: 8px;
}

.num-column .num-title .num {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #f24538;
  font-size: 12px;
  line-height: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 8px;
}

.num-column .num-title strong {
  display: block;
}

div + .btn-top {
  margin-top: 60px;
}

.faq-list.ipo {
  background-color: #fff;
  padding: 32px 16px;
  margin-top: 0;
}

/* 진입화면 */
.service-content {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro .front + .wrap-btn-sticky {
  background-color: transparent;
}

.intro .wrap-btn-sticky {
  background-color: #f7f7f7;
}

.intro-visual {
  position: relative;
  background: linear-gradient(0deg, #fff, #fff), linear-gradient(180deg, #fff 0%, #f5f5f5 21.35%);
}

.intro-visual .text-box {
  min-height: 459px;
  padding: 0 32px 48px;
}

.intro-visual.front {
  margin-top: 16px;
  /* background: url(/inc/coinone/img/bg-main.png) no-repeat right bottom 32px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100%;
  height: calc(100vh - 120px);
}

.intro-visual .logos {
  width: 180px;
  height: 20px;
  /* -webkit-mask: url(/inc/coinone/img/logos.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 180px auto;
  background-color: #bbb;
  margin-left: -4px;
}

.intro-visual h2 {
  margin-top: 16px;
  font-size: 30px;
  line-height: 38px;
  color: #000;
  font-weight: 400;
}

.intro-visual.front h2 {
  font-size: 42px;
  line-height: 52px;
  margin-top: 24px;
}

/* 진입화면-공모주 추가 */
.intro.ipo-wrap .intro-visual .text-box {
  min-height: 259px;
  padding: 0 32px 48px;
}

.intro.ipo-wrap {
  display: block;
  height: 100vh;
  background: linear-gradient(180deg, #fff 34.66%, #e1e1e1 67.99%, #bbb 100%);
}

.intro.ipo-wrap .intro-visual.front {
  margin-top: 24px;
  /* background: url(/inc/coinone/img/intro-visual-phone.png) no-repeat left 25% bottom -80px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 920px;
  height: calc(100vh - 80px);
}

.intro.ipo-wrap .intro-visual.front h2 {
  font-size: 36px;
  line-height: 44px;
}

.intro.ipo-wrap .intro-visual.front h2 p {
  opacity: 0.8;
  margin-top: 16px;
  font-size: 17px;
  line-height: 24px;
  color: #888;
}

.intro.ipo-wrap .intro-visual.front h2 p span + span {
  margin-top: 4px;
}

.intro.ipo-wrap .intro-visual.front h2 strong,
.ipo-wrap .intro-visual.front h2 span {
  display: block;
}

.intro.ipo-wrap .front + .wrap-btn-fixed {
  background: transparent;
  position: fixed;
}

.intro.ipo-wrap .animate-wrap {
  position: absolute;
  bottom: 330px;
  left: 25%;
  transform: translate(70px, 0);
  z-index: 1;
}

.intro.ipo-wrap .animate-wrap ul {
  display: flex;
}

.intro.ipo-wrap .animate-wrap ul li + li {
  margin-left: 16px;
}

.intro.ipo-wrap .animate-wrap ul li:nth-child(1) img {
  animation: bounce-Front 1s 0s ease;
}

.intro.ipo-wrap .animate-wrap ul li img {
  width: 164px;
  height: auto;
}

@keyframes bounce-Front {
  0% {
    transform: translateY(0px);
    animation-timing-function: ease;
    opacity: 0;
  }
  40% {
    transform: translateY(25px);
    animation-timing-function: ease;
    opacity: 0.5;
  }
  100% {
    transform: translateY(0px);
    animation-timing-function: ease;
    opacity: 1;
  }
}
@media screen and (min-width: 560px) {
  .intro-visual.front {
    background-size: 375px auto;
  }
}
@media screen and (max-width: 320px) {
  .intro-visual.front {
    background-position: right bottom;
  }
  .intro-visual.front h2 {
    font-size: 30px;
    line-height: 40px;
  }
}
/* 공모주 추가 */
@media screen and (max-height: 736px) {
  .intro.ipo-wrap .animate-wrap {
    position: absolute;
    bottom: 255px;
  }
  .intro.ipo-wrap .intro-visual.front {
    /* background: url(/inc/coinone/img/intro-visual-phone.png) no-repeat left 25% bottom -110px; */ /* 2026-07-24 레거시 이미지 삭제 */
    background-size: 800px;
  }
}
@media screen and (max-height: 667px) {
  .intro.ipo-wrap .animate-wrap {
    position: absolute;
    bottom: 255px;
  }
  .intro.ipo-wrap .intro-visual.front {
    /* background: url(/inc/coinone/img/intro-visual-phone.png) no-repeat left 25% bottom -110px; */ /* 2026-07-24 레거시 이미지 삭제 */
    background-size: 800px;
  }
}
@media screen and (max-width: 360px) and (max-height: 640px) {
  .intro.ipo-wrap .animate-wrap {
    position: absolute;
    bottom: 240px;
    left: 20%;
  }
  .intro.ipo-wrap .intro-visual.front {
    /* background: url(/inc/coinone/img/intro-visual-phone.png) no-repeat left 25% bottom -85px; */ /* 2026-07-24 레거시 이미지 삭제 */
    background-size: 700px;
  }
  .intro.ipo-wrap .animate-wrap ul li img {
    width: 124px;
    height: auto;
  }
}
@media screen and (max-width: 320px) and (min-height: 480px) {
  .intro-visual .logos {
    width: 164px;
    height: 14px;
    /* -webkit-mask: url(/inc/coinone/img/logos.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
    -webkit-mask-size: 165px auto;
    background-color: #bbb;
    margin-left: -4px;
  }
  .intro.ipo-wrap .intro-visual.front h2 {
    font-size: 32px;
    line-height: 40px;
    margin-top: 16px;
  }
  .intro.ipo-wrap .intro-visual.front h2 p {
    font-size: 16px;
    line-height: 20px;
  }
  .intro.ipo-wrap .intro-visual.front h2 p span + span {
    margin-top: 6px;
  }
  .intro.ipo-wrap .intro-visual.front {
    margin-top: 0;
    /* background: url(/inc/coinone/img/intro-visual-phone.png) no-repeat left 2% bottom -100px; */ /* 2026-07-24 레거시 이미지 삭제 */
    background-size: 632px;
    height: calc(100vh - 56px);
  }
  .intro.ipo-wrap .animate-wrap ul li + li {
    margin-left: 10px;
  }
  .intro.ipo-wrap .animate-wrap ul li img {
    width: 110px;
    height: auto;
  }
  .intro.ipo-wrap .animate-wrap {
    position: absolute;
    bottom: 170px;
    left: 50%;
    transform: translate(27px, 0);
    z-index: 1;
  }
}
@media screen and (max-width: 320px) and (min-height: 568px) {
  .intro.ipo-wrap .animate-wrap {
    position: absolute;
    bottom: 180px;
  }
}
@media screen and (max-width: 280px) {
  .intro.ipo-wrap .animate-wrap {
    position: absolute;
    bottom: 240px;
    left: 40%;
  }
  .intro.ipo-wrap .intro-visual.front {
    /* background: url(/inc/coinone/img/intro-visual-phone.png) no-repeat left 20% bottom -30px; */ /* 2026-07-24 레거시 이미지 삭제 */
    background-size: 632px;
  }
}
.intro-visual .event-period {
  font-size: 14px;
  color: #888;
  margin-top: 16px;
}

.agree-info-box {
  background-color: #f7f7f7;
  border-radius: 12px;
  padding: 18px 24px;
  margin: 16px 16px 17px;
}

.agree-info-box dt {
  font-size: 16px;
  line-height: 24px;
  color: #000;
  font-weight: 700;
}

.agree-info-box dd {
  margin-top: 13px;
}

.chk-box .form-group,
.agree-info-box .form-group {
  display: flex;
  align-items: center;
  position: relative;
}

.agree-info-box .form-group::after {
  content: "";
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  width: 20px;
  height: 20px;
  margin-left: auto;
  position: absolute;
  right: 0;
  z-index: 0;
}

.chk-box .form-group [type="checkbox"] + label,
.agree-info-box .form-group [type="checkbox"] + label {
  line-height: 28px;
  font-size: 15px;
  color: #666;
  padding-left: 36px;
  width: calc(100% + 20px);
  z-index: 1;
  padding-right: 20px;
}

.chk-box .form-group [type="checkbox"] + label {
  color: #222;
}

.chk-box .form-group [type="checkbox"] + label::before,
.agree-info-box .form-group [type="checkbox"] + label::before {
  width: 28px;
  height: 28px;
  z-index: 1;
}

.chk-box .form-group [type="checkbox"] + label::after,
.agree-info-box .form-group [type="checkbox"] + label::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--line-e6);
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.chk-box .form-group [type="checkbox"]:checked + label::before,
.agree-info-box .form-group [type="checkbox"]:checked + label::before {
  background-color: #fff;
}

.chk-box .form-group [type="checkbox"]:checked + label::after,
.agree-info-box .form-group [type="checkbox"]:checked + label::after {
  background-color: #000;
  border-color: #000;
}

.list-wrap + .chk-box.al {
  margin: 20px 0 0;
}

.intro-visual .animation {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 411px;
}

.intro-visual .animation .coupon {
  width: 181px;
  height: 200px;
  display: block;
  background-color: #000;
  position: absolute;
  right: 0;
  top: 239px;
  /* background: url(/inc/coinone/img/img-coupon.png) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% 100%;
}

.intro-visual .animation [class^="coin"] {
  position: absolute;
}

.intro-visual .animation .coin1 {
  width: 98px;
  height: 68px;
  left: 60px;
  bottom: 0;
  animation: coinMove 2.5s infinite;
  /* background: url(/inc/coinone/img/img-coin1.png) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% 100%;
}

@keyframes coinMove {
  0% {
    bottom: 0;
  }
  50% {
    bottom: 20px;
  }
  100% {
    bottom: 0;
  }
}
.intro-visual .animation .coin2 {
  width: 74px;
  height: 60px;
  right: 32px;
  top: 146px;
  animation: coinMove2 2.5s infinite;
  /* background: url(/inc/coinone/img/img-coin2.png) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% 100%;
}

@keyframes coinMove2 {
  0% {
    top: 126px;
  }
  50% {
    top: 146px;
  }
  100% {
    top: 126px;
  }
}
.intro-visual .animation .coin3 {
  width: 38px;
  height: 90px;
  right: 0;
  top: 0;
  /* background: url(/inc/coinone/img/img-coin3.png) no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% 100%;
}

@media screen and (max-width: 280px) {
  .intro-visual h2 {
    font-size: 24px;
    line-height: 28px;
  }
  .intro-visual .animation .coin1 {
    width: 88px;
    height: 58px;
  }
  .intro-visual .animation .coupon {
    width: 150px;
    height: 150px;
  }
}
.service-info-txt {
  font-size: 10px;
  color: #aaa;
  margin: 0 32px 16px;
}

.service-info-txt::before {
  content: "※";
  margin-right: 4px;
}

.list-info {
  margin-bottom: 60px;
}

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

.list-info > ul > li + li {
  border-top: var(--line-ee);
}

.list-info.accordion {
  border-top: var(--line-e6);
  background-color: #f7f7f7;
  padding-bottom: 32px;
  flex: 1;
  margin-bottom: 0;
}

.list-info.accordion > ul {
  border-bottom: var(--line-e6);
}

.list-info.accordion li {
  padding: 0;
}

.list-info.accordion li .title {
  padding: 20px 32px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
  position: relative;
  line-height: 24px;
}

.list-info.accordion li .title::after {
  content: "";
  width: 24px;
  height: 24px;
  /* background: url(/inc/coinone/img/arrow-bottom.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 14px auto;
  display: block;
  position: absolute;
  right: 32px;
  top: 20px;
}

.list-info.accordion li.on .title::after {
  transform: rotate(180deg);
}

.list-info.accordion > ul > li + li {
  border-top: var(--line-e6);
}

.list-info.accordion li [class^="list-text"] {
  font-size: 15px;
  color: #666;
}

.list-info.accordion li [class^="list-bar"] li {
  padding-left: 7px;
}

.list-info.accordion .list-bar li > [class^="list-bull"] li {
  padding-left: 8px;
  margin-left: 4px;
}

.list-info.accordion .list-sub {
  padding: 32px;
  border-top: var(--line-e6);
  display: none;
  word-break: keep-all;
}

.list-info.accordion .list-sub dt {
  font-size: 15px;
  font-weight: 700;
}

.list-info.accordion .list-sub dd {
  font-size: 15px;
  margin-top: 4px;
  color: #666;
}

.list-info.accordion .list-sub dd + dd {
  margin-top: 16px;
}

.bg-white .list-info.accordion {
  border-top: var(--line-ee);
  background-color: #fff;
}

.list-info .list-text-ul li + li {
  margin-top: 8px;
  line-height: 26px;
}

.list-info .list-text + dl,
.list-info .list-sub dl + dl {
  margin-top: 24px;
}

.list-info .list-dl {
  margin-top: 24px;
}

.list-info .list-dl dl + dl {
  margin: 16px 0 0;
}

.info-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.info-content .count {
  font-size: 17px;
}

.info-content .won {
  font-size: 15px;
}

.info-content + .info-content {
  margin-top: 4px;
}

.info-content .date {
  font-size: 12px;
  color: #888;
}

/* 신용거래 2차*/
/* main */
/* .wrap-btn.label-banner{margin-top: 16px;} */
[class^="wrap-btn"] .btn-block3 .tip {
  display: none;
}

[class^="wrap-btn"] .btn-block3.active .tip {
  display: block;
}

[class^="wrap-btn"] .btn-block3 {
  color: #222;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px 16px 16px;
  background: rgba(137, 75, 176, 0.0588235294);
}

[class^="wrap-btn"] .btn-block3 ::after {
  content: "";
  width: 6px;
  height: 10px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat 50% center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-5px);
}

[class^="wrap-btn"] .btn-block3.active {
  background: rgba(242, 69, 56, 0.0392156863);
  color: #f24538;
}

[class^="wrap-btn"] .btn-block3 .name {
  color: #222;
  display: flex;
  align-items: center;
}

[class^="wrap-btn"] .btn-block3 .name::before {
  content: "";
  width: 16px;
  height: 20px;
  display: inline-block;
  background: #894bb0;
  /* -webkit-mask: url(/inc/coinone/img/icon-money.svg) no-repeat no-repeat top 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
  position: relative;
  margin-right: 6px;
}

[class^="wrap-btn"] .btn-block3.active .name::before {
  background: #f24538;
  /* -webkit-mask: url(/inc/coinone/img/icon-warning.svg) no-repeat 50% center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

/* [class^="wrap-btn"].ipo .btn-block3 .name::before{content: ''; width: 16px; height: 18px; display: inline-block; background: #009da7; -webkit-mask: url(/inc/coinone/img/icon-ipo.svg) no-repeat top -1px center;-webkit-mask-size: 16px auto; position: relative; margin-right: 6px;} */
[class^="wrap-btn"].ipo .btn-block3 .name::before {
  content: "";
  width: 18px;
  height: 20px;
  display: inline-block;
  /* background: url(/inc/coinone/img/icon-ipo.svg) no-repeat top 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 18px auto;
  position: relative;
  margin-right: 6px;
  -webkit-mask: none;
}

/* 신용거래+공모주 banner*/
.label-banner-wrap {
  margin-top: 16px;
  background-color: #f7f7f7;
  border-radius: 10px;
  padding: 0 16px;
}

.label-banner-wrap [class^="wrap-btn"] .btn-block3 {
  color: #222;
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px 20px 0;
  background: #f7f7f7;
}

.label-banner-wrap [class^="wrap-btn"] .btn-block3.active {
  color: #f24538;
}

.label-banner-wrap .wrap-btn.label-banner + .wrap-btn.label-banner {
  margin-top: 0;
  border-top: 1px #eee solid;
}

.label-banner-wrap .wrap-btn.label-banner[hidden] + .wrap-btn.label-banner {
  margin-top: 0;
  border-top: none;
}

.label-banner-wrap [class^="wrap-btn"] .btn-block3 ::after {
  right: 0;
}

.section-swiper.ipo .banner-wrap .txtarea {
  padding: 20px 16px 20px 20px;
  width: calc(100% - 100px);
  flex: 1;
}

.section-swiper.ipo .banner-wrap .txtarea .banner-txt {
  font-size: 16px;
}

.section-swiper.ipo .banner-wrap .txtarea strong {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* .label-banner-wrap .btn-block3{color: #222; font-size: 13px; line-height: 20px; font-weight: 400; display: flex; align-items: center; justify-content: space-between; padding: 16px 32px 16px 16px; background: #fff; border: 1px #e6e6e6 solid; border-radius: 10px 10px 0 0;} */
/* .label-banner-wrap .wrap-btn.label-banner + .wrap-btn.label-banner.ipo{margin-top: -1px;}
.label-banner-wrap .wrap-btn.label-banner + .wrap-btn.label-banner.ipo .btn-block3{margin-top: -1px; border-radius: 0 0 10px 10px;}
.label-banner-wrap [hidden] + .wrap-btn.label-banner{margin-top: 16px !important;}
.label-banner-wrap [hidden] + .wrap-btn.label-banner .btn-block3{border-radius: 10px !important;}
.label-banner-wrap>.wrap-btn.label-banner.ipo{margin-top: 16px;}
.label-banner-wrap>.wrap-btn.label-banner.ipo .btn-block3{ border-radius: 10px;} */
.dl-list .open-sheet.ellipsis {
  width: calc(100% - 88px);
}

.dl-list .open-sheet.ellipsis .select::after {
  right: 0;
}

.dl-list .open-sheet.ellipsis .select {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
  overflow: hidden;
  display: block;
  padding-right: 35px;
  line-height: 32px;
}

.chk-list .add-input-area li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.chk-list .add-input-area .input-box {
  display: none;
}

.chk-list .add-input-area .input-box.open {
  display: flex;
}

.chk-list .add-input-area .input-box {
  justify-content: space-between;
  align-content: center;
  width: 100%;
  background: #fff;
  line-height: 22px;
  padding: 16px;
  font-size: 15px;
  margin-top: 16px;
  border-radius: 10px;
}

.chk-list .add-input-area .input-box input {
  width: calc(100% - 40px);
  border: none;
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  border-radius: 0;
}

.chk-list .add-input-area .input-box input + span {
  width: 40px;
  text-align: right;
}

.input-bg-wrap.input-box input {
  background: #fff;
}

.credit-view {
  margin: 56px 24px;
}

.credit-score .info-box {
  border-radius: 8px;
  background-color: rgba(236, 95, 95, 0.0588235294);
  padding: 32px 0;
  text-align: center;
  margin-bottom: 24px;
}

.credit-score .info-box .name {
  font-size: 14px;
  font-weight: 700;
}

.credit-score .info-box .score {
  font-size: 24px;
  color: #f24538;
  font-weight: 700;
  line-height: 32px;
}

.credit-score .title {
  font-size: 20px;
  padding: 8px 0;
  margin-bottom: 32px;
  text-align: left;
  line-height: 28px;
}

.form-content.form-box-top + .agree-content {
  padding-top: 12px;
}

.form-content.form-box-top {
  padding: 24px 24px 43px 24px;
  margin-top: 0;
  background-color: #fff;
}

.guide-bottom {
  padding: 24px 24px 50px 24px;
  word-break: keep-all;
}

.guide-bottom .info-tit {
  font-size: 15px;
  font-weight: 700;
  color: #888;
}

.guide-bottom .info-tit + .sm-text {
  margin-top: 8px;
}

.pop-info-tit .form-group [type="checkbox"] + label {
  display: block;
}

.wrap-btn.icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-12px);
}

.wrap-btn.icon a {
  font-size: 0;
  width: 24px;
  height: 24px;
}

.wrap-btn.icon a + a {
  margin-left: 16px;
}

.wrap-btn.icon a.icon-tel::before {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  /* background: url(/inc/coinone/img/icon-tel.svg); */ /* 2026-07-24 레거시 이미지 삭제 */
  top: 0;
  left: 0;
}

.invest-content {
  padding-top: 22px;
}

.invest-content .info-area {
  margin: 0 8px;
}

.invest-content .md-title {
  font-size: 17px;
  text-align: center;
  line-height: 24px;
}

.invest-content .md-title .sm-text {
  margin-top: 8px;
}

.invest-content .grade-list {
  text-align: center;
}

.invest-content .grade-list dt {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: center;
}

.invest-content .grade-list dt.flex-column {
  flex-direction: column;
}

.invest-content .grade-list dt span {
  font-size: 10px;
  line-height: 20px;
  width: 36px;
  display: inline-block;
  margin-left: 4px;
}

.invest-content .grade-list dt span {
  position: relative;
}

.invest-content .grade-list dt span::before {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border: 1px solid !important;
  opacity: 0.6;
  border-radius: 2px;
}

.invest-content .grade-list dt span + strong {
  font-size: 28px;
  line-height: 36px;
  display: block;
  margin-top: 6px;
}

.invest-content .grade-list dd ul li + li {
  margin-left: 32px;
}

.invest-content .grade-list dd ul li::before {
  content: "";
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50px;
  display: block;
  margin-bottom: 10px;
}

/* 예금자비보호 */
.invest-content .grade-list dd ul li.i-unprot::before {
  /* background: url(/inc/coinone/img/icon-unprot.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 원금손실가능 */
.invest-content .grade-list dd ul li.i-loss::before {
  /* background: url(/inc/coinone/img/icon-loss.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 자기책임원칙 */
.invest-content .grade-list dd ul li.i-self::before {
  /* background: url(/inc/coinone/img/icon-rule.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 예금자보호 */
.invest-content .grade-list dd ul li.icon-prot::before {
  /* background: url(/inc/coinone/img/icon-prot.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 원금보장 */
.invest-content .grade-list dd ul li.icon-principal::before {
  /* background: url(/inc/coinone/img/icon-principal.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

.invest-content .grade-list dd ul {
  display: flex;
  justify-content: center;
  font-size: 14px;
  line-height: 18px;
  color: #222;
  margin-top: 24px;
}

.invest-content .grade-list dd {
  color: #888;
  font-size: 13px;
  line-height: 20px;
  margin-top: 4px;
}

.invest-content .chk-list {
  margin-top: 40px;
  margin-bottom: 40px;
}

.invest-content .form-group.form-link span i.active::after {
  background-color: #aaa;
}

.invest-content .form-group.form-link span i::after {
  content: "";
  width: 8px;
  height: 24px;
  display: inline-block;
  background: #0083d1;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-12px);
  z-index: 0;
}

.invest-content .form-group.form-link span i.active {
  color: #aaa;
  font-weight: 400;
}

.invest-content .list-wrap dt {
  margin-bottom: 4px;
}

.invest-content .list-wrap dd,
.invest-content .list-wrap li {
  font-size: 15px;
  line-height: 26px;
  color: #666;
}

.invest-content .info-area .trade-list {
  margin: 0 0 24px 0;
}

.invest-content .info-area.list-mg .list-wrap dd + dd,
.invest-content .info-area.list-mg .list-wrap li + li {
  margin-top: 8px;
}

.invest-content .info-area.list-mg {
  margin-bottom: 60px;
}

.invest-content .info-area.list-mg + .btn-wrap-box {
  margin-top: -36px !important;
}

.invest-content .info-area.list-mg .btn-wrap-box {
  margin-top: 32px !important;
}

.invest-content .info-area.list-mg .list-bar + .list-asterisk {
  margin-top: 4px;
}

.invest-content .chk-list .form-link [type="checkbox"] + label {
  color: #222;
}

.invest-content .chk-list .form-link .text i {
  font-style: normal;
}

.invest-content .chk-list .form-link .text-none,
.invest-content .chk-list .form-link .text {
  word-break: keep-all;
  color: #0083d1;
  padding-right: 16px;
  font-weight: 700;
}

.invest-content .list-tooltip li + li {
  margin-top: 24px;
}

.invest-content .list-tooltip li .tooltip-cont {
  display: flex;
  height: 40px;
  align-items: center;
}

.invest-content .list-tooltip li .btn-tooltip {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background: none;
}

.invest-content .list-tooltip li .btn-tooltip::after {
  content: "";
  width: 20px;
  height: 20px;
  /* background: url(/inc/coinone/img/ico-qmark.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  display: block;
  margin-left: 4px;
  position: relative;
}

.invest-content .list-tooltip li .btn-tooltip::before {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50px;
  display: block;
  margin-right: 16px;
  position: relative;
  right: 0;
  top: 0;
  z-index: 0;
}

/* 자료열람요구권 */
.invest-content .list-tooltip li.i-tip-arr .btn-tooltip::before {
  /* background: url(/inc/coinone/img/img-tip-arr.png) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 위법계약해지권 */
.invest-content .list-tooltip li.i-tip-law .btn-tooltip::before {
  /* background: url(/inc/coinone/img/img-tip-law.png) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 청약철회권 */
.invest-content .list-tooltip li.i-tip-cancel .btn-tooltip::before {
  /* background: url(/inc/coinone/img/img-tip-cancel.png) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

/* 장부열람권 */
.invest-content .list-tooltip li.i-tip-key .btn-tooltip::before {
  /* background: url(/inc/coinone/img/img-tip-key.png) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100% auto;
}

.invest-content .list-tooltip li .btn-tooltip {
  font-weight: 400;
}

.bg-gray-box {
  background-color: #f7f7f7;
  border-radius: 8px;
  margin: 24px 0;
  padding: 24px 24px 32px;
  text-align: center;
}

.bg-gray-box.sm-text2 {
  padding: 16px;
  text-align: left;
  color: #222;
  margin: 0;
}

.bg-gray-box .title {
  font-weight: 700;
  line-height: 18px;
}

.bg-gray-box ul {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.bg-gray-box ul li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 33%;
}

.bg-gray-box ul li em {
  font-style: normal;
  font-size: 11px;
  display: block;
}

.bg-gray-box ul li span {
  font-size: 15px;
  color: #222;
  font-weight: 700;
  width: 60px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 50px;
  display: block;
  line-height: 58px;
  margin-bottom: 8px;
}

.bg-gray-box ul li + li::before {
  content: "";
  width: 6px;
  height: 24px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  left: -3px;
  top: 18px;
}

/* 이해 여부 확인 */
/* 변경된 디자인 */
.contents .section.last.line .section-inner {
  justify-content: flex-start;
  height: auto;
}

.contents .section.last.line .wrap-btn-fixed {
  bottom: auto;
  z-index: auto;
  position: relative;
}

.contents .section.last.line {
  margin: 0 !important;
  background: #fff !important;
  border-top: 8px solid #eee;
  display: block;
}

.contents .section.last.line .service-info {
  border-bottom: 8px solid #eee;
  display: block;
}

.question-area {
  margin: 0 8px;
  word-break: keep-all;
}

.question-area .content {
  margin-top: 40px;
  color: #222;
  font-size: 15px;
  line-height: 22px;
}

.question-area .content + .content {
  margin-top: 40px;
}

.question-area .content dt em {
  display: block;
  font-weight: 700;
  font-size: 17px;
  color: #0083d1;
  margin-bottom: 4px;
}

.question-area .content dd {
  margin-top: 24px;
}

.question-area .content [class^="wrap-btn"] .btn-col {
  height: 48px;
}

[class^="wrap-btn"] [class^="btn-"] + [class^="btn-"] {
  margin-left: 8px;
}

.question-area .content dt .list-asterisk {
  margin-top: 8px;
  color: #888;
  font-size: 13px;
  line-height: 20px;
}

.question-area .content dt .list-asterisk + .list-asterisk {
  margin-top: 4px;
}

.question-area .content dd .text-view {
  margin-top: 16px;
  font-size: 13px;
  line-height: 20px;
}

.question-area .content dd .text-view p {
  display: flex;
  position: relative;
  padding-left: 20px;
}

.question-area .content dd .text-view .default {
  color: #0083d1;
}

.question-area .content dd .text-view .yes {
  color: #aaa;
}

.question-area .content dd .text-view .no {
  color: #f24538;
}

.question-area .content dd .text-view p::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 10px;
  display: inline-block;
  left: 0;
  top: 2px;
  background: #0083d1;
  /* -webkit-mask: url(/inc/coinone/img/icon-point.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

.question-area .content dd .text-view p.yes::before {
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/icon-check.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

.question-area .content dd .text-view p.no::before {
  background: #f24538;
  /* -webkit-mask: url(/inc/coinone/img/icon-point.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

.question-area .text-cont-xs {
  font-weight: 700;
  margin: 60px -8px 24px;
  text-align: center;
}

.btn-wrap-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 60px;
}

.btn-wrap-box button + button {
  margin-left: 8px;
}

.btn-wrap-box button {
  width: 100%;
  background-color: #f7f7f7;
  padding: 20px;
  border-radius: 8px;
  text-align: left;
  line-height: 18px;
  font-size: 14px;
  font-weight: 700;
}

.btn-wrap-box button strong {
  font-weight: 700;
}

.btn-wrap-box button p + p {
  margin-top: 4px;
}

.btn-wrap-box button::after {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 6px auto;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-12px);
}

/* .btn-wrap-box .btn-gray + .btn-gray{margin-left: 8px;}
.btn-wrap-box .btn-gray{width: 100%; background-color: #f7f7f7; padding: 20px; border-radius: 8px; text-align: left;  line-height: 18px; font-size: 14px;}
.btn-wrap-box .btn-gray strong{font-weight: 700;}
.btn-wrap-box .btn-gray p + p{margin-top: 4px;}
.btn-wrap-box .btn-gray::after{content: ''; width: 24px; height: 24px; display: inline-block; background: #aaa; -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; -webkit-mask-size: 6px auto; position: absolute; right: 20px; top: 50%;  transform: translateY(-12px);} */
/* 신용공여 투자자정보 평가결과 */
.info-container {
  text-align: left;
}

.info-container .text-cont-md {
  margin-top: 0;
}

.info-container .list-type2 {
  margin: 24px 0;
}

.info-container .list-type2 dl {
  display: flex;
  align-items: flex-start;
}

.info-container .propensity-area {
  margin-top: 24px;
}

.info-container .propensity-area .propensity-list.short {
  margin-top: 24px;
  padding-bottom: 60px;
}

.info-container .propensity-area .sm-text {
  margin-top: 16px;
  position: absolute;
  bottom: 24px;
}

.info-container + .info-container {
  margin-top: 48px;
}

.info-container .chk-box {
  text-align: left;
  margin-top: 24px;
}

.info-container .chk-box .form-group [type="checkbox"] + label {
  line-height: 22px;
  color: #222;
}

.top-content.list2 {
  background-color: #fff;
  padding: 24px 24px 0px;
  text-align: left;
}

/* .unsuitable.show .loans .sm-text{margin-top: 4px; margin-bottom: 0; text-align: center;} */
.unsuitable .chk-box,
.unsuitable .loans {
  display: none;
}

.unsuitable.show .chk-box,
.unsuitable.show .loans {
  display: block;
}

.unsuitable.show .loans .title-wrap {
  margin-bottom: 16px;
}

.unsuitable.show .loans .text-cont-md {
  line-height: 24px;
}

.unsuitable.show .loans {
  margin-top: 48px;
}

.unsuitable.show .loans .list-type2 {
  margin-top: 16px;
}

.unsuitable.show .chk-box {
  margin: 32px -8px 0;
  background: #f7f7f7;
  padding: 18px 16px;
  border-radius: 8px;
}

.unsuitable .sm-text {
  color: #222;
  margin-top: 32px;
  text-align: center;
  margin-bottom: 16px;
}

.unsuitable.show .text-cont-md {
  margin-top: 4px;
}

.unsuitable.show .chk-box .form-group [type="checkbox"] + label {
  line-height: 22px;
}

.careful-area {
  margin: 48px 0 0;
}

.careful-area .list-wrap {
  text-align: left;
}

.careful-area .list-wrap dt {
  font-size: 20px;
  margin-bottom: 24px;
}

.pop-content .info-container .propensity-area .propensity-list.short {
  margin: 0;
  background: #fff;
  border: 1px #eee solid;
}

.pop-content .trade-list .unsuitable .chk-box {
  margin: 16px 0px 24px;
  display: block;
  background: #f7f7f7;
  padding: 18px 16px;
  border-radius: 8px;
}

.pop-content .trade-list .unsuitable .chk-box .form-group [type="checkbox"] + label {
  font-size: 13px;
  line-height: 20px;
}

.pop-content .sm-text.info {
  z-index: 7;
  position: absolute;
  bottom: 107px;
  text-align: center;
  margin: 0 auto;
  width: calc(100% - 32px);
  color: #222;
}

/* 발행어음 */
.btn-tooltip.style {
  /* background: url(/inc/coinone/img/ico-qmark2.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
}

.section-top.no-list {
  min-height: 100%;
  flex: 1;
  display: flex;
}

.section-top.no-list .section-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-top .list-stock {
  margin-bottom: 0;
}

.section-top {
  margin: 0;
  background-color: #fff;
  position: relative;
}

.section.division2 + .section + .footer,
.section-top + .footer {
  margin-top: 40px;
}

.section-inner.list {
  padding: 0 24px;
}

.form-content .form-group [type="radio"] + label {
  display: flex;
  align-items: center;
}

.section-inner > .form-content {
  margin-top: 24px;
}

.list-content {
  margin-top: 24px;
}

.list-content + .mid-content {
  margin: 40px 0 0;
}

#toast-popup.bottom {
  position: fixed;
  bottom: 10px;
  z-index: 100;
  width: 100%;
}

.main-list .list-stock .stock-icon + .stock-text {
  flex: inherit;
  width: calc(100% - 55px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 0 8px;
}

.list-stock .link-arrow2 .stock-icon + .stock-text {
  flex: inherit;
  width: calc(100% - 75px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 8px;
}

.warn .stock-icon,
.warn .link-arrow2::after,
.warn .stock-per,
.warn .text-sm span,
.warn .stock-title {
  opacity: 0.5;
}

/* .warn .text-sm{display: none;} */
/* .bond-pro .warn .text-sm{display: none;} */
/* .warn .text-sm{color: #f24538 !important;} */
.sm-text-area {
  word-break: keep-all;
  padding-right: 32px;
}

.dl-list.input-ar {
  height: 80px;
  border: 1px solid #eee;
}

.dl-list.input-ar dt {
  min-width: 60px;
  font-size: 14px;
  color: #888;
}

.dl-list.input-ar dd {
  text-align: right;
  display: flex;
  justify-content: center;
  flex-direction: column;
  line-height: inherit;
  align-items: flex-end;
}

.dl-list.input-ar dd .input-area {
  height: 24px;
  font-size: 16px;
  line-height: 24px;
  display: flex;
  justify-content: flex-end;
}

.dl-list.input-ar dd .label-text {
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: right;
}

.input-ar dd input::-webkit-input-placeholder,
.input-ar dd input::placeholder {
  font-weight: 400;
}

.input-ar dd .input-type[class^="input-"] {
  text-align: right;
  font-weight: 700;
}

.input-ar dd .input-type.line-text {
  width: calc(100% - 20px);
}

.input-ar dd .input-type.line-text2 {
  width: calc(100% - 50px);
}

.list-type1.bg-box {
  background: #fff;
  padding: 0 16px;
  margin: 8px 0 0 0;
  border: 1px solid #aaa;
  position: relative;
}

.list-type1.bg-box dl:first-child {
  padding-top: 14px;
}

.list-type1.bg-box dl:last-child {
  padding-bottom: 14px;
}

.list-type1.bg-box dl {
  border-color: #f5f5f5;
}

.list-type1.bg-box dd {
  word-break: break-all;
}

.list-type1.bg-box dl dt {
  min-width: 120px;
  line-height: 18px;
  display: flex;
  align-items: center;
}

.bg-box dt,
.total dt {
  color: #222;
}

.list-type1.bg-box dl:last-child {
  border-bottom: none;
}

.list-type1.total {
  padding: 0 18px;
  margin: 8px 0 0 0;
  background-color: #eee;
  border: 1px solid #aaa;
}

.list-type1.total dl {
  border-bottom: none;
  padding: 14px 0;
}

.list-type1.total dl + dl {
  border-top: 1px solid #e6e6e6;
}

.list-type1.total dl dt,
.list-type1.total dl dd {
  line-height: 18px;
  display: flex;
  align-items: center;
}

.box-wid .list-type1 dd {
  width: calc(100% - 100px);
}

.box-wid .list-type1 dd .ellipsis {
  display: block;
}

.propensity-area {
  margin: 40px 0 0;
}

.propensity-area .title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.propensity-area .propensity-list {
  background-color: #f7f7f7;
  border-radius: 16px;
  padding: 24px 20px;
  margin: 16px -8px 0;
  display: flex;
  justify-content: center;
  position: relative;
}

.propensity-area .propensity-list ul {
  background-color: #fff;
  min-width: 90px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 4px;
}

.propensity-area .propensity-list ul li:first-child div {
  border-radius: 4px 4px 0 0;
}

.propensity-area .propensity-list ul li:last-child div {
  border-radius: 0 0 4px 4px;
}

.propensity-area .propensity-list ul li {
  display: block;
  width: 100%;
}

.propensity-area .propensity-list ul li div {
  color: #000;
  position: relative;
  text-align: center;
  border: 1px solid;
  font-size: 13px;
  padding: 8px;
  line-height: 16px;
  border-color: #e6e6e6;
}

.propensity-area .propensity-list .stage-six ul li div {
  font-size: 12px;
  padding: 8px;
  line-height: 16px;
}

.propensity-area .propensity-list ul li .level-text span {
  color: #888;
  font-weight: 400 !important;
  line-height: 20px;
}

.propensity-area .propensity-list ul li + li[class^="level"] > div {
  margin-top: -1px;
  border-top: none;
}

.propensity-area .propensity-list ul li:last-child div {
  border-bottom: 1px #e6e6e6 solid;
}

.propensity-area .propensity-list ul li.active div {
  margin-bottom: 0px;
  border-top: 1px solid !important;
}

.propensity-area .propensity-list ul li.active + li.active div {
  margin-bottom: 0;
  margin-top: -1px;
}

.propensity-area .propensity-list ul li strong {
  display: block;
  font-size: 13px;
  line-height: 20px;
}

.propensity-list li[class^="level"] .level-tip {
  display: none;
}

.propensity-list li[class^="level"] .level-tip.on {
  display: block;
}

.propensity-area .propensity-list .tip .level-tip {
  position: absolute;
  right: 0;
  top: 50%;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  border-radius: 14px;
  padding: 3px 6px;
  transform: translate(88px, -12px);
}

.propensity-area .propensity-list .tip .point {
  display: block;
  position: absolute;
  border-top-right-radius: 30%;
  transform: rotate(153deg) skewX(324deg) scale(1, 0.866) translate(0px, -4px);
  width: 10px;
  height: 0px;
  left: -4px;
  top: 50%;
  background-color: inherit;
}

.propensity-area .propensity-list .tip .point::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); /* border-top-right-radius: 30%; */
  background-color: inherit;
}

.propensity-area .propensity-list .tip .my-active.on {
  display: block;
}

.propensity-area .propensity-list .tip .my-active {
  display: none;
  position: absolute;
  right: calc(50% + 58px);
  transform: translateY(-12px);
  top: 50%;
  background-color: #222;
  font-size: 10px;
  line-height: 14px;
  border-radius: 20px;
  padding: 3px 6px;
  color: #fff !important;
  min-width: 70px;
  border: none;
}

/* 부정합확인서 위험도 */
.propensity-area .propensity-list > .my-active {
  display: block;
  position: absolute;
  right: calc(50% + 58px);
  transform: translateY(-12px);
  top: 50%;
  background-color: #222;
  font-size: 10px;
  line-height: 14px;
  border-radius: 20px;
  padding: 3px 6px;
  color: #fff !important;
  min-width: 70px;
  border: none;
}

.propensity-area .propensity-list > .level-tip {
  position: absolute;
  right: calc(50% - 132px);
  top: 50%;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  border-radius: 14px;
  padding: 3px 6px;
}

.level6.level-tip {
  background: #f34b55;
}

.level5.level-tip {
  background: #f88004;
}

.level4.level-tip {
  background: #f88004;
}

.level3.level-tip {
  background: #14ae5c;
}

.level2.level-tip {
  background: #0094ff;
}

.level1.level-tip {
  background: #2b4eb6;
}

.propensity-area .propensity-list ul + .my-active .point {
  display: block;
  position: absolute;
  border-top-right-radius: 30%;
  transform: rotate(333deg) skewX(324deg) scale(1, 0.866) translate(0px, -5px);
  width: 10px;
  height: 0px;
  right: -8px;
  left: auto;
  top: 50%;
  background-color: inherit;
}

.propensity-area .propensity-list ul + .my-active .point::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
  border-top-right-radius: 30%;
  background-color: inherit;
}

.propensity-area .propensity-list > .level-tip .point {
  display: block;
  position: absolute;
  border-top-right-radius: 30%;
  transform: rotate(153deg) skewX(324deg) scale(1, 0.866) translate(10px, -1px);
  width: 10px;
  height: 0px;
  left: 0px;
  top: 50%;
  background-color: inherit;
}

.propensity-area .propensity-list > .level-tip .point::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); /* border-top-right-radius: 30%; */
  background-color: inherit;
}

/* 투자성향 5단계 */
.propensity-area .propensity-list .my-active.level1,
.propensity-area .propensity-list .level-tip.level1 {
  top: 80%;
  transform: translateY(2px);
}

.propensity-area .propensity-list .my-active.level2,
.propensity-area .propensity-list .level-tip.level2 {
  top: 60%;
  transform: translateY(12px);
}

.propensity-area .propensity-list .my-active.level3,
.propensity-area .propensity-list .level-tip.level3 {
  top: 40%;
  transform: translateY(22px);
}

.propensity-area .propensity-list .my-active.level4,
.propensity-area .propensity-list .level-tip.level4 {
  top: 20%;
  transform: translateY(32px);
}

.propensity-area .propensity-list .my-active.level5,
.propensity-area .propensity-list .level-tip.level5 {
  top: 0;
  transform: translateY(42px);
}

.propensity-area .propensity-list .my-active .point {
  display: block;
  position: absolute;
  border-top-right-radius: 30%;
  transform: rotate(333deg) skewX(324deg) scale(1, 0.866) translate(0px, -3px);
  width: 10px;
  height: 0px;
  right: -4px;
  left: auto;
  top: 50%;
  background-color: inherit;
}

.propensity-area .propensity-list .my-active .point::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
  border-top-right-radius: 30%;
  background-color: inherit;
}

/* .propensity-area .propensity-list .my-active .point{display: block; position: absolute; border-top-right-radius: 30%; transform: rotate(333deg) skewX(324deg) scale(1, 0.866) translate(0px, -3px); width: 10px; height: 0px; right: -4px; left: auto; top: 50%; background-color: inherit;}
.propensity-area .propensity-list .my-active .point::before {content: ''; width: 6px; height: 6px; position: absolute; transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); border-top-right-radius: 30%; background-color: inherit;} */
.propensity-area .propensity-list .row-area {
  background-color: #fff;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  display: flex;
  flex: 1;
  width: 100%;
  min-width: 220px;
  margin-top: 32px;
  border-radius: 4px;
}

.propensity-area .propensity-list .stage-six .row-area {
  width: 99.6%;
}

.propensity-area .propensity-list .stage-six .row-area li {
  width: 16.6%;
}

.propensity-area .propensity-list .row-area li {
  width: 20%;
}

.propensity-area .propensity-list .row-area li div {
  color: #888;
}

.propensity-area .propensity-list .row-area li:first-child div {
  border-radius: 4px 0 0 4px;
}

.propensity-area .propensity-list .row-area li:last-child div {
  border-radius: 0 4px 4px 0;
}

.propensity-area .propensity-list .row-area li:first-child div,
.propensity-area .propensity-list .row-area li + li > div {
  border-right: none;
  border-bottom: 1px solid;
  border-color: #e6e6e6;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
}

.propensity-area .propensity-list .row-area li:last-child div {
  border-right: 1px solid;
  border-color: #e6e6e6;
}

.propensity-area .propensity-list .row-area li.active div {
  border-right: 1px solid;
}

.propensity-area .propensity-list .row-area li[class^="level"] + li[class^="level"] > div {
  border-top: 1px solid;
  border-color: #e6e6e6;
  margin-top: 0;
}

.row-area.level4.active .level5 > div,
.row-area.level3.active .level4 > div,
.row-area.level2.active .level3 > div,
.row-area.level1.active .level2 > div {
  border-left: none;
}

.propensity-area .propensity-list .row-area .my-active {
  display: none;
}

.propensity-area .propensity-list .row-area.level1 .level1 .my-active,
.propensity-area .propensity-list .row-area.level2 .level2 .my-active,
.propensity-area .propensity-list .row-area.level3 .level3 .my-active,
.propensity-area .propensity-list .row-area.level4 .level4 .my-active,
.propensity-area .propensity-list .row-area.level6 .level6 .my-active,
.propensity-area .propensity-list .row-area.level5 .level5 .my-active {
  display: block;
}

.propensity-area .propensity-list .row-area .my-active {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  border-radius: 14px;
  padding: 3px 6px;
  transform: translate(-33px, -58px);
  background-color: #222;
  width: 67px;
  height: 20px;
}

.propensity-area .propensity-list .row-area .my-active .point {
  display: block;
  position: absolute;
  border-top-right-radius: 0;
  width: 0px;
  height: 0px;
  left: 50%;
  top: auto;
  bottom: 0;
  transform: translate(-3px, 0px);
}

.propensity-area .propensity-list .row-area .point::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  transform: none;
  border-top-right-radius: 0;
  display: block;
  border-top: 5px solid #222;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  background: none;
}

.pop-content .propensity-area .propensity-list .row-area li {
  width: 16.6%;
}

.pop-content .propensity-area .propensity-list .row-area .my-active {
  width: 36px;
  transform: translate(-18px, -58px);
}

/* .propensity-area .propensity-list .row-area .my-active .point {display: block; position: absolute; border-top-right-radius: 30%; transform: rotate(-52deg) skewX(299deg) scale(1, 0.866) translate(0px, -4px); width: 10px; height: 0px; left: 41%; top: auto; bottom: 0; background-color: #222;}
.propensity-area .propensity-list .row-area  .point::before {content: ''; width: 6px; height: 6px; position: absolute; transform: rotate(220deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%); background-color: #222; border-top-right-radius: 30%;} */
.propensity-area .propensity-list .row-area li div {
  padding: 5px;
  min-height: 52px;
}

.pro-wrap {
  margin-top: 0;
  margin-bottom: 50px;
  text-align: left;
  padding: 0 24px;
}

.pro-wrap .propensity-area,
.pro-wrap .cons-content {
  margin-top: 24px;
}

.pro-wrap .propensity-area .propensity-list.group-area .row-area.level1 + .my-active {
  width: calc(16.6% - 7px) !important;
}

.pro-wrap .propensity-area .propensity-list.group-area .row-area.level2 + .my-active {
  width: calc(33.2% - 15px) !important;
}

.pro-wrap .propensity-area .propensity-list.group-area .row-area.level3 + .my-active {
  width: calc(49.8% - 23px) !important;
}

.pro-wrap .propensity-area .propensity-list.group-area .row-area.level4 + .my-active {
  width: calc(83% - 34px) !important;
}

/* .pro-wrap .propensity-area .propensity-list.group-area .row-area.level5 + .my-active{width: calc(83% - 34px) !important;} */
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level5 + .my-active {
  width: calc(100% - 44px);
}

/* .pro-wrap .propensity-area .propensity-list.group-area .row-area.level1 + .my-active{width: calc(20% - 8px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level2 + .my-active{width: calc(40% - 18px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level3 + .my-active{width: calc(60% - 28px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level4 + .my-active{width: calc(80% - 38px) !important;}
.pro-wrap .propensity-area .propensity-list.group-area .row-area.level5 + .my-active{width: calc(100% - 48px);} */
.pro-wrap .propensity-area .propensity-list.group-area .my-active .line-icon {
  white-space: nowrap;
}

.pro-wrap .propensity-area .propensity-list.group-area .my-active .line-icon::before {
  content: "";
  width: 100%;
  border: 1px #ddd solid;
  position: absolute;
  bottom: -12px;
  left: 0;
  height: 10px;
  border-bottom: none;
  border-radius: 2px 2px 0px 0px;
}

.pro-wrap .propensity-area .propensity-list.group-area .row-area + .my-active {
  position: absolute;
  left: 22px;
  right: auto;
  transform: translate(0%, -46px);
  top: 50%;
  background-color: transparent;
  font-size: 12px;
  line-height: 20px;
  border-radius: 0;
  padding: 0;
  color: #888 !important;
  width: calc(100% - 43px);
  text-align: center;
}

.pro-wrap .propensity-area .text-cont-md {
  margin-top: 16px;
}

.pro-wrap .mid-content .icon-arr-right {
  font-size: 15px;
  line-height: 22px;
  position: relative;
  color: #666;
  margin-top: 16px;
}

.pro-wrap .mid-content .icon-arr-right::before {
  content: "";
  width: calc(100% - 15px);
  height: 1px;
  background-color: #666;
  position: absolute;
  bottom: 2px;
  left: 0;
}

.group-area .level1.active > li:nth-child(2) div,
.group-area .level1.active > li:nth-child(3) div,
.group-area .level1.active > li:nth-child(4) div,
.group-area .level1.active > li:nth-child(5) div,
.group-area .level2.active > li:nth-child(3) div,
.group-area .level2.active > li:nth-child(4) div,
.group-area .level2.active > li:nth-child(5) div,
.group-area .level3.active > li:nth-child(4) div,
.group-area .level3.active > li:nth-child(5) div,
.group-area .level4.active > li:nth-child(5) div {
  font-weight: 400;
  border-color: #e6e6e6 !important;
  color: #888 !important;
  background: #fff;
}

.group-area .level3.active > li:nth-child(4) div {
  border-right: 1px solid #e6e6e6 !important;
}

.group-area .stage-six .level1.active > li:nth-child(6) div,
.group-area .stage-six .level2.active > li:nth-child(6) div,
.group-area .stage-six .level3.active > li:nth-child(6) div,
.group-area .stage-six .level5.active > li:nth-child(6) div,
.group-area .stage-six .level4.active > li:nth-child(6) div {
  font-weight: 400;
  border-color: #e6e6e6 !important;
  color: #888 !important;
  background: #fff;
}

.group-area .stage-six .level4.active > li:nth-child(5) div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.level5 .level5 div,
.alone-area .level5.active .level5 div,
.level5.active div {
  font-weight: 700;
  border-color: #f34b55 !important;
  color: #f34b55 !important;
  background: rgba(243, 75, 85, 0.1019607843);
}

.level5 .level-tip {
  background: #f34b55;
}

.level4 .level4 div,
.alone-area .level4.active .level4 div,
.level4.active div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.level4 .level-tip {
  background: #f88004;
}

.level3 .level3 div,
.alone-area .level3.active .level3 div,
.level3.active div {
  font-weight: 700;
  border-color: #14ae5c !important;
  color: #14ae5c !important;
  background: rgba(20, 174, 92, 0.1019607843);
}

.level3 .level-tip {
  background: #14ae5c;
}

.level2 .level2 div,
.alone-area .level2.active .level2 div,
.level2.active div {
  font-weight: 700;
  border-color: #0094ff !important;
  color: #0094ff !important;
  background: rgba(0, 148, 255, 0.1019607843);
}

.level2 .level-tip {
  background: #0094ff;
}

.level1 .level1 div,
.level1.active div,
.alone-area .level1.active .level1 div,
.level1.active .level1 {
  font-weight: 700;
  border-color: #2b4eb6 !important;
  color: #2b4eb6 !important;
  background: rgba(43, 78, 182, 0.1019607843);
}

.level1 .level-tip {
  background: #2b4eb6;
}

.stage-six .level6.active div {
  font-weight: 700;
  border-color: #f34b55 !important;
  color: #f34b55 !important;
  background: rgba(243, 75, 85, 0.1019607843);
}

.stage-six .level5.active div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.pop-content .alone-area .level6.active .level6 div {
  font-weight: 700;
  border-color: #f34b55 !important;
  color: #f34b55 !important;
  background: rgba(243, 75, 85, 0.1019607843);
}

.pop-content .alone-area .level5.active .level5 div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.pop-content .alone-area ul li div {
  font-size: 12px;
}

/* 6단계 */
.propensity-area .propensity-list .stage-six {
  width: 100%;
}

.propensity-area .propensity-list.stage-six .my-active.level1,
.propensity-area .propensity-list.stage-six .level-tip.level1 {
  top: 83%;
  transform: translateY(2px);
}

.propensity-area .propensity-list.stage-six .my-active.level2,
.propensity-area .propensity-list.stage-six .level-tip.level2 {
  top: 66%;
  transform: translateY(12px);
}

.propensity-area .propensity-list.stage-six .my-active.level3,
.propensity-area .propensity-list.stage-six .level-tip.level3 {
  top: 49%;
  transform: translateY(22px);
}

.propensity-area .propensity-list.stage-six .my-active.level4,
.propensity-area .propensity-list.stage-six .level-tip.level4 {
  top: 31.7%;
  transform: translateY(32px);
}

.propensity-area .propensity-list.stage-six .my-active.level5,
.propensity-area .propensity-list.stage-six .level-tip.level5 {
  top: 17.5%;
  transform: translateY(32px);
}

.propensity-area .propensity-list.stage-six .my-active.level6,
.propensity-area .propensity-list.stage-six .level-tip.level6 {
  top: 0;
  transform: translateY(42px);
}

.propensity-list .stage-six .level6 .level6 div,
.propensity-list .stage-six .level6.active div {
  font-weight: 700;
  border-color: #f34b55 !important;
  color: #f34b55 !important;
  background: rgba(243, 75, 85, 0.1019607843);
}

.propensity-list .stage-six .level6.active li.level6 div {
  border-left: none;
}

.level6 .level-tip {
  background: #f34b55;
}

.propensity-list .stage-six .level4 .level5 div,
.propensity-list .stage-six .level5.active div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.level5 .level-tip {
  background: #f88004;
}

.propensity-list .stage-six .level4 .level4 div,
.propensity-list .stage-six .level4 .level5 div,
.propensity-list .stage-six .level4.active div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.level4 .level-tip {
  background: #f88004;
}

.propensity-list .stage-six .level3 .level3 div,
.propensity-list .stage-six .level3.active div {
  font-weight: 700;
  border-color: #14ae5c !important;
  color: #14ae5c !important;
  background: rgba(20, 174, 92, 0.1019607843);
}

.level3 .level-tip {
  background: #14ae5c;
}

.propensity-list .stage-six .level2 .level2 div,
.propensity-list .stage-six .level2.active div {
  font-weight: 700;
  border-color: #0094ff !important;
  color: #0094ff !important;
  background: rgba(0, 148, 255, 0.1019607843);
}

.level2 .level-tip {
  background: #0094ff;
}

.propensity-list .stage-six .level1 .level1 div,
.propensity-list .stage-six .level1.active .level1 {
  font-weight: 700;
  border-color: #2b4eb6 !important;
  color: #2b4eb6 !important;
  background: rgba(43, 78, 182, 0.1019607843);
}

.level1 .level-tip {
  background: #2b4eb6;
}

.level1-text {
  color: #2b4eb6 !important;
}

.level2-text {
  color: #0094ff !important;
}

.level3-text {
  color: #14ae5c !important;
}

.level4-text {
  color: #f88004 !important;
}

.level5-text {
  color: #f88004 !important;
}

.level6-text {
  color: #f34b55 !important;
}

.new-group .level1.active > li:nth-child(1) div,
.new-group .level1.active > li:nth-child(2) div,
.new-group .level1.active > li:nth-child(3) div,
.new-group .level1.active > li:nth-child(4) div,
.new-group .level1.active > li:nth-child(5) div,
.new-group .level2.active > li:nth-child(1) div,
.new-group .level2.active > li:nth-child(2) div,
.new-group .level2.active > li:nth-child(3) div,
.new-group .level2.active > li:nth-child(4) div,
.new-group .level3.active > li:nth-child(1) div,
.new-group .level3.active > li:nth-child(2) div,
.new-group .level3.active > li:nth-child(3) div,
.new-group .level4.active > li:nth-child(1) div,
.new-group .level4.active > li:nth-child(2) div,
.new-group .level5.active > li:nth-child(1) div {
  font-weight: 400;
  border-color: #e6e6e6 !important;
  color: #888 !important;
  background: #fff;
}

.propensity-area .propensity-list.new-group .level1.active > li:nth-child(6) div,
.propensity-area .propensity-list.new-group .level2.active > li:nth-child(5) div,
.propensity-area .propensity-list.new-group .level3.active > li:nth-child(4) div,
.propensity-area .propensity-list.new-group .level4.active > li:nth-child(3) div,
.propensity-area .propensity-list.new-group .level5.active > li:nth-child(2) div {
  border-top-style: solid;
  border-top-width: 1px;
}

.propensity-area .propensity-list.new-group ul li + li[class^="level"] > div {
  margin-top: auto;
}

.propensity-area .propensity-list.new-group .column-area.level1 + .my-active {
  width: calc(20% - 8px) !important;
}

.propensity-area .propensity-list.new-group .column-area.level2 + .my-active {
  width: calc(40% - 18px) !important;
}

.propensity-area .propensity-list.new-group .column-area.level3 + .my-active {
  width: calc(60% - 28px) !important;
}

.propensity-area .propensity-list.new-group .column-area.level4 + .my-active {
  width: calc(80% - 38px) !important;
}

.propensity-area .propensity-list.new-group .column-area.level5 + .my-active {
  width: calc(100% - 48px);
}

.propensity-area .propensity-list.new-group .column-area.level6 + .my-active {
  width: calc(100% - 54px);
}

.propensity-area .propensity-list.new-group .my-active .line-icon {
  white-space: nowrap;
}

.propensity-area .propensity-list.new-group .my-active .line-icon::before {
  content: "";
  width: 100%;
  border: 1px #ddd solid;
  position: absolute;
  bottom: -12px;
  left: 0;
  height: 10px;
  border-bottom: none;
  border-radius: 2px 2px 0px 0px;
}

.propensity-area .propensity-list.new-group .column-area + .my-active {
  position: absolute;
  left: 24px;
  right: auto;
  transform: translate(0%, -46px);
  top: 50%;
  background-color: transparent;
  font-size: 12px;
  line-height: 20px;
  border-radius: 0;
  padding: 0;
  color: #888 !important;
  width: calc(100% - 48px);
  text-align: center;
}

.propensity-area .text-wrap {
  margin-top: 16px;
  margin-bottom: 40px;
}

.propensity-area .text-wrap .title {
  font-size: 15px;
  color: #666;
}

.propensity-area .text-wrap .text-cont-md {
  margin-top: 8px;
}

.alone-area .row-area.active div {
  font-weight: 400;
  border-color: #e6e6e6 !important;
  color: #888 !important;
  background: #fff;
}

.level1.active > li:nth-child(1) div,
.level2.active > li:nth-child(2) div,
.level3.active > li:nth-child(3) div,
.level5.active > li:nth-child(5) div,
.level4.active > li:nth-child(4) div {
  border-right: 1px solid !important;
}

.stage-six .level1.active > li:nth-child(1) div,
.stage-six .level2.active > li:nth-child(2) div,
.stage-six .level3.active > li:nth-child(3) div,
.stage-six .level4.active > li:nth-child(4) div,
.stage-six .level4.active > li:nth-child(5) div,
.stage-six .level5.active > li:nth-child(6) div {
  border-right: 1px solid !important;
}

.stage-six .level5.active > li:nth-child(6) div {
  border-left: none;
}

.stage-six .level6.active > li:nth-child(5) div {
  border-right: 1px solid;
}

/* 투자성향 3단계 */
.propensity-area .propensity-list.short .my-active.level1,
.propensity-area .propensity-list.short .level-tip.level1 {
  top: 67%;
  transform: translateY(-15px);
}

.propensity-area .propensity-list.short .my-active.level2,
.propensity-area .propensity-list.short .level-tip.level2 {
  top: 34%;
  transform: translateY(12px);
}

.propensity-area .propensity-list.short .my-active.level3,
.propensity-area .propensity-list.short .level-tip.level3 {
  top: 10%;
  transform: translateY(20px);
}

.propensity-list.short .level3.active div {
  font-weight: 700;
  border-color: #f34b55 !important;
  color: #f34b55 !important;
  background: rgba(243, 75, 85, 0.1019607843);
}

.propensity-list.short .level3 .level-tip {
  background: yellow;
}

.propensity-list.short .level2.active div {
  font-weight: 700;
  border-color: #f88004 !important;
  color: #f88004 !important;
  background: rgba(248, 128, 4, 0.1019607843);
}

.propensity-list.short .level2 .level-tip {
  background: blue;
}

.propensity-list.short .level1.active div {
  font-weight: 700;
  border-color: #14ae5c !important;
  color: #14ae5c !important;
  background: rgba(20, 174, 92, 0.1019607843);
}

.propensity-list.short .level1 .level-tip {
  background: violet;
}

.propensity-list.short .level3.level-tip {
  background: #f34b55;
}

.propensity-list.short .level2.level-tip {
  background: #f88004;
}

.propensity-list.short .level1.level-tip {
  background: #14ae5c;
}

.short .level3-text {
  color: #f34b55 !important;
}

.short .level2-text {
  color: #f88004 !important;
}

.short .level1-text {
  color: #14ae5c !important;
}

.notice-wrap.list {
  padding: 24px 24px 50px;
}

.notice-wrap.list .list-wrap dt {
  font-size: 16px;
  line-height: 24px;
}

.modal-content.pop1 .pop-info-tit {
  line-height: 24px;
  margin-bottom: 16px;
}

.modal-content [class^="pop"] .info-tit {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.modal-content [class^="pop"] .list-bar li {
  position: relative;
  color: #888;
  padding-left: 7px;
  font-size: 13px;
  line-height: 20px;
}

.modal-content [class^="pop"] .list-bar li::before {
  content: "";
  width: 4px;
  height: 1px;
  border-radius: 50%;
  display: inline-block;
  background-color: #666;
  position: absolute;
  left: 0;
  top: 8px;
}

.modal-content.pop2 {
  display: none;
}

.modal-content.active {
  display: block;
}

.chk-list {
  margin-top: 32px;
  margin-bottom: 50px;
}

.chk-list li + li {
  margin-top: 8px;
}

.chk-list li {
  background-color: #f7f7f7;
  border-radius: 16px;
  padding: 20px;
  min-height: 68px;
  display: flex;
  align-items: center;
}

.chk-list .form-group {
  display: flex;
  align-items: center;
  position: relative;
  min-height: 28px;
  width: 100%;
}

.chk-list .form-group strong {
  font-size: 15px;
  line-height: 22px;
  color: #222;
}

.chk-list .form-group strong + .sm-text {
  line-height: 20px;
}

.chk-list .form-group [type="radio"] + label,
.chk-list .form-group [type="checkbox"] + label {
  position: relative;
  cursor: pointer;
  padding: 0 0 0 38px;
  display: block;
  font-size: 15px;
  width: calc(100% + 20px);
  line-height: 28px;
  color: #222;
}

.chk-list .form-group [type="checkbox"] + label::before {
  width: 28px;
  height: 28px;
  z-index: 1;
}

.chk-list .form-group [type="checkbox"] + label::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--line-e6);
  background-color: #fff;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.chk-list .form-group [type="checkbox"]:checked + label::before {
  background-color: #fff;
}

.chk-list .form-group [type="checkbox"]:checked + label::after {
  background-color: #000;
  border-color: #000;
}

.chk-list .form-group [type="checkbox"] + label::before,
.chk-list .form-group [type="checkbox"] + label::after,
.chk-list .form-group [type="radio"] + label::before,
.chk-list .form-group [type="radio"] + label::after {
  top: 50%;
  transform: translateY(-14px);
}

.chk-box .form-group [type="checkbox"] + label::before,
.chk-box .form-group [type="checkbox"] + label::after {
  top: 50%;
  transform: translateY(-14px);
}

.form-group [type="checkbox"]:disabled + label::before {
  content: "";
  width: 28px;
  height: 28px;
  z-index: 1;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: 0;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat center;
  -webkit-mask-size: 15px auto;
  background-color: #aaa;
  border: none;
}

.form-group [type="checkbox"]:disabled + label::after {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: var(--line-e6);
  background-color: #ddd;
  display: block;
  position: absolute;
  left: 0;
}

.title-wrap .title {
  font-size: 20px;
  color: #222;
  font-weight: 700;
  line-height: 28px;
  word-break: keep-all;
}

.title-wrap + .list-type2 {
  margin-top: 24px;
}

.list-type2 dd strong[class^="level"] {
  background: none !important;
}

.propensity-list [class^="level"].active span {
  color: inherit !important;
}

.page-cont-wid {
  width: calc(100% - 64px);
  border-top: var(--line-dd);
  margin: 32px auto;
}

.page-cont-wid .list-type1 dl {
  padding: 14px 0;
}

.page-cont-wid .list-type1 dl dd {
  width: calc(100% - 100px);
}

.page-cont-wid .list-type1 dl dd .color-red {
  text-align: right;
  display: inline-block;
}

/* .content-view{margin-top: -8px;} */
.content-view + .summary-list {
  margin-top: 56px;
}

.pop-inner {
  padding: 24px 24px 40px;
}

.pop-inner > .title-wrap {
  margin-bottom: 16px;
}

.pop-inner > .mid-content {
  margin-top: 40px;
}

.pop-inner > .mid-content .sm-text {
  margin-top: 16px;
}

.pro-list {
  padding: 0 0 40px;
}

.pro-list .logos {
  margin-top: 16px;
}

.pro-list .logos {
  width: 180px;
  height: 20px;
  /* -webkit-mask: url(/inc/coinone/img/logos.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 180px auto;
  background-color: #bbb;
  margin-left: -4px;
}

.pro-list h2 {
  margin-top: 16px;
  font-size: 24px;
  line-height: 32px;
  color: #000;
  font-weight: 700;
}

.section-swiper.autoplay {
  margin: 40px 16px 0;
}

.section-swiper.autoplay .swiper {
  border-radius: 8px;
}

.section-swiper.autoplay.ipo {
  margin-top: 8px;
}

.section-swiper.autoplay.ipo .img-wrap {
  width: 60px;
  height: 60px;
  margin-right: 40px;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
  /* background: url(/inc/coinone/img/ipoImg/b-dummy-img.png) 0 center no-repeat; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 100%;
}

.section-swiper.autoplay.ipo .img-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
  max-width: initial;
  flex-shrink: 0;
  border-radius: 50%;
}

.swiper-pagination.icon-sm {
  top: 10px;
  text-align: right;
  width: 50px;
  right: 10px;
  left: auto;
  position: absolute;
  height: 4px;
  bottom: inherit;
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.swiper-pagination.icon-sm .swiper-pagination-bullet {
  background: #eee;
  width: 4px;
  height: 4px;
  margin: 0;
  opacity: 0.3;
}

.swiper-pagination.icon-sm .swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-pagination.icon-sm .swiper-pagination-bullet + .swiper-pagination-bullet {
  margin-left: 4px;
}

.pagination {
  position: fixed;
  top: 15px;
  right: 16px;
  background: #f7f7f7;
  padding: 6px 8px;
  align-items: flex-start;
  justify-content: space-between;
  display: flex;
  border-radius: 40px;
  font-size: 12px;
  line-height: 14px;
  color: #888;
  width: 40px;
  font-weight: 700;
  flex: 1;
  z-index: 100;
}

/* 투자성향 분석 pagination / progress bar */
.pagination em {
  color: #222;
}

.pagination em,
.pagination span {
  width: 8px;
}

.progress {
  appearance: none;
  height: 2px;
  width: 100%;
  position: fixed;
  top: 56px;
  left: 0;
  z-index: 1;
}

.progress::-webkit-progress-bar {
  background-color: #fff;
}

.progress::-webkit-progress-value {
  background-color: #222;
}

.progress + .form-content {
  margin-top: 24px;
}

.pro-box .form-content {
  margin-bottom: 120px;
}

.form-content > .title-wrap {
  padding: 0 8px;
}

.form-content > .title-area {
  padding: 0 8px;
  display: block;
}

.form-content > .title-area .title {
  font-size: 15px;
  line-height: 22px;
}

.form-content.list {
  padding: 0 8px;
  margin-top: 32px;
  margin-bottom: 50px;
}

.form-content.list dt .sm-text {
  font-weight: 400;
}

.wrap-btn-sticky.pd-lr {
  position: fixed;
  width: calc(100% - 32px);
  left: auto;
  margin: 0 auto;
}

/* 상품소개 */
.product-inner .product-header {
  padding: 40px 32px 60px;
}

.product-inner .product-header .title {
  margin-top: 8px;
}

.product-inner .product-header .title h2 {
  font-size: 38px;
  line-height: 48px;
}

.product-inner .product-header .title h2 span {
  display: block;
  font-size: 32px;
  line-height: 48px;
  font-weight: 400;
}

.product-inner .product-header .title h2 .color-red {
  font-size: 42px;
  display: block;
}

.product-inner .product-header .md-text {
  font-size: 20px;
  line-height: 28px;
}

.product-inner .product-header .sub-text {
  color: #aaa;
  font-size: 14px;
  line-height: 18px;
}

.product-inner .product-header .info-view .per-view {
  display: flex;
  justify-content: space-between;
}

.product-inner .product-header .per-view dl {
  width: 50%;
}

.product-inner .product-header .per-view dt {
  font-size: 16px;
  line-height: 24px;
}

.product-inner .product-header .per-view dd {
  margin-top: 4px;
  color: #0baa7b;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}

.product-inner .product-cont {
  text-align: left;
  padding: 60px 32px;
  background-color: #fff;
}

.product-inner .product-cont.list .sub-text {
  font-size: 14px;
  line-height: 18px;
  opacity: 0.7;
  margin-top: 8px;
}

.product-inner .product-cont .step-list {
  margin-top: 48px;
}

.product-inner .product-cont .step-list dl {
  padding-left: 56px;
  position: relative;
  display: flex;
  align-content: center;
  flex-direction: column;
  min-height: 40px;
  justify-content: center;
}

.product-inner .product-cont .step-list dl::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-radius: 50px;
}

.product-inner .product-cont .step-list dl.icon-money::before {
  /* background: url(/inc/coinone/img/icon-info01.svg) no-repeat center #f5f5f5; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 24px auto;
}

.product-inner .product-cont .step-list dl.icon-date {
  padding-top: 12px;
}

.product-inner .product-cont .step-list dl.icon-date::before {
  /* background: url(/inc/coinone/img/icon-info02.svg) no-repeat center #f5f5f5; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 24px auto;
}

.product-inner .product-cont .step-list dl.icon-check::before {
  /* background: url(/inc/coinone/img/icon-info03.svg) no-repeat center #f5f5f5; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 24px auto;
}

.product-inner .product-cont .step-list dl.icon-choice::before {
  /* background: url(/inc/coinone/img/icon-info04.svg) no-repeat center 10px #f5f5f5; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 22px auto;
}

.product-inner .product-cont .step-list dl.icon-bank::before {
  /* background: url(/inc/coinone/img/icon-info05.svg) no-repeat center #f5f5f5; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 14px auto;
}

.product-inner .product-cont .step-list dl.icon-amount::before {
  /* background: url(/inc/coinone/img/icon-info06.svg) no-repeat center #f5f5f5; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 24px auto;
}

.product-inner .product-cont .step-list dl + dl {
  margin-top: 40px;
}

.product-inner .product-cont .step-list dl dt {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.product-inner .product-cont .step-list dl dd {
  font-size: 14px;
  line-height: 18px;
  margin-top: 2px;
  opacity: 0.7;
  font-weight: 400;
}

.product-inner .product-cont .sub-text + .sub-text {
  margin-top: 8px;
}

.product-inner .product-cont .sub-text strong {
  color: #222;
}

.product-inner .product-cont .sub-text {
  font-size: 17px;
  line-height: 26px;
  color: #888;
  margin-top: 24px;
  word-break: keep-all;
}

.product-inner .product-cont .title {
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  margin-bottom: 8px;
}

.product-inner .product-cont .title + .list-bar {
  margin-top: 24px;
}

.product-inner .product-cont .title span {
  font-weight: 400;
  display: block;
}

.product-inner .product-cont .pro-info-dl {
  font-size: 16px;
  line-height: 24px;
  position: relative;
  margin-top: 24px;
}

.product-inner .product-cont .pro-info-dl dt {
  font-weight: 700;
}

.product-inner .product-cont .pro-info-dl dd {
  color: #666;
  margin-top: 4px;
}

.product-inner .product-cont .pro-info-dl dl + dl {
  margin-top: 24px;
}

.product-inner .product-cont .pro-table {
  position: relative;
}

.product-inner .product-cont .pro-table .date {
  font-size: 12px;
  line-height: 20px;
  color: #888;
  position: absolute;
  right: 0;
  top: -48px;
}

.product-inner .product-cont .pro-table table {
  width: 100%;
  font-size: 15px;
  table-layout: fixed;
  word-break: keep-all;
  border-spacing: 0;
  border-collapse: separate;
}

.product-inner .product-cont .pro-table table td:first-child {
  border-left: 1px solid #ddd !important;
}

.product-inner .product-cont .pro-table table th:first-child {
  border-radius: 4px 0 0 0;
  border-left: 1px solid #ddd !important;
}

.product-inner .product-cont .pro-table table th:last-child {
  border-radius: 0 4px 0 0;
}

.product-inner .product-cont .pro-table table tr:last-child td {
  border-bottom: 1px solid #ddd !important;
}

.product-inner .product-cont .pro-table table tr:last-child td:first-child {
  border-radius: 0 0 0 4px;
}

.product-inner .product-cont .pro-table table tr:last-child td:last-child {
  border-radius: 0 0 4px 0;
}

.product-inner .product-cont .pro-table table th {
  background-color: #eee;
  line-height: 22px;
  padding: 14px;
  text-align: center;
  border-bottom: none !important;
}

.product-inner .product-cont .pro-table table td {
  background-color: #fff;
  line-height: 26px;
  padding: 14px;
  text-align: center;
  border-bottom: none !important;
}

.product-inner .product-cont .pro-table table th,
.product-inner .product-cont .pro-table table td {
  border: var(--line-dd);
  border-left: none !important;
}

.product-inner .product-cont .pro-table .list-asterisk {
  font-size: 13px;
  line-height: 20px;
}

.product-inner .product-cont.bg-gray .list-bar {
  word-break: keep-all;
}

.product-inner .product-cont.info-area {
  padding: 0;
}

.product-inner .product-cont.info-area .list-info.accordion .title {
  line-height: inherit;
  margin-bottom: 0;
}

.product-inner .product-cont.info-area .pro-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.product-inner .product-cont.info-area .pro-title span {
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
}

.product-inner .product-cont.info-area .pro-title .date {
  font-size: 12px;
  line-height: 20px;
  color: #888;
  position: relative;
  right: 0;
  top: 0;
  text-align: right;
}

/* .product-inner .product-cont.info-area .list-info.accordion .list-sub{padding: 32px;} */
.product-inner .product-cont .list-info.accordion,
.info-area.bg-white .list-info.accordion {
  padding-bottom: 24px;
  flex: 1;
  margin-bottom: 0;
}

.product-cont.info-area .list-dl {
  padding: 0 32px 48px 32px;
}

.product-cont.info-area .list-dl dl {
  margin-top: 16px;
  font-size: 13px;
  line-height: 20px;
}

.product-cont.info-area .list-dl dl dt {
  font-weight: 700;
  color: #666;
}

.product-cont.info-area .list-dl dl dd {
  color: #888;
  margin-top: 4px;
}

.info-view .sm-text {
  color: #aaa;
}

.animation-wrap {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 254px;
  margin-left: 17px;
}

.animation-wrap.right {
  align-items: flex-end;
  height: auto;
}

.animation-wrap .img-bg {
  margin-top: 56px;
  margin-left: -6px;
  margin-bottom: -15px;
}

.animation-wrap .img-bg img {
  width: 155px;
  height: auto;
}

.animation-wrap .img-mode {
  display: inline-block;
  position: absolute;
  top: 10px;
  right: 40px;
}

.animation-wrap .img-mode img {
  height: auto;
  width: 62px;
}

.animation-wrap .img-mode .sprout {
  animation: sprout 3s infinite;
  animation-delay: 2s;
  transform-origin: center bottom;
}

.animation-wrap .img-mode2 {
  width: 242px;
  height: auto;
  margin-top: 64px;
  display: inline-block;
  transform-origin: 50% 50%;
}

.animation-wrap .bounce-box {
  animation-name: bounce;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

.animation-wrap .img-mode2 img {
  width: 242px;
  height: auto;
}

/* @keyframes tree{0% {height: 1px; margin-top: 65px; margin-left: -0px;}
   60% { height: 50px; margin-top: 50px; margin-left: 0;}
   100% { height: 50px; margin-top: 55px;}
} */
/* 공모주 소개 */
.ipo .bd-detail-wrap .title {
  position: relative;
  margin-top: 40px;
}

.ipo .bd-detail-wrap .title .bd-name {
  margin-top: 16px;
}

.ipo .bd-detail-wrap .title .bd-name2 {
  margin-top: 16px;
}

.ipo .bd-detail-wrap .title .bd-name strong {
  font-size: 32px;
  line-height: 40px;
}

.ipo .bd-detail-wrap .title .bd-name .sub-name {
  margin-top: 0;
}

.ipo .bd-detail-wrap .title .label {
  font-weight: 700;
  font-size: 13px;
  line-height: 20px;
  height: auto;
  border-radius: 4px;
}

.ipo .bd-detail-wrap .bd-detail-area {
  margin-top: 40px;
  border-bottom: var(--line-ee);
  padding-bottom: 40px;
}

.ipo .bd-detail-wrap .detail-box .detail-view dl {
  padding-bottom: 0;
  width: 100% !important;
  min-height: auto;
}

.ipo .bd-detail-wrap .detail-box .detail-view dl:last-child {
  margin-bottom: 0;
}

.ipo .bd-detail-wrap .detail-box .detail-view dl dt {
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 4px;
  font-weight: 700;
}

.ipo .bd-detail-wrap .detail-box .detail-view dl dd {
  font-size: 17px;
  line-height: 24px;
  font-weight: 400;
}

.ipo .line-divider {
  width: 100%;
  margin: 40px 0 0;
  height: 1px;
}

.ipo .product-inner .product-cont.list {
  padding: 0 24px 40px;
}

.ipo .product-inner .product-cont .title2 {
  font-size: 20px;
  line-height: 34px;
  font-weight: 700;
  margin-bottom: 32px;
}

.ipo .product-inner .product-cont .step-list {
  margin-top: 0;
}

.ipo .product-inner .product-cont .step-list dl dt {
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
}

.ipo .faq-list {
  background-color: #fff;
  border-top: var(--line-ee);
  border-bottom: var(--line-ee);
  margin: 0 24px;
  padding: 48px 0;
}

.ipo .faq-list .list-content {
  margin: 0;
}

.ipo .faq-list .list-content li + li {
  border-top: none;
  padding-top: 40px;
}

.ipo .faq-list .list-content li {
  padding: 0;
}

.ipo .faq-list .sm-text {
  margin: 24px 0 48px;
}

.ipo .faq-list .q-tit {
  font-size: 17px;
}

.ipo .faq-list .answer {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}

.ipo .faq-list .ipo-visual {
  text-align: center;
  margin-top: 40px;
}

.ipo .faq-list .ipo-visual .text-cont {
  margin-top: 32px;
  line-height: 24px;
}

.ipo .footer-text {
  margin: 24px 24px 0 24px;
}

.ipo .footer-text .list-bar li {
  font-size: 13px;
  line-height: 20px;
  color: #888;
}

.ipo .footer-text .list-bar li::before {
  background-color: #888;
  top: 8px;
}

.ipo .footer-text .compliance {
  padding: 0 0 48px;
}

.ipo .footer-text .compliance dl {
  margin-top: 24px;
}

.ipo .footer-text .compliance dl dt {
  color: #666;
  margin-bottom: 4px;
}

.ipo .tab-content {
  height: auto;
}

.ipo .section-top {
  margin-top: 40px;
}

.ipo .bd-detail-wrap .detail-box {
  padding: 0;
  margin: 0 8px;
}

/* 공모주 banner */
.main-card .ipobg {
  background-color: #005eb8;
  color: #fff;
  line-height: 20px;
  padding: 20px 8px;
}

.main-card .ipobg p {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.main-card .ipobg strong {
  font-size: 17px;
  font-weight: 700;
}

.main-card .ipobg .text-sm {
  font-weight: 700;
  margin-top: 2px;
}

/* 채권 */
/* 상세내용 */
.bd-detail-wrap,
.bd-guide {
  padding: 0 16px;
}

.bd-detail-wrap .title,
.bd-detail-wrap .detail-box {
  padding: 0 8px;
}

.bd-detail-wrap .title {
  margin-top: 16px;
}

.bd-detail-wrap .title .bd-icon {
  width: 48px;
  height: 48px;
}

.bd-detail-wrap .title .bd-icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
  max-width: initial;
  flex-shrink: 0;
}

.bd-detail-wrap .title .bd-icon {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bd-detail-wrap .title .bd-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #222;
  border-radius: 50%;
}

.bd-detail-wrap .bd-detail-area {
  margin-top: 58px;
}

.bd-detail-wrap .bd-detail-area .detail-view dd {
  font-weight: 700;
}

.bd-detail-wrap .title .bd-name {
  margin-top: 24px;
  font-weight: 700;
  font-size: 28px;
  line-height: 36px;
}

.bd-detail-wrap .title .bd-name strong {
  padding-right: 40px;
  display: inline-block;
  word-break: break-all;
}

.bd-detail-wrap .title .bd-name .sub-name {
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  color: #888;
}

.bd-detail-wrap .title .label-list {
  margin-top: 16px;
  display: flex;
  align-items: center;
}

.bd-detail-wrap .title .label-list .label {
  padding: 2px 6px;
  line-height: 14px;
  height: auto;
}

.bd-detail-wrap .title .label-list .label.level1 {
  color: #2b4eb6 !important;
  border: 1px solid rgba(43, 78, 182, 0.6) !important;
}

.bd-detail-wrap .title .label-list .label.level2 {
  color: #0094ff !important;
  border: 1px solid rgba(0, 148, 255, 0.6) !important;
}

.bd-detail-wrap .title .label-list .label.level3 {
  color: #14ae5c !important;
  border: 1px solid rgba(20, 174, 92, 0.6) !important;
}

.bd-detail-wrap .title .label-list .label.level4 {
  color: #f88004 !important;
  border: 1px solid rgba(248, 128, 4, 0.6) !important;
}

.bd-detail-wrap .title .label-list .label.level5 {
  color: #f88004 !important;
  border: 1px solid rgba(248, 128, 4, 0.6) !important;
}

.bd-detail-wrap .title .label-list .label.level6 {
  color: #f34b55 !important;
  border: 1px solid rgba(243, 75, 85, 0.6) !important;
}

.bd-detail-wrap .detail-box .detail-view {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.bd-detail-wrap .detail-box .detail-view dl {
  width: 50%;
  margin-bottom: 32px;
  padding-bottom: 6px;
  min-height: 60px;
}

.bd-detail-wrap .detail-box .detail-view dl dt {
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
}

.bd-detail-wrap .detail-box .detail-view dl dd {
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.bd-detail-wrap .detail-box .detail-view dl dd .date {
  color: #aaa;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}

.bd-detail-wrap .detail-box + .line-divider {
  margin-top: 0;
  margin-bottom: 32px;
}

/* .bd-detail-info .product-inner .product-cont{padding-top: 0;} */
.section.bd-detail-info {
  margin-top: -20px;
}

.btn-more {
  height: 56px;
  border-top: 1px solid #f5f5f5;
  text-align: center;
  display: block;
  width: 100%;
  font-size: 13px;
  color: #aaa;
  position: relative;
}

.btn-more::after {
  content: "";
  width: 18px;
  height: 8px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-bottom.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 10px auto;
  transform: translateY(0%) rotate(0deg);
}

.btn-more.on::after {
  transform: translateY(0%) rotate(-180deg);
}

.product-cont.list + .bg-gray {
  margin-top: 60px;
}

/* 탭버튼 가로스크롤 */
.scroll-left {
  width: 100%;
  margin: 0 auto;
  border-bottom: var(--line-ee);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 16px;
  position: sticky;
  top: 56px;
  height: 50px;
}

.scroll-left.tabs ul li button {
  font-size: 16px;
  line-height: 50px;
}

.scroll-left {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll-left::-webkit-scrollbar {
  display: none;
}

.scroll-left ul {
  display: block;
  padding: 0;
  white-space: nowrap;
  border-bottom: none;
  font-size: 0;
}

.scroll-left li {
  width: auto !important;
  padding: 0 32px;
  display: inline-block;
}

.tabs.scroll-left ul li.on::after {
  bottom: 1px;
  left: 0;
}

.tabs.scroll-left ul li:last-child {
  margin-right: 16px;
}

.tabs.scroll-left + .section {
  margin-top: 8px;
}

/* 약속한 수익 계산기/일정 */
.line-divider.mg0 + .virtual-cont {
  padding-top: 0;
}

.virtual-cont {
  margin-top: 0px !important;
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.virtual-cont .virtual-view .input-wrap {
  padding: 16px 8px 14px;
}

.virtual-cont .service-info {
  border-bottom: 8px #f7f7f7 solid;
}

.virtual-cont .virtual-view .result-wrap .result-view {
  padding: 40px 8px 60px 8px;
}

.virtual-cont .line-divider.sty02 {
  margin-top: 0;
  margin-bottom: 14px;
}

.virtual-cont .virtual-view .input-wrap .input-ar dl {
  padding: 12px 0;
}

.virtual-cont .virtual-view .input-wrap .input-ar dt {
  font-size: 12px;
  line-height: 16px;
  color: #888;
}

.virtual-cont .virtual-view .input-wrap .input-ar dt .flex {
  font-size: 20px;
  line-height: 34px;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
}

.virtual-cont .virtual-view .input-wrap .input-ar dd .input-area,
.virtual-cont .virtual-view .input-wrap .input-ar dd .input-area .line-text2 {
  font-size: 24px;
  line-height: 32px;
}

.virtual-cont .virtual-view .input-wrap .input-ar dd .input-area .line-text2 {
  border: none;
  padding: 0;
}

.virtual-cont .virtual-view .input-wrap .input-ar dd .input-area {
  display: flex;
  justify-content: space-between;
}

.virtual-cont
  .virtual-view
  .input-wrap
  .input-ar
  dd
  .input-area
  .line-text2::-webkit-input-placeholder,
.virtual-cont .virtual-view .input-wrap .input-ar dd .input-area .line-text2::placeholder {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}

.virtual-cont .virtual-view .result-wrap .summary-cell .cell-tit {
  margin-bottom: 16px;
  color: #666;
  line-height: 24px;
  font-size: 16px;
}

.virtual-cont .virtual-view .result-wrap .summary-cell + .summary-cell {
  margin: 40px 0;
  padding-top: 40px;
}

.virtual-cont .virtual-view .result-wrap .summary-cell:last-child {
  margin-bottom: 0;
}

.virtual-cont .result-wrap .summary-cell .point {
  margin-bottom: 32px;
}

.virtual-cont .result-wrap .summary-cell .point dt {
  font-size: 15px;
  color: #222;
  font-weight: 700;
}

.virtual-cont .result-wrap .summary-cell .point dt .i-point {
  font-size: 12px;
  color: #fff;
  background-color: #222;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  line-height: 20px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.result-view .price-wrap {
  background-color: rgba(236, 95, 95, 0.0588235294);
  padding: 20px 24px;
  border-radius: 16px;
  margin: 0 -8px;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 40px;
}

.virtual-cont .result-wrap .summary-cell .price-wrap strong {
  font-size: 20px;
  line-height: 28px;
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(360deg, #fff 37.22%, rgba(255, 255, 255, 0) 100%);
}

.fixed-bottom .page-info {
  margin: 24px;
}

.bg-gray-box.type-left {
  text-align: left;
  margin: 16px 0 0;
  padding: 24px;
}

.bg-gray-box.type-left .pop-text-cont {
  color: #222;
  font-size: 14px;
  line-height: 18px;
}

.bg-gray-box.type-left .pop-text-cont .nbsp {
  display: block;
  padding-left: 70px;
}

.list-stock.type-top {
  margin-bottom: 60px;
}

.main-list .list-stock.type-top {
  margin-bottom: 0px;
}

.main-list .list-stock.type-top li a {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.list-stock.type-top .text-sm {
  line-height: 16px;
}

.list-stock.type-top .text-warn {
  display: none;
}

.list-stock.type-top .warn .stock-text .stock-name p:last-child::after {
  content: "한도가 소진되었어요.";
  color: #f24538;
  font-size: 12px;
  line-height: 16px;
  margin-top: 4px;
  display: block;
}

.main-list .list-stock .warn .stock-text .stock-name::after {
  content: "한도가 소진되었어요.";
  color: #f24538;
  font-size: 12px;
  line-height: 16px;
  margin-top: 4px;
  display: block;
}

.main-list.tab-fixed .list-stock.type-top .warn .stock-text .stock-name::after {
  content: none;
}

.main-list .list-stock.type-top .warn .stock-text .stock-name::after {
  content: none;
}

/* top정렬로 한도조회 위치 변경 */
.list-stock.type-top .warn .stock-text .stock-name p:last-child.text-level::before {
  content: "한도가 소진되었어요.";
  color: #f24538;
  font-size: 12px;
  line-height: 16px;
  margin-top: 0px;
  display: block;
}

.list-stock.type-top .warn .stock-text .stock-name p:last-child.text-level::after {
  content: none;
}

.list-stock.type-top .warn .stock-text .stock-name .text-level .label {
  color: #888 !important;
  opacity: 0.5;
}

.list-stock.type-top .stock-text .stock-name .text-level .label::before {
  content: "";
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border: 1px solid !important;
  opacity: 0.6;
  border-radius: 2px;
}

/* .list-stock.type-top .warn .stock-text .stock-name p:last-child::after{content: none;} */
.list-stock .stock-text .stock-name .text-level + .stock-title {
  margin-top: 4px;
}

.list-stock.type-top .warn .text-warn {
  color: #f24538;
  font-size: 12px;
  line-height: 16px;
  margin-top: 4px;
  display: block;
}

.list-stock.type-top .warn .text-sm span {
  color: #888 !important;
  opacity: 0.5;
  display: inline-block;
}

.list-stock .warn .stock-increase {
  color: #888 !important;
}

.list-stock .warn .stock-per,
.list-stock .warn .link-arrow2::after {
  opacity: 0.5;
}

.list-stock.type-top .flex-top {
  display: flex;
  align-items: flex-start;
  width: calc(100% - 65px);
}

.list-stock.type-top .link-arrow2 {
  padding-right: 20px;
}

.list-stock.type-top .link-arrow2 .flex-top .stock-text {
  flex: 1;
  width: calc(100% - 65px);
  display: block;
  justify-content: left;
  align-items: flex-start;
  margin: 0 8px;
}

.line-divider.sticky {
  position: sticky;
  top: 106px;
  margin: 0 -16px;
  z-index: 5;
  width: calc(100% + 16px);
}

.section-inner.bond-list .tab-content {
  padding-top: 0;
}

.section-inner.bond-list .title-wrap {
  margin-top: 32px;
}

.section-inner.bond-list .title-wrap h2 {
  font-size: 17px;
  line-height: 24px;
}

.section-inner.bond-list .theme-guide > div {
  position: relative;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  padding: 16px 0 24px;
  max-width: 300px;
  margin: 0 auto;
}

.section-inner.bond-list .theme-guide + .line-divider {
  margin-top: 0;
  margin-bottom: 0;
}

.section-inner.bond-list .theme-guide > div::before {
  content: "";
  width: 40px;
  height: 40px;
  position: relative;
  display: block;
  margin: 0 auto;
}

.section-inner.bond-list .theme-guide > div.gover::before {
  /* background: url(/inc/coinone/img/icon-theme-gover.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 40px auto;
}

.section-inner.bond-list .theme-guide > div.finan::before {
  /* background: url(/inc/coinone/img/icon-theme-finan.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 40px auto;
}

.section-inner.bond-list .theme-guide > div.special::before {
  /* background: url(/inc/coinone/img/icon-theme-special.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 40px auto;
}

.section-inner.bond-list .theme-guide > div.company::before {
  /* background: url(/inc/coinone/img/icon-theme-company.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 40px auto;
}

.section-inner.bond-list .theme-guide > div > p {
  margin-top: 8px;
}

.section-inner.bond-list .theme-guide > div > .text-sm {
  margin-top: 4px;
  font-size: 13px;
  line-height: 20px;
  color: #aaa;
  display: block;
}

.top-content.left {
  padding: 8px 8px 0;
}

.top-content.left .content-view,
.top-content.left .summary dt {
  text-align: left;
}

.top-content.left .content-view .title-text {
  font-size: 14px;
  line-height: 18px;
  color: #888;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.top-content.left .content-view .title-text span {
  margin-left: 6px;
  height: auto;
  line-height: 18px;
}

.top-content.left .content-view .label-text {
  font-size: 13px;
  line-height: 20px;
  color: #222;
  font-weight: 700;
  display: inline-block;
}

.top-content.left .content-view .price,
.top-content.left .content-view .price > span {
  word-break: break-all;
  font-weight: 700;
}

.top-content.left .content-view .price-wrap {
  justify-content: flex-start;
}

.top-content.left .summary-list {
  margin: 0 0 40px 0;
}

.top-content.left .wrap-btn {
  margin: 32px -8px 40px;
}

.top-content.left .bottom-content.bg-none {
  padding-top: 40px;
}

.top-content.left .content-view .price-wrap {
  font-size: 24px;
  margin-top: 6px;
  line-height: 32px;
}

.top-content.left .summary .lg2-text {
  display: inline-block;
  word-break: break-all;
  text-align: right;
}

.top-content.left .content-view .label-text {
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
}

.top-content.left .summary dt {
  display: flex;
}

.top-content.left .summary dt strong {
  line-height: 18px;
}

/* 하단 유의사항 */
.compliance {
  padding: 0 32px 48px;
  font-size: 13px;
  color: #888;
  line-height: 20px;
  word-break: keep-all;
}

.compliance dl {
  margin-top: 16px;
}

.compliance dl dt {
  font-weight: 700;
  color: #888;
}

.bottom-guide {
  margin: 0px 16px 0;
  padding-top: 40px;
  border-top: 1px #eee solid;
}

.bottom-guide .compliance {
  padding: 0 0 60px 0;
  font-size: 15px;
  line-height: 22px;
}

.bottom-guide .compliance dl:first-child {
  margin-top: 0;
}

.bottom-guide .compliance dd {
  font-size: 12px;
  line-height: 20px;
}

.bottom-guide .compliance dd .list-bar {
  margin-top: 4px;
}

.bottom-guide .compliance dd .list-bar li {
  font-size: 12px;
  line-height: 20px;
  color: #888;
}

.bottom-guide .compliance dd .list-bar li::before {
  content: "";
  top: 9px;
}

.bottom-guide .compliance dd .list-bar li + li {
  margin-top: 4px;
}

/* 계약확인서 */
.print-wrap {
  margin: 16px;
}

.print-wrap .view-box {
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  background-color: #fff;
  padding: 40px 32px 0;
}

.print-wrap .view-box .list-info {
  display: flex;
  margin-bottom: 20px;
}

.print-wrap .view-box .list-info dl {
  width: 50%;
}

.print-wrap .view-box .list-info.amount {
  position: relative;
  padding: 28px 0;
  border-top: 1px #eee dashed;
  margin: 32px -32px 0;
}

.print-wrap .view-box .list-info.amount dl {
  width: 100%;
  margin: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.print-wrap .view-box .list-info.amount dl dt {
  font-size: 17px;
  color: #222;
}

.print-wrap .view-box .list-info.amount dl dd {
  font-size: 18px;
  line-height: 28px;
}

.print-wrap .view-box .guide-info {
  text-align: center;
  font-size: 10px;
  line-height: 14px;
  background-color: #f7f7f7;
  color: #aaa;
  padding: 14px 16px;
  border-radius: 0 0 16px 16px;
  margin: 0 -32px;
}

.print-wrap .view-box .guide-info .br {
  display: block;
}

.print-wrap .view-box .list-info.amount dl::before,
.print-wrap .view-box .list-info.amount dl::after {
  content: "";
  width: 5px;
  height: 10px;
  background-color: #f7f7f7;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  position: absolute;
  top: -5px;
}

.print-wrap .view-box .list-info.amount dl::before {
  border-radius: 0 5px 5px 0;
  border-right: 1px solid #e6e6e6;
  left: -1px;
}

.print-wrap .view-box .list-info.amount dl::after {
  border-radius: 5px 0 0 5px;
  border-left: 1px solid #e6e6e6;
  right: -1px;
}

.print-wrap .view-box .comm-icon {
  width: 36px;
  height: 36px;
  line-height: 36px;
}

.comm-icon {
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.print-wrap .view-box .name .title {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  margin-top: 12px;
}

.print-wrap .view-box .name.margin .title {
  width: calc(100% - 70px);
  padding-right: 25px;
}

.print-wrap .view-box .name .text-sm {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #666;
  margin-top: 4px;
}

.print-wrap .view-box .title-info + .list-info {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f5f5f5;
}

.print-wrap .view-box .list-info dl dt {
  font-size: 13px;
  line-height: 20px;
  color: #888;
}

.print-wrap .view-box .list-info dl dd {
  font-size: 16px;
  line-height: 24px;
  color: #222;
  margin-top: 2px;
  word-break: break-all;
}

.more-text-button {
  font-size: 12px;
  line-height: 20px;
  color: #888;
  position: relative;
  padding-right: 20px;
}

.more-text-button::after {
  content: "";
  width: 18px;
  height: 8px;
  display: inline-block;
  background: #aaa;
  /* -webkit-mask: url(/inc/coinone/img/arrow-bottom.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 10px auto;
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

.sub-title.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 채권구매 간격조절 */
.buy-content {
  padding: 16px 16px 32px;
  flex: 1;
}

.buy-content .box-line {
  background-color: #fff;
  border: var(--line-f5);
}

.box-wid .list-type1 dt {
  min-width: 100px;
}

/* 채권/발행 로고 배경 추가*/
.bd-detail-wrap .title .bd-icon::before,
.type-B .stock-icon span,
.type-top .stock-icon span,
.type-top .comm-icon span,
.main-list .stock-icon span,
.ipo-wrap .stock-icon span,
.ipo-tabs .stock-icon span,
.main-list .comm-icon span {
  /* background: url(/inc/coinone/img/logo-bg-Img01.svg) no-repeat #222 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 19px;
  font-size: 0;
}

.print-wrap .comm-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* background: url(/inc/coinone/img/logo-bg-Img01.svg) no-repeat #222 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 14px;
  font-size: 0;
}

@media screen and (max-width: 352px) {
  .print-wrap .view-box .name.margin .title {
    min-width: 200px;
  }
  .bg-gray-box.type-left .pop-text-cont .nbsp {
    display: inline-block;
    padding-left: 0px;
  }
}
@media screen and (max-width: 320px) {
  .page-cont-wid.box-wid {
    width: calc(100% - 48px);
  }
  .print-wrap .view-box .guide-info .br {
    display: inline;
  }
  .bd-detail-wrap .detail-box .detail-view dl {
    width: 49%;
  }
  .bd-detail-wrap .detail-box .detail-view dl:nth-child(even) {
    width: 51%;
  }
}
/* 채권 메인 */
.contents .section.my-list {
  margin-top: 0;
}

.section.my-list .rate-container .summary dt {
  color: #222;
  font-weight: 700;
  display: flex;
  align-items: center;
}

.section.my-list .rate-container .summary dd {
  font-size: 19px;
  line-height: 18px;
  font-weight: 700;
}

.section.my-list .section-inner {
  border-bottom: 8px solid #f7f7f7;
  padding: 16px 24px 40px;
}

.section.my-list .wrap-btn.main {
  margin: 42px -8px 0;
}

.section.my-list .summary .strong-pint dt {
  font-weight: 700;
  color: #222;
  line-height: 18px;
  display: flex;
}

.section.my-list .summary .strong-pint dd {
  font-weight: 700;
  color: #222;
  font-size: 19px;
  line-height: 23px;
}

.contents + .section-swiper.banner-top {
  margin-top: 0;
}

.section.info-cont {
  margin-top: 0px;
}

.section-swiper .sub-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  margin-bottom: 16px !important;
  padding: 0 16px;
}

/* 채권투자 */
.cont-total {
  position: relative;
}

.section-inner.main-list {
  padding-top: 40px;
}

.cont-total .section {
  margin-bottom: 20px;
  margin-top: 0;
}

.cont-total .section .section-inner.tab-fixed {
  padding-top: 40px;
}

.section-inner.main-list.tab-fixed .tabs .sub-title {
  margin-bottom: 16px;
}

.section-inner.main-list.tab-fixed .tabs {
  position: sticky;
  z-index: 11;
  background: #fff;
  height: auto;
}

.cont-list.reverse {
  display: flex;
  flex-direction: column-reverse;
}

.main-list .sub-title {
  margin-bottom: 24px;
}

.main-list .sub-title strong {
  font-size: 20px;
  line-height: 34px;
  color: #222;
  font-weight: 700;
}

.main-list .sub-title + .sub-title {
  margin-top: 24px;
}

.main-list .sub-title.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.main-list .sub-title.flex .sm-text {
  margin-top: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #888;
}

.main-list .sub-title.flex .btn-box-info {
  background-color: rgba(35, 91, 237, 0.0588235294);
  color: #235bed;
  padding: 10px 16px;
  border-radius: 100px;
  font-size: 12px;
  line-height: 14px;
}

.main-list .list-stock + .list-stock {
  margin-top: 60px;
}

.main-list + .main-list {
  margin-top: 60px;
  margin-bottom: 20px;
}

.good-tip .swiper-slide {
  position: relative;
  width: 200px;
  height: 150px;
  padding: 0;
  border: none;
  border-radius: 16px;
}

.good-tip .swiper-slide .title {
  display: none;
}

.good-tip .swiper-slide .img-area {
  margin: 0;
  height: 150px;
}

.good-tip .swiper-slide .img-area img {
  border-radius: 16px;
}

.good-tip .swiper-slide .img-area::after {
  content: "";
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #f7f7f7;
  font-weight: 700;
  line-height: 1;
  overflow: hidden;
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #f7f7f7;
}

.main-card.theme .swiper-slide {
  position: relative;
  width: 160px;
  height: 170px;
  padding: 24px 24px 16px;
  background: #f7f7f7;
  border-radius: 16px;
}

.main-card.theme {
  margin: 0;
}

.main-card.theme a {
  font-size: 12px;
  line-height: 14px;
  color: #aaa;
  position: relative;
  height: 100%;
  display: block;
}

.main-card.theme strong.name {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: #222;
  display: inline-block;
}

.main-card.theme .inter-rate {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: #f24538;
  margin-top: 4px;
}

.main-card.theme a::after {
  content: "";
  width: 48px;
  height: 48px;
  background-color: #eee;
  border-radius: 10px;
  display: inline-block;
  margin-bottom: 0px;
  position: absolute;
  right: -8px;
  bottom: 0;
}

.main-card.theme .gover a::after {
  /* background: url(/inc/coinone/img/icon-theme-gover.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 48px auto;
}

.main-card.theme .special a::after {
  /* background: url(/inc/coinone/img/icon-theme-special.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 48px auto;
}

.main-card.theme .finan a::after {
  /* background: url(/inc/coinone/img/icon-theme-finan.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 48px auto;
}

.main-card.theme .company a::after {
  /* background: url(/inc/coinone/img/icon-theme-company.png) no-repeat 0 center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 48px auto;
}

.info-cont .main-list-info {
  margin-top: 60px;
}

.info-cont .main-list-info li + li {
  margin-top: 16px;
}

.info-cont .main-list-info a {
  display: flex;
  align-items: center;
  width: 100%;
}

.info-cont .main-list-info a .img-area {
  margin: 4px 0;
  width: 64px;
  height: 64px;
  text-align: center;
  line-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f7f7;
}

.info-cont .main-list-info a .img-area img {
  width: 100%;
  height: 100%;
}

.info-cont .main-list-info a .title {
  font-size: 15px;
  line-height: 22px;
  margin-left: 8px;
  width: calc(100% - 100px);
}

.foot-text .list-bar li {
  line-height: 20px;
  color: #aaa;
  font-size: 13px;
}

.foot-text .list-bar li::before {
  content: "";
  width: 4px;
  height: 1px;
  border-radius: 50%;
  display: inline-block;
  background-color: #aaa;
  position: absolute;
  left: 0;
  top: 9px;
}

.section .main-list .title-wrap {
  margin-bottom: 16px;
}

.section .main-list .lg-text {
  font-size: 16px;
  line-height: 24px;
  color: #666;
  font-weight: 700;
}

.section .main-list .lg-text.filter {
  width: 100%;
  position: relative;
}

.section .main-list .lg-text.filter::after {
  content: "";
  width: 20px;
  height: 20px;
  background: #666;
  /* -webkit-mask: url(/inc/coinone/img/arrow-bottom2.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 12px 7px;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}

.main-list2 .sub-title {
  margin-bottom: 16px;
}

.main-list2 .btn-wrap-box {
  margin-top: 0px;
}

.btn-wrap-box .page-info {
  padding: 20px 0 20px 20px;
  width: 100%;
  color: #888;
  font-size: 12px;
  line-height: 14px;
}

.btn-wrap-box .page-info strong {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  color: #222;
}

.btn-wrap-box .page-info p + p {
  margin-top: 2px;
}

.btn-wrap-box .page-info + .page-info {
  margin-left: 8px;
}

.section-swiper.banner-top {
  margin: 40px 0 20px;
}

.reverse .section-swiper.banner-top {
  margin: 16px 0 20px;
}

.cont-total .section-inner .no-result {
  padding: 40px 0 54px;
}

.cont-total .main-list .no-result {
  padding: 36px 0;
}

/* 채권 상세 */
.line-divider.sty04 + .bg-white .list-info.accordion {
  border-top: none;
}

.list.good-tip {
  margin-bottom: 20px;
}

.list.good-tip .list-news .sub-title .sm-text {
  font-weight: 400;
  margin: 0;
}

.list.good-tip .list-news .sub-title .title {
  font-size: 20px;
  line-height: 34px;
  margin-top: 40px;
  font-weight: 700;
}

.list.good-tip .list-news .sub-title .desc .list-title {
  font-size: 15px;
  line-height: 22px;
}

.list.good-tip .list-news .sub-title {
  margin-bottom: 16px;
}

.list.good-tip .list-news ul {
  margin-bottom: 24px;
}

.list.good-tip .list-news li + li {
  margin-top: 16px;
  min-height: 72px;
  border-top: none;
}

.list.good-tip .list-news li a {
  padding: 4px 0;
  display: flex;
  font-size: 15px;
  line-height: 22px;
  position: relative;
}

.animation-bond {
  margin-top: 40px;
  margin-left: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 240px;
}

.animation-bond .ani-box {
  padding-top: 130px;
}

.animation-bond .ani-box img {
  width: 217px;
  height: auto;
}

.animation-bond .ani-box .img-mode {
  width: 245px;
  height: auto;
  position: absolute;
  top: 0;
  right: 50%;
  transform: translateX(100px);
}

.animation-bond .ani-box .img-mode img {
  width: 100%;
  position: absolute;
  animation: bond 5s;
}

/* @keyframes bond{
    0% {clip: rect( 245px, 245px, 0, 0);}
    100% {clip: rect( 0, 245px, 145px, 0);} 
} */
@keyframes bond {
  0% {
    clip: rect(0, 0, 145px, 0);
  }
  100% {
    clip: rect(0, 245px, 145px, 0);
  }
}
/* @keyframes pen1{
    0%{margin-left: -23px; margin-top: 3px;}
    10%{margin-left: -23px; margin-top: -10px;}
    20%{margin-left: -14px; margin-top: 2px;}
    30%{margin-left: -9px; margin-top: -2px;}
    50%{margin-left: 0px; margin-top: 0px;}
    100%{margin-top: 0;}
} */
@keyframes pen1 {
  0% {
    margin-left: -23px;
    margin-top: 3px;
  }
  10% {
    margin-left: -23px;
    margin-top: -10px;
  }
  20% {
    margin-left: -14px;
    margin-top: 2px;
  }
  30% {
    margin-left: -9px;
    margin-top: -2px;
  }
  50% {
    margin-left: 0px;
    margin-top: 0px;
  }
  65% {
    margin-top: -10px;
  }
  70% {
    margin-top: 5px;
  }
  75% {
    margin-top: -5px;
  }
  100% {
    margin-top: 0;
  }
}
@keyframes pen2 {
  0% {
    margin-top: 0px;
  }
  10% {
    margin-top: -10px;
  }
  20% {
    margin-top: 5px;
  }
  30% {
    margin-top: -5px;
  }
  40% {
    margin-top: 0px;
  }
  100% {
    margin-top: 0;
  }
}
.animation-bond2 {
  width: 100%;
  position: relative;
  display: flex;
  height: 145px;
  justify-content: flex-end;
}

.animation-bond2 .ani-box {
  padding-top: 40px;
  width: 188px;
}

.animation-bond2 .ani-box img {
  width: 204px;
  height: auto;
  max-width: none;
}

.animation-bond2 .ani-box .img-mode {
  width: 34px;
  height: auto;
  position: absolute;
  top: 53px;
  right: 0;
}

/* .animation-bond2 .ani-box .img-mode img{width: 100%; position: absolute; animation: pen1 5s , pen2 8s infinite 9s; } */
.animation-bond2 .ani-box .img-mode img {
  width: 100%;
  position: absolute;
}

.act .animation-bond2 .ani-box .img-mode img {
  animation: pen1 8s;
}

.product-cont .animation-bond2 + .tip-txt {
  text-align: right;
  margin-top: 16px;
  font-size: 13px;
  line-height: 18px;
  color: #888;
}

.animation-bond3 {
  height: 132px;
  position: relative;
  margin-right: -32px;
}

.animation-bond3 .ani-box {
  position: absolute;
  top: -70px;
  right: 0;
  width: 210px;
  height: 222px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.animation-bond3 .ani-box .img-mode img {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
}

.animation-bond3 .ani-box .img-mode .coin-move1 {
  width: 35px;
  height: auto;
  top: 92px;
  left: 53px;
  animation: Move1 4s infinite;
}

.animation-bond3 .ani-box .img-mode .coin-move2 {
  width: 34px;
  height: auto;
  top: 50px;
  left: 85px;
  animation: Move2 4s infinite;
}

.animation-bond3 .ani-box .img-mode .coin-move3 {
  width: 28px;
  height: auto;
  top: 0px;
  left: 60px;
  animation: Move3 4s infinite;
}

@keyframes Move1 {
  0% {
    margin-top: 0px;
  }
  10% {
    margin-top: 5px;
  }
  30% {
    margin-top: -17px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes Move2 {
  0% {
    margin-top: 0px;
  }
  10% {
    margin-top: 5px;
  }
  50% {
    margin-top: -15px;
  }
  100% {
    margin-top: 0px;
  }
}
@keyframes Move3 {
  0% {
    margin-top: 0px;
  }
  10% {
    margin-top: 5px;
  }
  60% {
    margin-top: -15px;
  }
  100% {
    margin-top: 0px;
  }
}
.animation-bond4 {
  position: relative;
  margin: 40px 18px;
  display: flex;
  justify-content: center;
}

.animation-bond4 .ani-box {
  width: 100%;
}

.animation-bond4 .ani-box img {
  margin: 0 auto;
}

.animation-bond4 .ani-box .img-mode {
  position: absolute;
  width: 30%;
  height: 100%;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 170px;
}

.animation-bond4 .ani-box .img-mode span {
  width: 16%;
  height: 13%;
  background: #ededf3;
  display: block;
  overflow: hidden;
  position: absolute;
}

.animation-bond4 .ani-box .img-mode .box1 {
  left: 32%;
  top: 12%;
  animation: boxMove 2.5s infinite;
}

.animation-bond4 .ani-box .img-mode .box2 {
  left: 70%;
  top: 12%;
  animation: boxMove 3.5s infinite;
}

.animation-bond4 .ani-box .img-mode .box3 {
  left: 12%;
  top: 25%;
  animation: boxMove 3.5s infinite;
}

.animation-bond4 .ani-box .img-mode .box4 {
  left: 30%;
  top: 25%;
  animation: boxMove 4.5s infinite;
}

.animation-bond4 .ani-box .img-mode .box5 {
  left: 45%;
  top: 40%;
  animation: boxMove 3s infinite;
}

.animation-bond4 .ani-box .img-mode .box6 {
  left: 65%;
  top: 40%;
  animation: boxMove 4.5s infinite;
}

@keyframes boxMove {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 0.8;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* 채권 취소 리스트 */
.cancel-content {
  padding: 16px 16px 50px;
  flex: 1;
}

.cancel-content .chk-sub {
  background-color: #fff;
  border: var(--line-f5);
}

.cancel-content .chk-sub .dl-list .list-asterisk {
  margin: 10px 0 0 0;
}

.cancel-content .chk-sub .dl-list {
  height: auto;
}

.cancel-content .chk-sub .dl-list .form-group dl dt {
  font-size: 14px;
}

.cancel-content .chk-sub .dl-list .form-group dl dt,
.cancel-content .chk-sub .dl-list .form-group dl dd {
  line-height: 24px;
  height: 24px;
}

.cancel-content .chk-sub .dl-list .form-group [type="radio"] + label {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 18px 0;
}

.cancel-content .chk-sub .dl-list [type="radio"] + label::after,
.cancel-content .chk-sub .dl-list [type="radio"]:checked + label::after {
  left: initial;
  right: 0;
  top: 14px;
}

.cancel-content .chk-sub .dl-list .form-group [type="radio"]:disabled + label dt {
  color: #ddd;
}

.cancel-content .chk-sub .dl-list .form-group [type="radio"]:disabled + label dd {
  color: #ddd;
}

.cancel-content .chk-sub + .chk-sub {
  margin-top: 8px;
}

/* 채권 투자현황 */
.type-B .list-pro {
  margin-bottom: 60px;
}

.type-B .stock-top .stock-icon {
  width: 48px;
  height: 48px;
}

.type-B .stock-top .stock-name {
  display: flex;
  align-items: flex-start;
  width: 100%;
  flex: 1;
  flex-direction: column;
}

.type-B .stock-top .stock-name .stock-title {
  width: 100%;
}

.type-B .stock-top .stock-name .date-per {
  font-size: 12px;
  line-height: 16px;
  color: #888;
}

.type-B .stock-top .stock-icon + .stock-name {
  margin-left: 8px;
}

.type-B .summary {
  border: none;
  padding: 0;
}

.type-B .summary dt,
.type-B .summary dd {
  font-size: 13px;
}

.type-B .summary dd strong {
  font-size: 16px;
}

.type-B .title-wrap h2 {
  font-size: 17px;
  line-height: 24px;
  display: flex;
  align-items: center;
}

.content-view {
  position: relative;
}

.content-view .icon-arr-right {
  width: 100%;
  position: absolute;
  height: 58px;
}

/* 채권 잔고 */
.result-view.red-box {
  text-align: left;
}

.result-view.red-box {
  text-align: left;
}

.result-view.red-box .price-wrap {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  margin-bottom: 8px;
}

.result-view.red-box .icon-arr-right {
  padding: 0;
  margin-top: 42px;
}

.result-view.red-box .icon-arr-right::after {
  right: 22px;
  background: #aaa;
}

.result-view.red-box .price-wrap p {
  font-size: 13px;
  color: #888;
  line-height: 20px;
  margin-bottom: 4px;
}

.result-view.red-box .price-wrap .price,
.result-view.red-box .price-wrap strong {
  font-size: 15px;
  color: #222;
  line-height: 22px;
}

@keyframes sprout {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce {
  0% {
    margin-top: -40px;
  }
  10% {
    margin-top: 10px;
  }
  20% {
    margin-top: -20px;
  }
  30% {
    margin-top: 10px;
  }
  40% {
    margin-top: 0px;
  }
  50% {
    margin-top: 0px;
  }
  100% {
    margin-top: 0;
  }
}
/* 이벤트 추후 많아지면 따로 css 정리 */
/* 이벤트 계속 있을 시 통 이미지 사용 */
.layer-pop.float-pop {
  width: 100%;
  height: auto;
  bottom: 30px;
  z-index: 11;
  display: initial;
  top: auto;
}

.float-pop .float-content {
  margin: 0 16px;
  display: flex;
  align-items: center;
  background-color: #112a53;
  border-radius: 8px;
}

.float-pop .pop-content {
  width: 100%;
  height: 60px;
  padding: 12px 0 12px 16px;
  color: #fff;
}

.float-pop .won-icon {
  height: 100%;
  /* background: url(/inc/coinone/img/event/event-500-front2.png) no-repeat left center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 38px;
  padding-left: 43px;
  display: flex;
  align-items: center;
}

.float-pop .btn-close-pop {
  width: 20px;
  height: 40px;
  /* -webkit-mask: url(/inc/coinone/img/ico-close.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 14px 14px;
  background-color: #fff;
  display: block;
  margin: auto;
  flex: none;
  margin-right: 15px;
}

.text-hidden {
  overflow: hidden;
  border: 0;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

.chk-list.sm-list {
  margin: 24px 0 40px;
}

/* 담보부족 안내 */
.full-pop .guide-view {
  margin: 0 24px 24px;
}

.guide-view {
  margin: 56px 24px;
}

.guide-view .pop-content {
  padding: 0;
  overflow-y: auto;
}

.guide-view .pop-info-tit {
  font-size: 20px;
  padding: 8px 0;
  margin-bottom: 32px;
  text-align: left;
  line-height: 28px;
  font-weight: 700;
  word-break: keep-all;
}

.guide-view .pop-info-tit .date {
  font-size: 12px;
  color: #888;
  font-weight: 400;
}

.guide-view .pop-info-box {
  border-radius: 8px;
  background-color: rgba(236, 95, 95, 0.0588235294);
  padding: 32px 0;
  text-align: center;
  margin-bottom: 24px;
}

.guide-view .pop-info-box .title {
  font-size: 14px;
  font-weight: 700;
}

.guide-view .pop-info-box .score,
.guide-view .pop-info-box .price {
  font-size: 24px;
  color: #f24538;
  font-weight: 700;
  line-height: 32px;
}

.guide-view .pop-info-box .number {
  font-size: 12px;
  color: #666;
}

.guide-view .pop-info-txt {
  text-align: left;
  font-size: 17px;
  line-height: 24px;
  word-break: keep-all;
}

.guide-view .pop-info-txt .list-bar li + li {
  margin-top: 4px;
}

.guide-view .label-text {
  margin-top: 24px;
}

.guide-view .label-text p {
  text-indent: -12px;
  padding-left: 12px;
}

.guide-view .label-text p + p {
  margin-top: 8px;
}

.guide-view .text-box {
  font-size: 15px;
}

/* 추가 */
.guide-view .info-tit {
  font-size: 20px;
  padding: 8px 0 0;
  margin-bottom: 32px;
  text-align: left;
  line-height: 28px;
  font-weight: 700;
  word-break: keep-all;
}

.guide-view .info-tit .date {
  font-size: 12px;
  line-height: 20px;
  color: #888;
  font-weight: 400;
  margin-top: 8px;
  display: inline-block;
}

.guide-view .info-box {
  border-radius: 8px;
  background-color: rgba(236, 95, 95, 0.0588235294);
  padding: 32px 0;
  text-align: center;
  margin-bottom: 24px;
}

.guide-view .info-box .title {
  font-size: 14px;
  font-weight: 700;
}

.guide-view .info-box .score,
.guide-view .info-box .price {
  font-size: 24px;
  color: #f24538;
  font-weight: 700;
  line-height: 32px;
}

.guide-view .info-box .number {
  font-size: 12px;
  color: #666;
}

.guide-view .info-view-wrap .info-box .number {
  font-size: 14px;
  color: #222;
  font-weight: 700;
}

.guide-view .info-view-wrap .info-box .assist {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
  line-height: 14px;
}

.guide-view .info-txt {
  text-align: left;
  font-size: 17px;
  line-height: 24px;
  word-break: keep-all;
}

.guide-view .info-txt .list-bar li + li {
  margin-top: 4px;
}

.guide-view .account-list-wrap {
  margin-top: 40px;
  margin-bottom: -8px;
}

.guide-view .account-list-wrap .title {
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 16px;
}

.guide-view .account-list-wrap li {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 20px;
}

.guide-view .account-list-wrap li + li {
  margin-top: 8px;
}

.guide-view .account-list-wrap li .account {
  font-size: 13px;
  min-width: 95px;
}

.guide-view .account-list-wrap li .price {
  color: #222;
  font-size: 15px;
  line-height: 22px;
  text-align: right;
  font-weight: 700;
}

.guide-view .account-list-wrap li .price .assist {
  font-size: 12px;
  color: #888;
  line-height: 20px;
  font-weight: 400;
  margin-top: 4px;
}

.guide-view .asterisk-wrap {
  margin-top: 24px;
}

.guide-view .asterisk-wrap .list-asterisk + .list-asterisk {
  margin-top: 8px;
}

.pop-content .trade-list .unsuitable .chk-box .form-group [type="checkbox"] + label {
  padding-right: 0;
}

/* 투자성향별 상품안내 */
.scroll-table {
  overflow: auto;
  margin: 16px 0px 16px 16px;
  padding-right: 16px;
  height: calc(100% - 123px);
}

.scroll-table table {
  width: auto;
  font-size: 12px;
  table-layout: fixed;
  word-break: keep-all;
  border-spacing: 0;
  border-collapse: separate;
}

.scroll-table table tbody tr:last-child td {
  border-bottom: 1px solid #ddd !important;
}

.scroll-table table tbody tr:last-child th {
  border-bottom: 1px solid #ddd !important;
}

.scroll-table table tbody tr th {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  background-color: #fff;
}

.scroll-table table th {
  background-color: #f7f7f7;
  padding: 10px 12px;
  text-align: center;
  border-bottom: none !important;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

.scroll-table table td {
  background-color: #fff;
  padding: 10px 8px;
  text-align: center;
  border-bottom: none !important;
}

.scroll-table table th,
.scroll-table table td {
  line-height: 16px;
  border: var(--line-dd);
  border-left: none !important;
  white-space: nowrap;
}

.scroll-table table th:first-child,
.scroll-table table td:first-child {
  border-left: 1px solid #ddd !important;
}

.scroll-table table th:first-child {
  text-align: left;
  border-left: 1px solid #ddd;
}

.scroll-table table tr.sticky th:first-child {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  left: 0;
}

.scroll-table table tr.sticky2 th {
  position: sticky;
  position: -webkit-sticky;
  top: 37px;
}

.scroll-table table tr.sticky2 th:first-child {
  text-align: center;
  border-left: none !important;
}

.scroll-table table .bd {
  font-weight: bold;
}

.scroll-table table tbody tr.grade-1 th {
  color: #f34b55;
}

.scroll-table table tbody tr.grade-1 th::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1px;
  left: 0;
  border: 3px #f34b55 solid !important;
}

.scroll-table table tbody tr.grade-1 td {
  border: 1px rgba(243, 75, 85, 0.5019607843) solid;
  background-color: rgba(243, 75, 85, 0.1019607843);
  border-bottom: 1px rgba(243, 75, 85, 0.5019607843) solid !important;
}

.scroll-table table tbody tr.grade-2 th::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1px;
  left: 0;
  border: 3px #f88004 solid !important;
}

.scroll-table table tbody tr.grade-2 th {
  color: #f88004;
}

.scroll-table table tbody tr.grade-2 td {
  border: 1px rgba(248, 128, 4, 0.5019607843) solid;
  background-color: rgba(248, 128, 4, 0.1019607843);
  border-top: none !important;
  border-bottom: 1px rgba(248, 128, 4, 0.5019607843) solid !important;
}

.scroll-table table tbody tr.grade-3 th {
  color: #f88004;
}

.scroll-table table tbody tr.grade-3 th::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1px;
  left: 0;
  border: 3px #f88004 solid !important;
}

.scroll-table table tbody tr.grade-3 td {
  border: 1px rgba(248, 128, 4, 0.5019607843) solid;
  background-color: rgba(248, 128, 4, 0.1019607843);
  border-top: none !important;
  border-bottom: 1px rgba(248, 128, 4, 0.5019607843) solid !important;
}

.scroll-table table tbody tr.grade-4 th {
  color: #14ae5c;
}

.scroll-table table tbody tr.grade-4 th::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1px;
  left: 0;
  border: 3px #14ae5c solid !important;
}

.scroll-table table tbody tr.grade-4 td {
  border: 1px rgba(20, 174, 92, 0.5019607843) solid;
  background-color: rgba(20, 174, 92, 0.1019607843);
  border-top: none !important;
  border-bottom: 1px rgba(20, 174, 92, 0.5019607843) solid !important;
}

.scroll-table table tbody tr.grade-5 th {
  color: #0094ff;
}

.scroll-table table tbody tr.grade-5 th::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -1px;
  left: 0;
  border: 3px #0094ff solid !important;
}

.scroll-table table tbody tr.grade-5 td {
  border: 1px rgba(0, 148, 255, 0.5019607843) solid;
  background-color: rgba(0, 148, 255, 0.1019607843);
  border-top: none !important;
  border-bottom: 1px rgba(0, 148, 255, 0.5019607843) solid !important;
}

.scroll-table table tbody tr.grade-6 th {
  color: #2b4eb6;
}

.scroll-table table tbody tr.grade-6 th::before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% + 2px);
  top: -1px;
  left: 0;
  border: 3px #2b4eb6 solid !important;
}

.scroll-table table tbody tr.grade-6 td {
  border: 1px rgba(43, 78, 182, 0.5019607843) solid;
  background-color: rgba(43, 78, 182, 0.1019607843);
  border-top: none !important;
  border-bottom: 1px rgba(43, 78, 182, 0.5019607843) solid !important;
}

/* 투자성향별 상품안내 팝업용 */
.section-inner.pop-content {
  padding: 16px 24px 32px;
}

.section-inner.pop-content .pop-info-tit {
  text-align: left;
}

.section-inner.pop-content .propensity-area {
  margin: 16px 0 48px;
}

.section-inner.pop-content .propensity-area .propensity-list {
  margin: 0 -8px 0;
}

.pop-content .scroll-table table th,
.pop-content .scroll-table table td {
  white-space: inherit;
  color: #222;
  line-height: 20px;
}

.pop-content .scroll-table {
  overflow: auto;
  margin: 0;
  padding-right: 0;
  height: auto;
}

.pop-content .scroll-table table {
  width: 100%;
  font-size: 12px;
  table-layout: fixed;
  word-break: keep-all;
  border-spacing: 0;
  border-collapse: separate;
}

.pop-content .scroll-table table th:first-child {
  text-align: center;
}

/* 공모주 */
/* 투자설명 라디오 버튼 */
.form-list {
  margin: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.form-list li .form-group {
  height: 28px;
}

.form-list li + li {
  margin-top: 8px;
}

.form-group [type="radio"]:disabled + label {
  color: #aaa;
}

.form-group [type="radio"]:disabled + label::before {
  background-color: #ddd;
  border-color: #ddd;
}

.form-group [type="radio"]:disabled + label::after {
  content: "";
  width: 28px;
  height: 28px;
  z-index: 1;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: 0;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat center;
  -webkit-mask-size: 15px auto;
  background-color: #aaa;
  border: none;
}

/* //투자설명 라디오 버튼 */
/* 청약 홈 */
.ipo-tabs.tab-fixed .tab-content {
  padding-top: 105px;
}

.ipo-tabs.tab-fixed .tab-content .section {
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ipo-tabs.tab-fixed .list-stock.sortable {
  margin-top: 24px;
  margin-bottom: 0;
}

.ipo-tabs.tab-fixed .list-stock.sortable .stock-title {
  word-break: break-word;
}

.ipo-tabs.tab-fixed .list-stock.sortable + .bottom-content {
  background-color: #fff;
  padding-top: 32px;
  padding-bottom: 0;
}

.ipo-tabs.tab-fixed .no-result + .bottom-content {
  background-color: #fff;
  padding-top: 32px;
  padding-bottom: 0;
}

.ipo-tabs.tab-fixed .title-wrap {
  font-size: 20px;
  font-weight: 700;
  line-height: 34px;
  background: #fff;
  padding: 16px;
  margin-bottom: 0;
  position: fixed;
  top: 56px;
  left: 0;
  z-index: 2;
  width: 100%;
}

.ipo-tabs.tab-fixed .tabs {
  position: fixed;
  top: 120px;
}

.ipo-tabs.tab-fixed .tabs ul {
  margin: 0 16px;
}

.ipo-tabs.tab-fixed .btn-line-sm.blue {
  border: none;
  font-weight: 700;
  color: #0083d1;
  background-color: rgba(0, 131, 209, 0.0784313725);
}

.ipo-tabs.tab-fixed .btn-line-sm.green {
  border: none;
  font-weight: 700;
  color: #0baa7b;
  background-color: rgba(11, 170, 123, 0.0784313725);
}

.ipo-tabs.tab-fixed .btn-line-sm.gray {
  border: none;
  font-weight: 700;
  color: #888;
  background-color: rgba(136, 136, 136, 0.0784313725);
}

/* 청구상세 */
.bd-detail-wrap.ipo-wrap .bd-detail-area {
  margin-top: 48px;
}

.bd-detail-wrap.ipo-wrap .date {
  display: flex;
  justify-content: flex-end;
  color: #aaa;
  font-size: 12px;
  line-height: 14px;
  width: 100%;
}

.bd-detail-wrap.ipo-wrap .date.bottom {
  margin-top: -30px;
  padding-bottom: 32px;
}

.bd-detail-wrap.ipo-wrap .date.top {
  margin-bottom: 16px;
}

.bd-detail-wrap.ipo-wrap .bd-detail-inner {
  margin: 0 8px;
}

.bd-detail-wrap.ipo-wrap .bd-detail-inner dl {
  line-height: 22px;
  font-size: 15px;
  font-weight: inherit;
}

.bd-detail-wrap.ipo-wrap .bd-detail-inner .icon-arr-right {
  font-size: 15px;
  font-weight: inherit;
}

.bd-detail-wrap.ipo-wrap .bd-detail-inner .date {
  font-size: 13px;
  line-height: 20px;
  margin-top: 4px;
  margin-bottom: 16px;
}

.bd-detail-wrap.ipo-wrap .view-info {
  margin: 40px 8px 0;
  padding-top: 32px;
}

.bd-detail-wrap.ipo-wrap .view-info dd button {
  font-weight: 700;
}

.bd-detail-wrap.ipo-wrap .view-info + .bd-detail-area {
  margin-top: 24px;
}

.ipo-wrap .dl-list.input-ar .select {
  height: auto;
  justify-content: flex-end;
  padding-right: 24px;
  font-weight: 700;
}

.ipo-wrap .dl-list.input-ar .select::after {
  right: 0;
}

.ipo-wrap .detail-box .detail-view dl {
  padding-bottom: 0;
  min-height: 50px;
}

.ipo-wrap .detail-box .detail-view dl:nth-child(odd) {
  width: 40%;
  margin-bottom: 24px;
}

.ipo-wrap .detail-box .detail-view dl:nth-child(even) {
  width: 60% !important;
}

/* .ipo-wrap .detail-box{margin-bottom: 20px} */
.ipo-wrap .detail-box .summary-cell.box-gray {
  margin: 0 -8px;
  font-size: 14px;
}

.ipo-wrap .detail-box .summary-cell.box-gray .title-wrap {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 24px;
  padding: 0;
}

.ipo-wrap .detail-box .summary-cell.box-gray .line-divider {
  margin: 20px 0;
}

.ipo-wrap .detail-box .summary-cell.box-gray dl.color-pint dt,
.ipo-wrap .detail-box .summary-cell.box-gray dl.color-pint dd {
  color: #0083d1;
}

.ipo-wrap .detail-box .summary-cell.box-gray dl dt,
.ipo-wrap .detail-box .summary-cell.box-gray dl dd {
  font-size: 14px;
  line-height: 18px;
  color: #222;
}

.ipo-wrap .bg-white .list-info.accordion {
  border-top: 8px solid #eee;
  padding-bottom: 0;
}

.bottom-content.type1 {
  text-align: center;
  background-color: transparent;
  margin: 40px 16px 30px 16px;
  padding: 0;
}

.bottom-content.type1 .info-text {
  font-size: 13px;
  color: #888;
  padding-bottom: 16px;
  margin: 0 8px;
  padding-top: 40px;
  border-top: var(--line-ee);
  margin-top: -16px;
}

.bottom-content.type1.btn-hidden {
  margin-bottom: 60px;
}

.bottom-content.type1.btn-hidden .info-text {
  padding-bottom: 0px;
}

.bottom-content.type1.btn-hidden .wrap-btn {
  display: none;
}

/* .bottom-content.type1.overlap .info-text {padding-left: 10px; position: relative; } */
/* .bottom-content.type1.overlap .info-text::before {content: '*'; display: inline-block; position: absolute; left: 0; top: 2px;} */
.section-inner.ipo-wrap {
  margin-bottom: 32px;
  padding: 0 8px;
}

.summary-cell.box-gray {
  padding: 24px;
  background-color: #f7f7f7;
  border-radius: 8px;
}

.ipo-wrap .overlap-banner {
  margin: 16px -8px 0;
}

.ipo-wrap .overlap-banner .box-bg {
  padding: 16px;
  background-color: rgba(242, 69, 56, 0.0588235294);
  border-radius: 16px;
}

.ipo-wrap .overlap-banner .box-bg .text-cont {
  font-size: 15px;
  line-height: 22px;
  font-weight: 700;
  color: #222;
  display: flex;
  align-items: center;
}

.ipo-wrap .overlap-banner .box-bg .text-sub {
  font-size: 13px;
  line-height: 18px;
  color: #888;
  text-indent: 22px;
  display: inline-block;
}

.ipo-wrap .overlap-banner .box-bg .text-cont::before {
  content: "";
  width: 16px;
  height: 18px;
  display: inline-block;
  position: relative;
  margin-right: 6px;
  background: #f24538;
  /* -webkit-mask: url(/inc/coinone/img/icon-warning.svg) no-repeat 50% center; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask-size: 16px auto;
}

.ipo-wrap .title-wrap {
  align-items: flex-start;
  flex-direction: column;
  padding: 0 16px;
}

.ipo-wrap .title-wrap .text-cont-md {
  margin-top: 8px;
}

.ipo-wrap .step-area ul {
  display: flex;
  position: relative;
}

.ipo-wrap .step-area ul::before {
  content: "";
  width: 68%;
  height: 1px;
  background-color: #ddd;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-46%);
}

.ipo-wrap .step-area.last ul::before {
  content: "";
  width: 68%;
  height: 1px;
  background-color: #ddd;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.ipo-wrap .detail-box .summary-cell.step-area li {
  position: relative;
  width: 30%;
  text-align: center;
  word-break: break-all;
}

.ipo-wrap .detail-box .summary-cell.step-area li dl {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ipo-wrap .detail-box .summary-cell.step-area li::before {
  content: "2";
  position: relative;
  z-index: 5;
  display: flex;
  margin: 0 auto;
  border-radius: 50px;
  width: 24px;
  height: 24px;
  background-color: #fff;
  border: 1px #eee solid;
  color: #aaa;
  font-size: 14px;
  line-height: 14px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.ipo-wrap .detail-box .summary-cell.step-area li:first-child {
  width: 42%;
}

.ipo-wrap .detail-box .summary-cell.step-area.last li {
  width: 34%;
}

.ipo-wrap .detail-box .summary-cell.step-area.last li:first-child {
  width: 32%;
}

.ipo-wrap .detail-box .summary-cell.step-area li:first-child::before {
  content: "1";
}

.ipo-wrap .detail-box .summary-cell.step-area li:last-child::before {
  content: "3";
}

.ipo-wrap .detail-box .summary-cell.step-area li dl dd {
  font-size: 12px;
  color: #aaa;
  line-height: 14px;
}

.ipo-wrap .detail-box .summary-cell.step-area li dl dt {
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: #aaa;
  margin-bottom: 4px;
}

.ipo-wrap .detail-box .summary-cell.step-area li.active::before {
  background-color: #222;
  border: none;
  color: #fff;
  font-weight: 700;
}

.ipo-wrap .detail-box .summary-cell.step-area li.active dl dt {
  color: #222;
}

.ipo-wrap .detail-box .summary-cell.step-area li.active dl dd {
  color: #666;
}

.ipo-wrap .detail-box .summary-cell.step-area li dl dt,
.ipo-wrap .detail-box .summary-cell.step-area li dl dd {
  text-align: center;
}

.ipo-wrap .detail-box .summary-cell.step-area li + li {
  margin-left: 18px;
}

.ipo-wrap .detail-box .summary-cell.step-area {
  padding: 24px 16px;
  background-color: #f7f7f7;
  border-radius: 16px;
  margin: 0 -8px;
  font-size: 14px;
}

.ipo-wrap .detail-box .summary-cell.step-area li::after {
  content: "";
  background-color: #f7f7f7;
  display: block;
  width: 40px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translateX(-20px);
}

.ipo-wrap.bd-detail-wrap .title .bd-name {
  margin-top: 16px;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}

.ipo-wrap.buy-content {
  padding: 16px 16px 50px;
}

.ipo-wrap.buy-content .title-wrap {
  margin: 0 0 8px;
  padding: 0;
}

.ipo-wrap.buy-content .title-wrap h2 {
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
}

.ipo-wrap.buy-content .box-line {
  margin-bottom: 8px;
  border: var(--line-aa);
  background-color: #fff;
}

.ipo-wrap.buy-content .list-type1.bg-box {
  border: var(--line-ee);
  padding: 4px 16px;
}

.ipo-wrap.buy-content .dl-list.input-ar {
  height: auto;
  border: none;
  padding: 20px 16px;
}

.ipo-wrap.buy-content .dl-list.input-ar dl + dl {
  border-top: 1px solid #f5f5f5;
  padding-top: 16px;
  margin-top: 16px;
}

.ipo-wrap.buy-content .dl-list.input-ar dl dt {
  line-height: 18px;
  display: flex;
  align-items: center;
  height: auto;
  color: #222;
}

.ipo-wrap.buy-content .dl-list.input-ar dl .price {
  font-size: 14px;
  color: #222;
  line-height: 18px;
}

.ipo-wrap.buy-content .dl-list.input-ar .select {
  min-height: 24px;
}

/* 세가지 확인  */
.invest-content.ipo-wrap .chk-list + .list-asterisk {
  margin-top: -32px;
  margin-bottom: 40px;
}

@media screen and (max-width: 320px) {
  .ipo-wrap .detail-box .summary-cell.step-area li {
    width: 36%;
  }
  .ipo-wrap .detail-box .summary-cell.step-area li:first-child {
    width: 28%;
  }
  .ipo-wrap .detail-box .summary-cell.step-area.last li {
    width: 36%;
  }
  .ipo-wrap .detail-box .summary-cell.step-area.last li:first-child {
    width: 28%;
  }
  .ipo-wrap .detail-box .summary-cell.step-area li + li {
    margin-left: 14px;
  }
  .ipo-wrap .detail-box .summary-cell.step-area li::before {
    font-size: 12px;
  }
  .ipo-wrap .detail-box .summary-cell.step-area li dl dt {
    font-size: 13px;
  }
  .ipo-wrap .detail-box .summary-cell.step-area li dl dd {
    font-size: 11px;
  }
}
.bottom-btn-content .box-line {
  margin: 0 16px 32px;
  padding: 24px 20px;
  border: 1px #ddd solid;
  border-radius: 8px;
}

.bottom-btn-content .box-line .summary {
  border: none;
  padding: 0;
  margin: 0;
}

.bottom-btn-content .box-line .summary dl + dl {
  border-top: 1px #f5f5f5 solid;
  padding-top: 12px;
  margin-top: 12px;
}

.bottom-btn-content .box-line .summary dt,
.bottom-btn-content .box-line .summary dd {
  color: #222;
  line-height: 18px;
}

/* 설명서 교부 */
.invest-content.ipo-wrap .info-area {
  margin: 0;
}

.invest-content.ipo-wrap .info-area .title-wrap {
  padding: 0 8px;
  margin-bottom: 0;
}

.invest-content.ipo-wrap .info-area .title-wrap h2 {
  font-size: 18px;
  line-height: 28px;
  display: flex;
  align-items: center;
}

.invest-content.ipo-wrap .info-area .title-wrap h2 + p {
  font-size: 15px;
  line-height: 26px;
  color: #666;
  margin-top: 4px;
}

.invest-content.ipo-wrap .info-area .chk-list {
  margin-top: 16px;
}

.invest-content.ipo-wrap .info-area .chk-list .form-group label {
  line-height: 22px;
}

/* sheet popup */
.sheet .summary-cell.box-gray {
  padding: 20px;
  margin: 16px 16px 8px;
  border-radius: 16px;
}

.header-title-left .pop-info-tit {
  text-align: left;
  margin: 16px 24px;
}

.sheet .summary-cell {
  padding: 24px 24px 0 24px;
}

.sheet .sheet-contents .pop-content.list-scroll {
  height: calc(100% - 150px);
  padding: 8px 0;
}

.sheet .sheet-contents .pop-content.list-scroll .select-form {
  padding: 0 16px 64px;
}

.sheet .sheet-contents .pop-content.list-scroll .select-form li button[class^="select"] {
  padding: 8px 20px;
}

.sheet .sheet-contents .pop-content.list-scroll .select-form li.on button::after {
  content: none;
}

.sheet .summary-cell.box-gray dt {
  color: #222;
}

.sheet .summary-cell.box-gray dd {
  font-weight: 700;
}

.sheet .list-scroll .select-form li.on button[class^="select"] {
  font-weight: 700;
  background: #e5f3fa;
  border-radius: 8px;
}

.sheet .list-scroll .select-form li button[class^="select"] {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  padding: 8px 28px 8px 0;
}

.sheet .list-scroll .select-form li + li {
  margin-top: 8px;
}

.sheet .select-form li.exceed {
  opacity: 0.2;
}

.sheet .bottom-btn-content {
  width: 100%;
  padding: 8px 24px 50px;
  position: absolute;
  bottom: 0;
  background: #fff;
}

/* 금융거래 목적 */
.purp-container {
  background-color: #fff;
  padding: 0 24px 0;
  border-top: 8px solid #f7f7f7;
}

.etc-input {
  position: relative;
  width: 100%;
  border: none;
  min-height: 68px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 26px;
}

.etc-input input {
  border: none;
  padding: 20px 0;
  color: #222;
  font-size: 16px;
  line-height: 23px;
  background-color: #f7f7f7;
  border-radius: 16px;
  text-align: left;
}

.etc-input input:not(:valid) ~ .btn-clear {
  display: none;
}

.etc-input input::placeholder {
  color: #aaa;
}

.etc-input .btn-clear {
  right: 0;
  padding: 9px;
}

.purp-container .form-content dl {
  margin-top: 40px;
}

.purp-container .form-content dt {
  font-size: 16px;
  line-height: 23px;
  font-weight: 400;
}

.purp-container .form-content dd {
  display: block;
}

.purp-container .form-content dd .flex-between {
  display: flex;
  align-items: center;
  margin-top: 16px;
  justify-content: space-between;
}

.purp-container .form-content .text-view {
  margin-top: 16px;
}

.purp-container .form-content .text-view .no {
  display: flex;
  position: relative;
  padding-left: 18px;
  color: #f34855;
  font-size: 13px;
  line-height: 20px;
}

.purp-container .form-content .text-view .no::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 10px;
  display: inline-block;
  /* background: url(/inc/coinone/img/newimg/icon-warning.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 14px auto;
  left: 0;
  top: 2px;
}

.purp-container .select-input {
  line-height: 23px;
  word-break: break-all;
  overflow: hidden;
  width: 100%;
  min-height: 63px;
}

.purp-container .select-input .dl-list {
  padding: 0 20px;
  height: auto;
  display: flex;
  align-items: normal;
  flex-direction: column;
  background-color: #f7f7f7;
  border-radius: 16px;
}

.purp-container .select-input .dl-list + .dl-list {
  margin-top: 8px;
}

.purp-container .select-input [class^="color-"] {
  margin-top: 16px;
  line-height: 18px;
}

.purp-container .form-content .wrap-btn .btn-col {
  font-size: 14px;
  line-height: 18px;
  height: 48px;
  border-radius: 8px;
}

.purp-container .chk-box {
  padding: 16px 4px 40px;
  margin-top: 32px;
  border-top: 1px #f4f4f4 solid;
}

.purp-container .form-content dt em {
  display: block;
  font-weight: 700;
  font-size: 17px;
  color: #0083d1;
  margin-bottom: 4px;
}

@media screen and (max-width: 320px) {
  .event-card .textbox img {
    width: 60%;
  }
  .event-count .stock-name {
    padding-top: 30px;
  }
  .stock-count {
    font-size: 26px;
  }
  .stamp-calendar .col .date {
    font-size: 10px;
  }
  .stamp-calendar .count-coin {
    width: 43px;
    height: 43px;
    line-height: 43px;
  }
  .tabs.guide ul li {
    width: 26.95%;
  }
  .coin-500 .stamp2.stamp-calendar .past.holiday .count-coin {
    font-size: 12px;
  }
  .wrap-btn.label-in .label-tip {
    right: auto;
    min-width: 140px;
    transform: none;
  }
  .stamp2 .summary-text br {
    display: none;
  }
  .section-swiper.autoplay.ipo .img-wrap {
    width: 50px;
    height: 50px;
    margin-right: 20px;
  }
}
@media screen and (max-width: 357px) {
  /* main banner */
  .banner-wrap .txtarea .banner-txt + strong {
    opacity: 1;
    margin-top: 4px;
    letter-spacing: -0.5px;
    font-size: 15px;
    line-height: 20px;
  }
  .banner-guide2 a {
    display: flex;
    align-items: flex-start;
  }
  .banner-guide2 .img-wrap {
    height: 92px;
    display: flex;
    align-items: flex-end;
  }
  .banner-guide2 .img-wrap img {
    width: 80px;
    height: auto;
  }
}
@media screen and (max-width: 280px) {
  .stock-count {
    padding-bottom: 22%;
  }
  .guide-sub .sub-text > ul > li {
    letter-spacing: -1px;
  }
  .top-content .flex-box .form-group {
    margin-top: 4px;
  }
}
@media screen and (min-width: 431px) {
  .modal-content.event-cont {
    max-width: 300px;
  }
  .event-count {
    max-width: 60%;
  }
  .event-card .img-cont img {
    width: 70%;
  }
  .event .wrap-btn-sticky .btn-img img {
    max-width: 50%;
    margin: auto;
  }
  .bg-track-wrap {
    background-size:
      50% auto,
      50% auto;
  }
  .event-card.type2 .bg-track-wrap {
    background-position:
      left top,
      right bottom;
  }
  .event-visual.black img,
  .event-visual.black2 img {
    max-width: 60%;
    margin: auto;
  }
}
@media screen and (max-width: 362px) {
  .ipo-wrap .detail-box .summary-cell.step-area li + li {
    margin-left: 14px;
  }
}
/* ~ iphone 6 height */
@media only screen and (max-device-height: 667px) {
  .password-check .password-desc {
    margin-top: 35px;
  }
}
/* 2024.12.30 camera 
header .header-title-center.flex-column{font-size: 16px;line-height: 26px; font-weight: 700;  -webkit-flex: 1;  flex: none;  width: calc(100% - 0px); text-align: center; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; padding-top: 9px; height: 56px;}
header .header-title-center .sm-text, .header-pop [class^="header-title-"] .sm-text {font-size: 12px; color: #888; margin-top: 0px; line-height: 17px; font-weight: 400;}
.idcard-images + .agree-info-box {background-color: #fff; border-radius: 0; padding: 0; margin: 0;}
.rate-container .top-content {padding: 16px 0px 0px; text-align: left;}
.fade-in{padding-top: 56px;}
.fade-in .contents{min-height: calc(100vh - 56px);}
[class^="header-"] .btn-close-left {position: absolute; top: 0; width: 24px; height: 24px; left: 0px; margin: 10px 10px 22px 14px; background: url(/inc/coinone/img/newimg/ico-close.svg) no-repeat center; background-size: 16px 16px;}
.section-inner.mlf-4{padding-bottom: 40px;}
.section-inner.mlf-4 .rate-container .top-content{padding: 32px 0px 0px;}
.section-inner.mlf-4 .rate-container .title-wrap h2 {font-size: 20px; color: #222; font-weight: 700; line-height: 28px;}
.section-inner.mlf-4 .text-cont-md {font-size: 14px; color: #666; line-height: 22px;}
.idcard-images{margin: 24px 0 32px; display: flex; justify-content: center;}
.idcard-images canvas{border-radius: 16px; background-color: #f3f3f3; width: 323.5px !important; height: 204px !important;}
/* .idcard-images img{width: 323.5px !important; height: 204px !important;} 
.camera-wrap{position:relative; width: 100%; height:100vh; overflow: hidden; z-index: 101;}
.camera-wrap .message-inner{width: 100%;position: absolute; left: 0; top: 0; z-index: 10; background-color: transparent; }
.camera-wrap .message-text{font-size: 17px; line-height: 26px; padding: 40px 0 0; text-align: center; color: #fff; font-weight: 700;}
.camera-wrap .camera-container{position: relative; width: 100%; height: 100vh; overflow: hidden;}
.camera-wrap .camera-container .camera-view{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto; height: auto;  min-height: 100%; min-width: 100%; object-fit: cover;}
.camera-wrap .camera-container .guideline{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 85.6mm; height: 53.98mm; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);}
.camera-wrap .camera-container .guideline .corner{position: absolute; border: 3px solid #fff; width: 17px; height: 17px;}
.camera-wrap .camera-container .guideline .corner.top-left{top: -3px; left: -3px; border-right: none; border-bottom: none;}
.camera-wrap .camera-container .guideline .corner.top-right{top: -3px; right: -3px; border-left: none; border-bottom: none;}
.camera-wrap .camera-container .guideline .corner.bottom-left{bottom: -3px; left: -3px; border-right: none; border-top: none;}
.camera-wrap .camera-container .guideline .corner.bottom-right{bottom: -3px; right: -3px; border-left: none; border-top: none;}
.camera-wrap .btn-camera-wrap{position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; z-index: 10;background-color: transparent;  padding: 0px 32px 20px;}
.ios .camera-wrap .btn-camera-wrap{padding-bottom: 54px;}
.camera-wrap .btn-camera-wrap .btn{padding: 10px 0px; border: none; border-radius: 25px; font-size: 16px; line-height: 23px;font-weight: 700; transition: all 0.3s ease; width: 40px; height: 40px; color: #fff;}
.camera-wrap .btn-camera-wrap .btn-capture{background-color: #fff; font-size: 0; text-indent: -9999px; width: 70px; height: 70px; border-radius: 50%; position:relative;}
.camera-wrap .btn-camera-wrap .btn-camera{font-size: 0; text-indent: -9999px; position:relative;}
.camera-wrap .btn-camera-wrap .btn-camera::before {content: '';position: absolute;left: 50%;top: 50%; transform: translate(-50%, -50%); background: #fff;-webkit-mask: url(/inc/coinone/img/newimg/ico-camera.svg) no-repeat 50% center;-webkit-mask-size: 40px auto;width: 40px;height:40px;z-index: 1;}
.camera-wrap .btn-camera-wrap .btn-capture::before{content: ''; position: absolute; top: 50%; left: 50%; border: 2px solid #222; width: 60px; height: 60px; border-radius: 50%; transform: translate(-50%, -50%);}
.camera-pop{padding: 24px; max-height: calc(100% - 64px); width: calc(100% - 48px); }
.camera-pop .pop-content{border-radius: 12px;}
.camera-pop .pop-content .list-area{width: 100%;}
.camera-pop .pop-content .list-area .btn-list .btn{display: block; width: 100%; border-radius: 12px;  border: none; background-color: #ddd; text-align: left; color: #222; font-size: 16px;  height: 52px; text-align: center;}
.camera-pop .pop-content .list-area .select-form{padding: 0;}
.camera-pop .pop-content .list-area .select-form li+li{margin-top: 10px;}
.camera-pop .pop-content .list-area .select-form li.on button::after{content: none;}
.agree-info-box .masking {margin-top: 30px;}
.agree-info-box .number-bar{align-items: center;}
.agree-info-box .number-bar div + div::before {content: '-'; display: inline-block; padding: 0 2px;}
.agree-info-box .number-bar .select-list + div::before {content: none;}
.agree-info-box .number-bar .select{width: 40px;margin-right: 17px;}
.idcard-images + .agree-info-box .dl-list{padding: 0 4px 0 16px;}
.agree-info-box .number-bar .select::after{right: -13px;}
.agree-info-box .number-bar .input-type{width: 22px; padding: 2px 0px;}
.agree-info-box .number-bar input[type="password"].input-type {width: 93px; text-align: center; font-size: 46px; letter-spacing: -4.5px; line-height: 22px; height: 24px; margin-top: -4px; margin-left: -3px; }
.ios .agree-info-box .number-bar input[type="password"].input-type {width: 91px; font-size: 15px; letter-spacing: 0px; line-height: 23px; height: auto;  margin-top: 0px; margin-left: 0px;}
.agree-info-box .number-bar .select,
.agree-info-box .number-bar .input-type, 
.agree-info-box .number-bar .select{font-size: 15px;}
.agree-info-box .masking.agree{margin: 0;}
.agree-info-box .password-dot {width: 16px; height: 16px; border-radius: 50%; background-color: #e6e6e6; display: inline-block;}
.agree-info-box .password-dot.on {background-color: #222;}
.agree-info-box .password-dot+.password-dot {margin-left: 16px;}
.agree-info-box .masking.agree .password-dot {width: 12px; height: 12px;}
.agree-info-box .masking.agree .password-dot+.password-dot {margin-left: 1px;}
.agree-info-box .disabled .password-dot.on{background-color: #888;}
.agree-info-box .agree-box .dl-list dt {min-width: 90px; font-size: 14px; line-height: 22px; color: #666; height: auto;}
.agree-info-box .agree-box .dl-list dd{margin-top: 0;}
.date-picker{display: flex; align-items: center; justify-content: space-between; height: 23px; border: var(--line-ed); border-radius: 6px;}
.date-picker .form-input{position:relative; display: flex; align-items: center; height:23px; width: 100%;}
.date-picker input[type="date"]{background-color: #333; background: url(/inc/coinone/img/newimg/ico-calendar.svg) no-repeat right 6px center !important; width: 100%; font-size: 15px; border: none; padding: 0 4px 0 0px; line-height: 23px;  height: 23px; -webkit-appearance: none; appearance: none; text-indent: -999px; z-index: 1;}
.date-picker input[type="date"]::-webkit-clear-button,
.date-picker input[type="date"]::-webkit-inner-spin-button,
.date-picker input[type="date"]::-webkit-calendar-picker-indicator{background: transparent;  appearance: none; -webkit-appearance:none;}
.date-picker input[type="date"]::-webkit-calendar-picker-indicator{position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; cursor: pointer; z-index: 1;}
.date-picker .form-input .date-value {position: absolute;  background: #fff; font-size: 15px; line-height: 16px;  width: 100px; }
.pop-content .list-bar li .list-bar-inner-s{font-size: 13px; color: #888; line-height: 17px;}
.pop-content .list-bar li .list-bar-inner-s li{font-size: 13px; color: #888; line-height: 17px; padding-left: 6px;}
.pop-content .list-bar li .list-bar-inner-s li::before{content: ''; width: 2px; height: 2px; border-radius: 50px; display: inline-block; background-color: #888; position: absolute; left: 0px; top: 7px;}
.pop-content .list-bar li .list-bar-inner-s  li+li {margin-top: 4px;}
.cust-info-area{margin-top: 32px;}
.cust-info-area [class^="check-"]{display: flex; align-items: center; position:relative; background-color: #fff; min-height: 64px;}
.cust-info-area [class^="check-"] .exchange::before{content: ''; display: block; width: 36px; height:36px; border-radius: 50px; position: absolute;left: 0;  top: 50%; transform: translateY(-50%);}
.cust-info-area [class^="check-"] .exchange::after{content: ''; width: 36px; height: 36px; display: inline-block; border-radius: 50px;  position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.cust-info-area [class^="check-"] strong{font-size: 17px; line-height: 26px; color: #222; display: block;}
.cust-info-area .check-camera .exchange::before{background:  url(/inc/coinone/img/newimg/ico-exchangebg1.svg) no-repeat center;}
.cust-info-area .check-info .exchange::before{background:  url(/inc/coinone/img/newimg/ico-exchangebg1.svg) no-repeat center;}
.cust-info-area .check-camera .exchange::after{background: #fff; -webkit-mask: url(/inc/coinone/img/newimg/ico-camera2.svg) no-repeat center; -webkit-mask-size: 24px auto; }
.cust-info-area .check-info .exchange::after{background: #fff; -webkit-mask: url(/inc/coinone/img/newimg/ico-buycheck.svg) no-repeat center; -webkit-mask-size: 20px auto;}
.cust-info-area .exchange{ font-size: 13px; line-height: 20px; color: #888; padding-left: 50px; display: inline-block;}
.cust-info-area li + li{margin-top: 32px;}
.cust-info-area{position:relative;}
.cust-info-area ul li+li::after{content: ''; width: 2px;  height: 32px;  background: #ececec;  display: block;border-radius: 10px;  position: absolute;  top: -30px; left: 17px;}
.pop-content .cust-info-area{margin-top: 24px;}
.pop-content .cust-info-area li + li{margin-top: 20px;}
.pop-content .cust-info-area ul li+li::after{content: ''; width: 2px;  height: 20px;  background: #ececec;  display: block;border-radius: 10px;  position: absolute;  top: -20px; left: 17px;}
.cust-info-area [class^="check-"] strong + p,
.cust-info-area [class^="check-"] p + strong{margin-top: 2px;}
@media screen and (max-width:363px) {
    .dl-list .flex-wrap-info{display: block; padding: 19px 0;}
    .dl-list .flex-wrap-info dd {line-height: 23px; min-height: 23px; padding: 8px 0 0px;}
    .idcard-images canvas{width: 300px !important; height: 189px !important;}
}
@media screen and (max-width:320px) {
    .camera-wrap .camera-container .guideline{width: 70.43mm; height: 44.42mm;}
    .camera-wrap .message-text {padding: 20px 0;}
    .idcard-images canvas{width: 240px !important; height: 151.3px !important;}
}*/
/* 2025-09-29 토스트 팝업 - 상단타입 NEW 추가 */
/* toast */
#toast-popup.top {
  position: fixed;
  top: 62px;
  z-index: 100;
  bottom: auto;
  width: auto;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

#toast-popup.top.type1 {
  position: fixed;
  top: 12px;
  z-index: 100;
  bottom: auto;
  width: auto;
  margin: 0 auto;
  left: 50%;
  transform: translateX(-50%);
}

#toast-popup.top .toast-info {
  animation:
    slideInTop ease 0.3s,
    fadeOut linear 10000s 1.5s forwards !important;
}

#toast-popup.top .toast-msg {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

#toast-popup.top [class~="toast"] {
  margin: 0px;
  display: -webkit-flex;
  display: flex;
  background: rgba(0, 0, 0, 0.76);
  border-radius: 50px;
  padding: 12px 18px 12px 13px;
  position: relative;
  justify-content: space-between;
  align-items: center;
}

#toast-popup.top .toast-msg::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  border-radius: 50%;
  background: url(/inc/coinone/img/logo-korea.svg) no-repeat 0 center;
  background-size: 22px auto;
  margin-right: 10px;
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(calc(100% - 90px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
/* // 2025-09-29 토스트 팝업 - 상단타입 NEW 추가 */
/* 2026-03-30 휴면이벤트 추가 */
.section-swiper.promo-260403 {
  margin-top: 8px !important;
}

.section-swiper.promo-260403 .banner-wrap .txtarea {
  font-size: 16px;
  line-height: 24px;
  color: #000;
  letter-spacing: -0.24px;
}

.section-swiper.promo-260403 .banner-wrap .txtarea > strong {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.8);
}

.section-swiper.promo-260403 .banner-wrap .txtarea > p {
  margin-top: 2px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.48);
}

.section {
  margin: 0 !important;
}

.section-inner {
  padding: 0 20px;
}

.contents {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}
.contents .section,
.contents .section-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

header ~ .contents,
.page-header ~ .contents,
.header-pop ~ .contents {
  padding-top: var(--header-height);
}

.full-pop .contents {
  overflow-y: auto;
  height: 100%;
  min-height: initial;
}

.full-pop .contents .section-inner {
  padding-bottom: 64px;
}

body.ios .wrap-btn-fixed {
  padding-bottom: 40px;
}

/* *** header */
header,
.page-header,
.header-pop {
  z-index: var(--z-header);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--wts-white);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 48px;
  margin: 0;
}
.header-inner [class*="header-title-"] {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  flex: 1;
}
.header-inner .header-title-center {
  text-align: center;
}
.header-inner .header-title-left {
  text-align: left;
}
.header-inner button[class*="btn-"] {
  z-index: 1;
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  background-size: 24px 24px;
  transform: translateY(-50%);
}
.header-inner .btn-prev {
  left: 8px;
  background: url("/inc/coinone/shared/img/line_arrow_left.svg") no-repeat center;
}
.header-inner .btn-close,
.header-inner .btn-close-pop {
  right: 8px;
  background: url("/inc/coinone/shared/img/line_close.svg") no-repeat center/contain;
}

header .btn-close {
  font-size: 15px;
  color: #222;
  margin-left: auto;
  padding: 10px;
  position: absolute;
  right: 10px;
}

header .btn-prev {
  z-index: 1;
  position: absolute;
  width: 40px;
  height: 40px;
  left: 6px;
  /* background: url(/inc/coinone/img/arrow-back.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  /* background-size: 10px 18px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background: url("/inc/coinone/shared/img/line_arrow_left.svg") no-repeat center;
  background-size: 24px 24px;
}

header .btn-share {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  border-radius: 30px;
  height: 32px;
  line-height: 32px;
  /* background: #f7f7f7 url(/inc/coinone/img/ico-kakao.svg) no-repeat center left 10px; */ /* 2026-07-24 레거시 이미지 삭제 */
  background-size: 15px 14px;
  padding: 0 10px 0 27px;
}

header .header-title {
  font-size: 15px;
  color: #222;
  line-height: 50px;
  font-weight: 400;
}

.color-red,
.color-buy,
.color-plus,
.stock-increase {
  color: var(--wts-stock-increase) !important;
}

.color-blue,
.color-sell,
.color-minus,
.stock-decrease {
  color: var(--wts-stock-decrease) !important;
}

.stock-steady {
  color: var(--wts-stock-steady) !important;
}

.bg-primary {
  background-color: var(--wts-btn-fill-default-bg);
}

.btn-md.btn-line {
  border: 1px solid var(--wts-gray-200);
  background-color: var(--wts-white);
  color: var(--wts-text-primary);
}

.btn-md,
.btn-xmd,
.btn-lg {
  height: 48px;
  line-height: 48px;
}

.btn-lg {
  font-size: 16px;
  line-height: 1px;
  font-weight: 700;
}

.serviceHome-content .btn-md.btn-line {
  font-size: 14px;
}

[class^="wrap-btn"] .btn-block {
  background-color: var(--wts-gray-50);
}
[class^="wrap-btn"] .btn-block .add {
  font-size: 16px;
  line-height: 1px;
  font-weight: 400;
}

.wrap-btn button .add {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap-btn button .add::before {
  content: "" !important;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("/inc/coinone/shared/img/line_plus.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_plus.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.slide-content .select-form {
  padding-bottom: 10px;
}

.select-form button.select {
  font-weight: 700;
}
.select-form li.on button.select {
  color: var(--wts-select-selected-text);
}
.select-form li.on button.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("/inc/coinone/shared/img/line_check.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_check.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.title-wrap {
  display: flex;
  align-items: center;
  padding: 20px 0 15px;
}
.title-wrap h2,
.title-wrap h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wts-text-primary);
}

[class*="section-inner"] .title-wrap .filter {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--wts-gray-600);
  text-decoration: underline;
}
[class*="section-inner"] .title-wrap .filter::after {
  display: none;
}
[class*="section-inner"] .title-wrap.blind,
[class*="section-inner"] .title-wrap.blind * {
  padding: 0 !important;
  margin: 0 !important;
}

.section-inner-box .title-wrap {
  padding: 0;
  margin-bottom: 20px;
}
.section-inner-box .title-wrap h2 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.text-sm {
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
  color: var(--wts-gray-600);
}

.section.last {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-basis: 0;
}

.last .page-last,
.last .section-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  height: 100%;
}

[class^="page-last-"],
[class^="page-complete-"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
}

[class^="page-complete-wrap"] [class^="page-last-"],
[class^="page-complete-finish"] [class^="page-last-"] {
  flex: none;
}

.page-top {
  position: relative;
}

.page-top::before {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  background: #f7f7f7 url(/inc/coinone/img/ico-check.svg) no-repeat center;
  margin: auto auto 16px;
  position: relative;
}

.page-top-logo {
  position: relative;
}

.page-top-logo.out::before {
  /* background: url(/inc/coinone/img/bank-logos-out.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
}

.page-top-logo::before {
  content: "";
  width: 120px;
  height: 40px;
  display: block;
  /* background: url(/inc/coinone/img/bank-logos.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  margin: auto auto 16px;
  position: relative;
}

.page-last-complete .page-top::after {
  content: "";
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #f7f7f7;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  animation: moveCheck 1.5s both;
}

@keyframes moveCheck {
  0% {
    left: 50%;
  }
  100% {
    left: calc(50% + 28px);
    width: 0;
    height: 0;
    top: 28px;
  }
}
.page-last-fail .page-top::before {
  background: #f24538;
}

.page-last-fail .page-top::after {
  content: "";
  width: 4px;
  height: 23px;
  background-color: #fff;
  -webkit-mask: url(/inc/coinone/img/ico-mark.svg) no-repeat center;
  -webkit-mask-size: cover;
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translate(-50%);
}

.page-last-fail .page-top.bell::before {
  background: #0083d1;
}

.page-last-fail .page-top.bell::after {
  content: "";
  width: 24px;
  height: 28px;
  background-color: #fff;
  -webkit-mask: url(/inc/coinone/img/ico-bell.svg) no-repeat center;
  -webkit-mask-size: cover;
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translate(-50%);
}

.page-msg {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
  line-height: 20px;
}

.page-tit {
  font-size: 24px;
}

.page-sub {
  margin-top: 16px;
  font-size: 16px;
  color: #666;
  display: block;
}

.page-info {
  background-color: #f7f7f7;
  border-radius: 8px;
  padding: 16px 24px;
  margin: 0;
}

.page-info dl {
  display: flex;
  justify-content: space-between;
}

.page-info dl dt {
  color: #666;
}

.page-info .text-cont {
  font-size: 13px;
  text-align: left;
  margin-top: 0;
}

.last .page-info {
  position: -webkit-sticky;
  position: sticky;
  margin: 0 8px 32px;
  padding: 20px 24px;
}

.last .page-info .list-bar {
  margin-top: 8px;
}

.last .page-info .list-bar li {
  font-size: 13px;
  line-height: 20px;
}

.last .page-info .list-bar li::before {
  top: 8px;
}

.last .page-info .tit {
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  margin-bottom: 8px;
  color: #222;
}

.last .page-info .tit + .text-cont {
  margin-bottom: 8px;
}

.page-info.left {
  text-align: left;
  margin: 0 8px 32px;
}

.page-info.left .tit {
  font-size: 15px;
  font-weight: 700;
}

.page-info.left .list {
  font-size: 13px;
  margin-top: 8px;
}

.page-info.link-btn {
  margin: 0 0 16px;
  padding: 0;
}

.page-info.link-btn .icon-arr-right {
  position: relative;
  padding: 20px;
  font-size: 14px;
  line-height: 18px;
}

.page-info.link-btn p + p {
  margin-top: 4px;
}

.page-info.link-btn .icon-arr-right::after {
  right: 20px;
  background-color: #aaa;
}

.page-last-complete + .page-last-fail {
  margin-top: 28px;
}

.full-pop {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
  visibility: hidden;
  background-color: #fff;
  transform: translate(0px, 0px);
}

.layer-pop {
  z-index: var(--home-z-layer-popup);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  transition:
    opacity 0.3s,
    visibility 0s;
}

.dim {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

body.hidden,
.full-pop.hidden .contents {
  width: 100%;
  overflow: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: none;
  overscroll-behavior: none;
}

.full-pop.full-popup-open,
.layer-pop.popup-open {
  visibility: visible;
}

.slide-content {
  z-index: var(--home-z-popup-slide);
  overflow-y: hidden;
  position: relative;
  bottom: -100%;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100% - 88px);
  padding: 40px 16px 30px;
  border-radius: 30px 30px 0 0;
  background-color: var(--wts-white);
  transition:
    bottom 0.3s,
    visibility 0.3s;
}

.popup-open .slide-content {
  bottom: 0;
}

.pop-content {
  overflow-y: scroll;
}

.modal-content {
  width: calc(100% - 70px);
  min-height: 170px;
  margin: auto 35px;
  background-color: #fff;
  border-radius: 16px;
  padding: 40px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 10;
}

.modal-content {
  width: calc(100% - 84px);
  padding: 32px 16px 16px 16px;
  border-radius: 8px;
}

.pop-info-tit {
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  word-break: keep-all;
}

.modal-content .pop-content .pop-info-txt {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}
.modal-content .pop-content .label-text {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--wts-gray-700);
}
.modal-content .pop-content + .wrap-btn {
  margin-top: 24px;
}
.modal-content .pop-content + .wrap-btn > button {
  border-radius: 6px;
}
.modal-content .pop-content + .wrap-btn .btn-line {
  font-size: 16px;
  font-weight: 400;
  background-color: var(--wts-gray-50);
  border: 0 none;
}
.modal-content .pop-content + .wrap-btn .bg-primary {
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

#toast-popup {
  position: fixed;
  bottom: 90px;
  z-index: 100;
  width: 100%;
}

#toast-popup.toast-slide-top {
  z-index: 111;
}

#toast-popup [class~="toast"] {
  margin: 16px;
  display: -webkit-flex;
  display: flex;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  padding: 20px 24px;
  position: relative;
  justify-content: space-between;
  align-items: center;
}

#toast-popup .toast-info {
  text-align: center;
  padding: 20px 24px;
  justify-content: center;
}

.toast-close {
  text-align: left;
}

#toast-popup .toast-top {
  position: fixed;
  bottom: 145px;
  width: calc(100% - 32px);
}

#toast-popup .toast-top .toast-body {
  width: 100%;
  text-align: center;
}

#toast-popup.complete {
  bottom: calc(50% - 60px);
  left: calc(50% - 50px);
  width: auto;
}

#toast-popup.complete.show {
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

#toast-popup .toast-center {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  justify-content: center;
  margin: 0;
  padding: 0;
}

#toast-popup.complete .toast-msg::before {
  content: "";
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 50%;
  background-color: #fff;
  -webkit-mask: url(/inc/coinone/img/ico-check.svg) no-repeat top 13px center;
  -webkit-mask-size: 25px auto;
  background-color: #fff;
  border: none;
  margin-top: -16px;
}

.toast-body .toast-title {
  font-size: 15px;
  color: #fff;
  display: -webkit-flex;
  display: flex;
  font-weight: 400;
}

.toast-body .toast-title > strong {
  margin-right: 4px;
}

.toast-body .toast-msg {
  font-size: 15px;
  color: #fff;
}

#toast-popup .normal {
  margin-left: 4px;
}

#toast-popup .close-btn {
  display: -webkit-flex;
  display: flex;
}

#toast-popup .close-btn .btn-close-pop {
  width: 20px;
  height: 20px;
  background: #fff;
  /* -webkit-mask: url(/inc/coinone/img/ico-close.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  /* -webkit-mask-size: 10px 10px; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask: url("/inc/coinone/shared/img/line_close.svg") no-repeat center;
  -webkit-mask-size: 16px auto;
  display: block;
  margin: auto;
}

#toast-popup .close-btn .btn-move-pop {
  width: 20px;
  height: 20px;
  background: #fff;
  /* -webkit-mask: url(/inc/coinone/img/arrow-right.svg) no-repeat center; */ /* 2026-07-24 레거시 이미지 삭제 */
  /* -webkit-mask-size: 10px 10px; */ /* 2026-07-24 레거시 이미지 삭제 */
  -webkit-mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  -webkit-mask-size: 16px auto;
  display: block;
  margin: auto;
}

#toast-popup .close-btn .btn-close-txt,
#toast-popup .link-btn .btn-text-link {
  color: #fff;
}

.btn-close-txt {
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  background-color: #000;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
}

.btn-arrow-line {
  color: #666;
  text-decoration: underline;
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(calc(100% + 30px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
/* 아이콘 없을때 */
.no-result {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  background-color: transparent;
  text-align: center;
}
.no-result::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  background: url("/inc/coinone/shared/img/fill_circle_info.svg") no-repeat center/contain;
}
.no-result.no-icon::before {
  display: none;
}
.no-result > p {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--wts-gray-700);
  word-break: keep-all;
}
.no-result .sub-info-text {
  margin-top: 11px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--wts-gray-500);
}
.no-result .sub-info-text::before {
  content: "※";
  margin-right: 4px;
}

.list-stock.stock-core-list {
  margin: 0;
}
.list-stock.stock-core-list li {
  padding: 0;
}
.list-stock.stock-core-list li:not([hidden]) + li {
  margin-top: 24px;
}
.list-stock.stock-core-list .stock-icon img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
  max-width: initial;
  flex-shrink: 0;
}
.list-stock.stock-core-list .stock-title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 700;
  color: var(--wts-text-primary);
}
.list-stock.stock-core-list .stock-code {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1;
  color: var(--wts-gray-500);
  word-break: keep-all;
}
.list-stock.stock-core-list .stock-per {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
  font-size: 14px;
  line-height: 14px;
}
.list-stock.stock-core-list .stock-per .price {
  color: var(--wts-gray-800);
  font-weight: 400;
}
.list-stock.stock-core-list .stock-per .stock-increase::before,
.list-stock.stock-core-list .stock-per .stock-decrease::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: top;
}
.list-stock.stock-core-list .stock-per .stock-increase {
  color: var(--wts-stock-increase) !important;
}
.list-stock.stock-core-list .stock-per .stock-increase::before {
  background: url("/inc/coinone/shared/img/fill_arrow_up.svg") no-repeat center/contain;
}
.list-stock.stock-core-list .stock-per .stock-decrease {
  color: var(--wts-stock-decrease) !important;
}
.list-stock.stock-core-list .stock-per .stock-decrease::before {
  background: url("/inc/coinone/shared/img/fill_arrow_down.svg") no-repeat center/contain;
}
.list-stock.stock-core-list .stock-per .stock-steady {
  color: var(--wts-stock-steady) !important;
}

.list-stock.stock-core-list li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-stock.stock-core-list li > a {
  display: flex;
  flex: 1;
  min-width: 0;
  width: auto;
}

.list-stock.stock-core-list li .stock-icon {
  overflow: hidden;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: 8px;
  line-height: 48px;
}

.list-stock.stock-core-list li .stock-name {
  width: auto;
  min-width: 0;
  margin: 0;
}
.list-stock.stock-core-list li .stock-name .stock-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-stock.stock-core-list li .stock-per {
  flex-shrink: 0;
  margin-left: 5px;
}

.favorite {
  flex-shrink: 0;
  line-height: 0;
}

.favorite button {
  width: 24px;
  height: 24px;
  background: url("/inc/coinone/shared/img/fill_star_default.svg") no-repeat center/contain;
}

.favorite button.on {
  background-image: url("/inc/coinone/shared/img/fill_star_active.svg");
}

.list-stock.stock-core-list.is-guest li .stock-per,
.list-stock.stock-core-list li.is-guest .stock-per {
  display: none;
}
.list-stock.stock-core-list.is-guest li > a::after,
.list-stock.stock-core-list li.is-guest > a::after {
  content: "";
  width: 24px;
  height: 24px;
  margin-left: auto;
  background-color: var(--wts-gray-500);
  -webkit-mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.list-item .btn-delete {
  width: 24px;
  height: 24px;
  background-color: var(--wts-gray-600);
  -webkit-mask: url("/inc/coinone/shared/img/line_close.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_close.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.list-item .handle {
  display: block;
  width: 24px;
  height: 24px;
  background-color: var(--wts-gray-200);
  -webkit-mask: url("/inc/coinone/shared/img/line_menu.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_menu.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.stock-core-list.sortable form > ul {
  padding: 32px 20px;
}
.stock-core-list.sortable li {
  padding: 0;
  min-height: 48px;
}
.stock-core-list.sortable .list-item .btn-delete {
  margin-right: 12px;
}
.stock-core-list.sortable .list-item .handle {
  margin-left: 4px;
}

.page-home-header,
.header-blind {
  position: static !important;
  height: auto !important;
  background: none !important;
}

.header-blind ~ .contents {
  padding-top: 0 !important;
}

.page-home-contents {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 0 !important;
  justify-content: normal;
}

.serviceHome-content .inner-wrapper-body {
  padding: 24px 0;
  background: linear-gradient(180deg, #f1f5ff 0%, #dfe8ff 20.19%, #f3f5f7 100%);
}
.serviceHome-content .search-content {
  position: static !important;
  margin: 0 16px 16px;
  padding: 0 !important;
  background-color: transparent !important;
}
.serviceHome-content .search-content .search-wrap {
  position: relative;
}
.serviceHome-content .search-content .btn-search {
  border: 2px solid var(--ci-coinone);
  background-color: var(--wts-white);
  background-image: url("/inc/coinone/shared/img/line_search.svg");
}

.inner-wrapper-body .section {
  margin: 16px !important;
  background: transparent !important;
}
.inner-wrapper-body .section-inner-box {
  padding: 24px 20px;
  border-radius: 16px;
  background-color: var(--wts-white);
  box-shadow:
    0 2px 8px 0 rgba(40, 41, 61, 0.04),
    0 16px 24px 0 rgba(96, 97, 112, 0.16);
}
.inner-wrapper-body .section-inner-box .wrap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-md.btn-line.btn-block {
  display: block;
  width: 100%;
  border: 1px solid var(--wts-gray-200);
  border-radius: 12px;
  background-color: var(--wts-white);
  color: var(--wts-text-primary);
  font-size: 15px;
  text-align: center;
}

.serviceHome-content .footer {
  border-top: 1px solid var(--wts-gray-200);
}
.serviceHome-content .footer .notice-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px 60px;
  background-color: var(--wts-gray-50);
}
.serviceHome-content .footer .foot-logo {
  width: 81px;
  height: 16px;
  background-color: var(--wts-gray-500);
  -webkit-mask: url("/inc/coinone/shared/img/ci_kis.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/ci_kis.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  margin-left: auto;
}
.serviceHome-content .footer .foot-text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--wts-gray-600);
  word-break: break-all;
}
.serviceHome-content .footer .foot-text + .foot-text {
  margin-top: 16px;
}
.serviceHome-content .footer .wrap-btn-notice {
  display: flex;
  align-items: center;
  justify-content: center;
}
.serviceHome-content .footer .wrap-btn-notice [class^="btn-"] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 14px;
  line-height: 1;
}

.balance-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #2e90f5 0%, var(--ci-kis) 100%);
}
.balance-banner .balance-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--wts-white);
}
.balance-banner .balance-link > strong {
  font-weight: inherit;
}
.balance-banner .balance-link::before {
  content: "";
  width: 28px;
  height: 28px;
  background: url("/inc/coinone/img/home/img-wallet.png") no-repeat center/contain;
}
.balance-banner .balance-link::after {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: auto;
  background-color: var(--wts-white);
  -webkit-mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.balance-banner .guide-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  margin-bottom: 4px;
  border-radius: 12px;
  background-color: var(--wts-white);
}
.balance-banner .guide-card .txt-wrap {
  flex: 1;
  min-width: 0;
}
.balance-banner .guide-card .guide-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  line-height: 24px;
  display: block;
  color: var(--wts-text-primary);
}
.balance-banner .guide-card .guide-tit {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wts-text-primary);
  word-break: keep-all;
}
.balance-banner .guide-card .more-txt {
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  display: inline-flex;
  margin-top: 6px;
  align-items: center;
  color: var(--wts-point-blue-200);
}
.balance-banner .guide-card .more-txt::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--wts-point-blue-200);
  -webkit-mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.balance-banner .guide-card > img {
  flex-shrink: 0;
}

.home-banner .inline-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 124px;
  padding: 24px 110px 24px 20px;
  border-radius: 12px;
  background-color: var(--wts-white);
}
.home-banner .inline-card .txt-wrap {
  flex: 1;
  min-width: 0;
}
.home-banner .inline-card .guide-label {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  line-height: 24px;
  display: block;
  color: var(--wts-text-primary);
}
.home-banner .inline-card .guide-tit {
  display: block;
  margin-top: 8px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--wts-text-primary);
}
.home-banner .inline-card .more-txt {
  font-size: 13px;
  line-height: 13px;
  font-weight: 400;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  color: var(--wts-text-primary);
}
.home-banner .inline-card .more-txt::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--wts-text-primary);
  -webkit-mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/line_arrow_right.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.home-banner .inline-card > img {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.inline-card.shadow {
  box-shadow:
    0 2px 8px 0 rgba(40, 41, 61, 0.04),
    0 16px 24px 0 rgba(96, 97, 112, 0.16);
}

.btn-clear {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transform: translateY(-50%);
  background-color: var(--wts-gray-500);
  -webkit-mask: url("/inc/coinone/shared/img/fill_mark_close.svg") no-repeat center;
  mask: url("/inc/coinone/shared/img/fill_mark_close.svg") no-repeat center;
  -webkit-mask-size: 24px;
  mask-size: 24px;
}

.search-wrap input:not(:valid) ~ .btn-clear,
.input-bg-wrap input:not(:valid) ~ .btn-clear {
  display: none;
}

.search-wrap .btn-search,
.search-wrap input {
  padding: 16px 40px 16px 48px;
  background: var(--wts-gray-50) url("/inc/coinone/shared/img/line_search.svg") no-repeat 16px
    50%/24px;
}

.search-content {
  z-index: 11;
  position: sticky;
  top: 56px;
  left: 0;
  padding: 8px 16px 16px;
  background-color: #fff;
}

.search-content + .section {
  padding-top: 0;
  margin-top: 0;
}

.full-pop .search-content {
  top: 0;
  padding: 10px 20px 16px;
  border-bottom: 10px solid var(--wts-gray-50);
}

.banner-slider-wrap .banner-link {
  overflow: hidden;
  display: block;
  border-radius: 12px;
  background-color: var(--wts-white);
}
.banner-slider-wrap .banner-link img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 220px;
  margin: 0 auto;
}
.banner-slider-wrap .swiper-pagination.slide-count {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 18px;
  padding: 2px 4px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  line-height: 1;
  color: var(--wts-gray-300);
  font-family:
    Pretendard,
    SpoqaHanSans,
    "Apple SD Gothic Neo",
    "SFPro",
    "Noto Sans Kr",
    system-ui,
    -apple-system,
    sans-serif;
}
.banner-slider-wrap .swiper-pagination.slide-count:empty {
  display: none;
}
.banner-slider-wrap .swiper-pagination.slide-count.swiper-pagination-lock {
  display: none;
}
.banner-slider-wrap .swiper-pagination.slide-count .swiper-pagination-total,
.banner-slider-wrap .swiper-pagination.slide-count .swiper-pagination-current {
  margin: 0 2px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}
.banner-slider-wrap .swiper-pagination.slide-count .swiper-pagination-current {
  color: var(--wts-white);
}