@charset "UTF-8";
.wrap-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  color: var(--Gray100);
}
.wrap-input .top {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  gap: 20px;
}
.wrap-input .info {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 24px;
}
.wrap-input .info .text {
  color: inherit;
  font-size: 1em;
  font-weight: normal;
}
.wrap-input .info._first {
  pointer-events: none;
  justify-content: space-between;
  display: flex;
  flex-direction: row;
  padding: 0 1rem;
  width: 100%;
  font-size: 1rem;
  background: var(--Gray500);
  border-radius: 0.625rem;
  height: 49px;
}
.wrap-input .info._second {
  justify-content: space-between;
  padding: 0 1rem;
}
.wrap-input .info .left {
  margin-left: 0;
  width: calc(50% - 20px);
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}
.wrap-input .info .left:after {
  content: "|";
  font-size: clamp(12px, 0.875rem, 14px);
  position: absolute;
  right: -21px;
  /* top: 2px; */
  top: 0;
  color: var(--Gray100);
}
.wrap-input .info .right {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 0;
  width: calc(50% - 20px);
  z-index: 1;
}
.wrap-input .wrap-select {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
  margin-left: 0;
}
.wrap-input .wrap-select, .wrap-input .wrap-price {
  width: calc(50% - 12px);
}
.wrap-input .wrap-price {
  width: calc(50% - 20px);
  margin-right: 0;
  /* li:first-child dl{justify-content: flex-end;}
  li:first-child dl{justify-content: flex-end;} */
}
.wrap-input .wrap-price li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #fff;
}
.wrap-input .wrap-price li dl {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1em;
  color: inherit;
}
.wrap-input .wrap-price li dl dt {
  margin-left: 0;
  text-align: left;
  line-height: 0;
}
.wrap-input .wrap-price li dl dd {
  margin-right: 0;
  text-align: right;
  color: var(--Gray100);
  line-height: 0;
}
.wrap-input .black {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 8.5rem;
  height: 2.75rem;
  padding: 0 0.8125rem 0 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.9em;
  color: inherit;
  background: var(--Black);
}
.wrap-input #total {
  width: calc(100% - 7rem);
}
.wrap-input .select {
  display: inline-block;
  position: relative;
  margin-right: 0;
  width: calc(100% - 7rem);
}
.wrap-input .selected {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  width: 100%;
  /* width: 8.5rem; */
  height: 2.75rem;
  padding: 0 0.8125rem 0 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.9em;
  color: inherit;
  text-decoration: none;
  background: var(--Black);
}
.wrap-input .selected .arrow {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.25s;
}
.wrap-input #select_price.open .selected .arrow {
  transform: rotate(180deg) translateY(10px);
  transform-origin: center;
}
.wrap-input #select_price.open .options {
  opacity: 1;
  pointer-events: initial;
  height: auto;
}
.wrap-input .options {
  opacity: 0;
  height: 0;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 2.875rem;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  text-align: right;
  font-size: 1em;
  color: inherit;
  background: var(--Black);
  transition: height 0.25s, opacity 0.25s;
}
.wrap-input .options .option {
  width: 100%;
  display: block;
  padding: 0.25rem 0.8125rem 0.25rem 0.875rem;
  font-size: 0.8em;
  color: inherit;
  background: inherit;
  transition: background 0.25s, color 0.25s;
}
.wrap-input .options .option:hover {
  color: #03051f;
  background: #fff;
}
@media all and (max-width: 768px) {
  .wrap-input {
    max-width: unset;
  }
  .wrap-input .info, .wrap-input .wrap-select, .wrap-input .wrap-price {
    gap: 20px;
    width: 100%;
  }
  .wrap-input .info, .wrap-input .wrap-price {
    flex-direction: column;
    height: auto;
  }
  .wrap-input .info .left, .wrap-input .info .right {
    width: calc(50% - 10px);
  }
  .wrap-input .info._second {
    padding: 0;
  }
  .wrap-input .info._second .text {
    padding-left: 1rem;
  }
  .wrap-input .info._first, .wrap-input .black {
    height: 38px;
  }
  .wrap-input .info .left:after {
    right: -11px;
  }
  .wrap-input #total, .wrap-input .select {
    width: calc(100% - 15rem);
  }
  .wrap-input .select {
    z-index: 1;
  }
  .wrap-input .wrap-price {
    background: transparent;
    padding: 0;
  }
  .wrap-input .wrap-price li:first-child dl,
  .wrap-input .wrap-price li:last-child dl {
    justify-content: space-between;
  }
  .wrap-input .info .left, .wrap-input .info .right {
    width: 100%;
    font-size: clamp(12px, 0.875rem, 14px);
  }
}
@media all and (max-width: 460px) {
  .wrap-input .info._first .text {
    font-size: 12px;
    font-weight: normal;
    color: var(--Gray100);
  }
}
@media all and (max-width: 360px) {
  .wrap-input .top, .wrap-input .info {
    gap: 11px;
  }
  .wrap-input .info._first {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
    padding: 0;
  }
  .wrap-input .info._second {
    margin-top: 45px;
  }
  .wrap-input .info .left, .wrap-input .info .right {
    padding: 0.5em 1rem;
    background: #000;
    border-radius: 0.625rem;
  }
  .wrap-input .info .left:after {
    display: none;
  }
  .wrap-input #total, .wrap-input .select {
    width: calc(100% - 9rem);
  }
}

.wrap-btn.billing .btn, .wrap-input .top .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease-in-out, border 0.25s ease-in-out;
  outline: none;
  border-radius: 0.625rem;
}

.wrap-btn.billing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 1.25rem;
}

.wrap-btn.billing .btn, .wrap-input .top .btn {
  font-weight: bold;
}
.wrap-btn.billing .btn:lang(jp), .wrap-input .top .btn:lang(jp) {
  font-weight: normal;
}
.wrap-btn.billing .btn.btn-purchase, .wrap-input .top .btn.btn-purchase {
  width: 7.875rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: var(--Gray100);
  background: var(--Gray400);
  border: 1px solid var(--gray500);
}
.wrap-btn.billing .btn.btn-history, .wrap-input .top .btn.btn-history {
  width: 7.875rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: var(--Gray100);
  background: transparent;
  border: 1px solid var(--Gray400);
}
.wrap-btn.billing .btn.btn-purchase:hover, .wrap-input .top .btn.btn-purchase:hover {
  background: rgba(var(--Primary100), 1);
  border: 1px solid rgba(var(--Primary100), 1);
}
.wrap-btn.billing .btn.btn-history:hover, .wrap-input .top .btn.btn-history:hover {
  background: rgba(var(--Primary100), 1);
  border: 1px solid rgba(var(--Primary100), 1);
}
.wrap-btn.billing .btn._exchange, .wrap-input .top .btn._exchange {
  width: 10.75rem;
  height: clamp(38px, 3.25rem, 48px);
  background: rgba(var(--Primary100), 1);
  font-size: 1.125em;
  color: #fff;
}
.wrap-btn.billing .btn._exchange:hover, .wrap-input .top .btn._exchange:hover {
  background: rgba(var(--Primary200), 1);
}
.wrap-btn.billing .btn._cancel, .wrap-input .top .btn._cancel {
  width: 10.75rem;
  height: clamp(38px, 3.25rem, 48px);
  font-size: 1.125em;
  color: var(--Gray100);
  background: transparent;
  border: 1px solid var(--Gray400);
}
.wrap-btn.billing .btn._cancel:hover, .wrap-input .top .btn._cancel:hover {
  color: var(--Gray100);
  background: rgba(var(--Primary200), 1);
  border: 1px solid rgba(var(--Primary200), 1);
}
.wrap-btn.billing .btn._exchange, .wrap-btn.billing .btn._cancel, .wrap-input .top .btn._exchange, .wrap-input .top .btn._cancel {
  height: 38px;
}

@media all and (max-width: 768px) {
  .wrap-btn.billing {
    max-width: unset;
    margin-top: 0;
  }
  .wrap-btn.billing .btn._exchange, .wrap-btn.billing .btn._cancel {
    width: 50%;
  }
  .wrap-btn .btn {
    height: 36px;
    max-width: 100%;
  }
}
@media all and (max-width: 360px) {
  .wrap-btn.billing {
    gap: 11px;
  }
}
#wrapper_billing .notice {
  padding: 2.25rem 1.5rem;
  border-radius: 0.75rem;
  color: #f8f8f8;
  background: var(--bg_billing_cont);
}
#wrapper_billing .notice dt {
  margin-bottom: 1.5rem;
  font-size: 1.25em;
}
#wrapper_billing .notice dd {
  line-height: 1.9;
  padding-left: 1rem;
  text-indent: -1rem;
  font-size: clamp(13px, 0.875em, 14px);
}
#wrapper_billing .notice .refund-policy {
  padding-left: 2em;
  text-indent: -0.7em;
  font-size: clamp(12px, 0.975em, 13px);
  color: rgba(var(--Positive), 0.65);
}
#wrapper_billing .notice .refund-policy.tit {
  font-size: clamp(14px, 1.25em, 15px);
  color: rgba(var(--Positive), 0.8);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}
@media all and (max-width: 768px) {
  #wrapper_billing .notice {
    order: 1;
    width: 100%;
    margin-top: 3rem;
    margin-left: 0;
    padding: 1.5rem 3rem;
    border-radius: 0;
  }
  #wrapper_billing .notice dd {
    text-indent: -4px;
    padding-left: 4px;
  }
  #wrapper_billing .notice .refund-policy {
    padding-left: 1em;
    text-indent: -0.7em;
  }
  #wrapper_billing .notice {
    max-width: unset;
  }
}

.view-popup._billing_com_popup {
  scroll-behavior: smooth;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  text-align: center;
  transition: opacity 0.25s;
  z-index: 9999;
}
.view-popup._billing_com_popup * {
  box-sizing: border-box;
}
.view-popup._billing_com_popup::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}
.view-popup._billing_com_popup .view-shadow {
  display: none;
  position: fixed;
  opacity: 1;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  top: 0;
  left: 0;
  background-size: cover;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 0.25s, opacity 0.25s;
}
.view-popup._billing_com_popup.show {
  display: block;
  opacity: 1;
  z-index: 100000 !important;
}
.view-popup._billing_com_popup.show .view-shadow {
  display: block;
  opacity: 1;
}
.view-popup._billing_com_popup .pop-sizing {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  width: auto;
  height: auto;
  border: none;
  vertical-align: middle;
  /* overflow-y: scroll; */
  max-height: calc(100% - 48px);
}
.view-popup._billing_com_popup .pop-cont {
  margin: 0 auto;
  max-width: 640px;
  width: 100%;
}
.view-popup._billing_com_popup .pop-article {
  padding: 2rem;
  border: 2px solid rgba(var(--Gray500), 0.5);
  background: #000;
  box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.1);
  border-radius: 0.625rem;
  background: var(--bg_billing_cont);
}
.view-popup._billing_com_popup .pop-article .top-area {
  border-bottom: 0;
  margin-bottom: 0;
}
.view-popup._billing_com_popup .pop-article .top-area .title {
  overflow: hidden;
  text-align: center;
  letter-spacing: -0.5px;
  color: #fff;
  font-size: 1.25em;
  font-weight: normal;
  margin-bottom: 1em;
}
.view-popup._billing_com_popup .pop-article::-webkit-scrollbar {
  width: 9px;
  padding-right: 1px;
  background: transparent;
}
.view-popup._billing_com_popup .pop-article::-webkit-scrollbar-button {
  height: 15px;
}
.view-popup._billing_com_popup .pop-article::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgb(148, 163, 184);
  box-shadow: inset 0px 1px 1px rgb(0, 0, 0);
}
.view-popup._billing_com_popup .pop-article::-webkit-scrollbar-track {
  background-color: transparent;
  height: 100%;
  filter: brightness(80);
}
.view-popup._billing_com_popup #viewUtil {
  width: 100%;
  margin-right: 0;
  margin-bottom: 0.75rem;
  text-align: right;
  font-size: inherit;
}
.view-popup._billing_com_popup #viewUtil button {
  color: #fff;
}
.view-popup._billing_com_popup #viewUtil button i {
  position: relative;
  color: inherit;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}
.view-popup._billing_com_popup #viewUtil button i:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
  transition: background-color 0.25s ease-in-out;
}
.view-popup._billing_com_popup #viewUtil button:hover i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.view-popup._billing_com_popup #viewUtil button:hover i:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: inherit;
  color: inherit;
  background-color: rgba(79, 89, 103, 0.55);
}
.view-popup._billing_com_popup .wrap-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 370px;
  margin: 0 auto;
  font-size: 1em;
  color: #f8f8f8;
}
.view-popup._billing_com_popup .wrap-input .row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: inherit;
}
.view-popup._billing_com_popup .wrap-input .text {
  display: inline-block;
  width: 10rem;
  color: inherit;
  font-size: 0.9em;
  margin-left: 0;
}
.view-popup._billing_com_popup .wrap-input .value {
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  width: 9.5rem;
  height: 2.75rem;
  padding: 0 0.8125rem 0 0.875rem;
  border-radius: 0.5rem;
  text-align: right;
  font-size: 0.9em;
  color: inherit;
  background: var(--Gray800);
}

@media all and (max-width: 768px) {
  .view-popup._pop_purchase_com .row {
    justify-content: space-between;
  }
  .view-popup._pop_purchase_com .pop-cont {
    max-width: unset;
    width: calc(100% - 2rem);
  }
  .view-popup._pop_purchase_com .wrap-input {
    width: 100%;
  }
  .view-popup._pop_purchase_com .pop-article .top-area .title {
    margin-bottom: 1.5em;
  }
}
@media all and (max-width: 360px) {
  .view-popup._pop_purchase_com .wrap-input .text {
    width: 8rem;
    text-align: left;
  }
}
/* billing test 0821  */
button {
  background: none;
}

.mb-hidden-460 {
  display: inline-block;
}

#billing_popup {
  display: flex;
  background: var(--Gray800);
  text-align: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#billing_popup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#wrapper_billing * {
  box-sizing: border-box;
}
#wrapper_billing * .material-icons {
  font-family: "Material Icons" !important;
}
#wrapper_billing #btn_close_heading {
  margin-right: 0;
  color: inherit;
  font-size: 1.25rem;
}
#wrapper_billing #btn_close_heading i {
  position: relative;
  color: inherit;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
}
#wrapper_billing #btn_close_heading i:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
  transition: background-color 0.25s ease-in-out;
}
#wrapper_billing #btn_close_heading:hover i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
#wrapper_billing #btn_close_heading:hover i:before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  font-size: inherit;
  color: inherit;
  background-color: rgba(79, 89, 103, 0.55);
}

#wrapper_billing {
  width: 100%;
  min-width: 240px;
  max-width: 1280px;
  height: 90%;
  background: var(--Gray700);
  border-radius: 0.625rem;
  overflow-x: hidden;
  overflow-y: auto;
}
#wrapper_billing::-webkit-scrollbar {
  width: 9px;
  padding-right: 1px;
  background: transparent;
}
#wrapper_billing::-webkit-scrollbar-button {
  height: 15px;
}
#wrapper_billing::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgb(148, 163, 184);
  box-shadow: inset 0px 1px 1px rgb(0, 0, 0);
}
#wrapper_billing::-webkit-scrollbar-track {
  background-color: transparent;
  height: 100%;
  filter: brightness(80);
}
#wrapper_billing #box {
  height: auto;
  width: 100%;
}
#wrapper_billing #heading, #wrapper_billing #content {
  padding: 2rem;
}
#wrapper_billing #heading {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--Gray500);
  height: 80px;
  color: var(--Gray100);
}
#wrapper_billing #heading .title {
  margin-left: 0;
  color: inherit;
  font-size: 1rem;
  font-weight: 600;
  display: inline-block;
  width: auto;
}
#wrapper_billing #heading .title:lang(jp) {
  font-weight: normal;
}
#wrapper_billing #content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 200px;
  text-align: left;
  color: var(--Gray500);
  gap: 20px;
  font-size: clamp(14px, 1rem, 16px);
}
#wrapper_billing .line {
  height: 1px;
  background: var(--Gray500);
  max-width: 640px;
  width: 100%;
}
#wrapper_billing .notice, #wrapper_billing .wrap-input, #wrapper_billing .wrap-btn, #wrapper_billing .line {
  max-width: 640px;
  width: 100%;
}

@media all and (max-width: 1280px) {
  #wrapper_billing {
    height: 100%;
    border-radius: 0;
  }
}
@media all and (max-width: 768px) {
  #wrapper_billing {
    font-size: clamp(12px, 0.875rem, 14px);
  }
  #wrapper_billing #heading {
    height: 60px;
  }
  #wrapper_billing .line {
    max-width: unset;
  }
  #wrapper_billing #content {
    padding-bottom: 0;
  }
  #wrapper_billing #wrapper_billing {
    background: var(--Gray800);
  }
  #wrapper_billing #box {
    background: var(--Gray800);
  }
}
@media all and (max-width: 460px) {
  #wrapper_billing #heading {
    padding: 1rem;
  }
  #wrapper_billing #content {
    padding: 1rem 1rem 0;
  }
  .mb-hidden-460 {
    display: none;
  }
}
/*

@use './btn';
@use './notice';
@use './input';
@use './complete';
*/
/* 로딩 시작 */
.wrap-loading { /*화면 전체를 어둡게 합니다.*/
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #262626; /*not in ie */
  opacity: 0.9;
  z-index: 100000;
}

.wrap-loading .loading-container {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -75px;
  margin-top: -75px;
}

.display-none {
  display: none;
}

#newsLoading.wrap-loading, #newsLoading.wrap-loading .loading-container {
  position: absolute;
}

#newsLoading.wrap-loading {
  opacity: 1;
}

.spinner__container {
  display: flex;
  width: 150px;
  height: 150px;
  align-items: center;
  justify-content: center;
  padding: 0px;
  /*    border: 1px solid #fff;*/
}

.wrap-loading .loading-txt {
  position: absolute;
  bottom: -10px;
  left: 0;
  display: block;
  width: 100%;
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
  letter-spacing: 0;
}

.loading-container .spinner__dot {
  width: 15px;
  height: 15px;
  margin: 0 10px;
  border-radius: 100%;
}

.loading-container .spinner__square {
  width: 10px;
  height: 10px;
}

@keyframes spinner__effect--8-child-1 {
  50% {
    transform: translate(-325%, -325%);
    background-color: #9d4bc7;
  }
}
@keyframes spinner__effect--8-child-2 {
  50% {
    transform: translate(0, -325%);
    background-color: #9d4bc7;
  }
}
@keyframes spinner__effect--8-child-3 {
  50% {
    transform: translate(325%, -325%);
    background-color: #ffc61d;
  }
}
@keyframes spinner__effect--8-child-4 {
  50% {
    transform: translate(325%, 0);
    background-color: #ffc61d;
  }
}
@keyframes spinner__effect--8-child-5 {
  50% {
    transform: translate(325%, 325%);
    background-color: #29e2ff;
  }
}
@keyframes spinner__effect--8-child-6 {
  50% {
    transform: translate(0, 325%);
    background-color: #29e2ff;
  }
}
@keyframes spinner__effect--8-child-7 {
  50% {
    transform: translate(-325%, 325%);
    background-color: #ff2c6e;
  }
}
@keyframes spinner__effect--8-child-8 {
  50% {
    transform: translate(-325%, 0);
    background-color: #ff2c6e;
  }
}
@keyframes spinner__effect--8-child-9 {
  50% {
    transform: scale(2);
  }
}
.loading-container .spinner__effect--8 .spinner {
  position: relative;
  transform: rotate(45deg);
}

.loading-container .spinner__effect--8 .spinner .spinner__square {
  position: absolute;
  background: #fff;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(1) {
  animation-name: spinner__effect--8-child-1;
  animation-delay: 0.1s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(2) {
  animation-name: spinner__effect--8-child-2;
  animation-delay: 0.2s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(3) {
  animation-name: spinner__effect--8-child-3;
  animation-delay: 0.3s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(4) {
  animation-name: spinner__effect--8-child-4;
  animation-delay: 0.4s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(5) {
  animation-name: spinner__effect--8-child-5;
  animation-delay: 0.5s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(6) {
  animation-name: spinner__effect--8-child-6;
  animation-delay: 0.6s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(7) {
  animation-name: spinner__effect--8-child-7;
  animation-delay: 0.7s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(8) {
  animation-name: spinner__effect--8-child-8;
  animation-delay: 0.8s;
}

.loading-container .spinner__effect--8 .spinner .spinner__square:nth-child(9) {
  animation-name: spinner__effect--8-child-9;
  animation-delay: 1.25s;
}

/* pmang.jp 에서의 빌링 레이아웃 */
#default_billing {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  justify-content: space-around;
  align-items: center;
  min-height: 200px;
  text-align: left;
  color: rgb(248, 250, 252);
  gap: 20px;
}

#wrapper_billing #heading .title.pmang {
  display: inline-block !important;
  text-indent: -2.5rem;
}

#wrapper_billing #heading .title.pmang.channel-hidden {
  display: none !important;
}

#wrapper.channel #wrapper_billing #heading .title.pmang {
  display: none !important;
}

#wrapper.channel #wrapper_billing #heading .title.channel-hidden {
  display: inline-block !important;
}

/* 한게임 빌링 */
#wrapper.channel {
  min-width: 720px;
}
#wrapper.channel, #wrapper.channel #box {
  background: #1e293b;
}
#wrapper.channel #wrapper_billing {
  width: 100%;
  min-width: 240px;
  max-width: 100%;
  height: 90%;
  background: var(--Gray700);
  border-radius: 0.625rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: auto;
  margin-right: auto;
}
#wrapper.channel #wrapper_billing .wrap-input .info._first {
  background: #0f172a;
}
#wrapper.channel #wrapper_billing .wrap-input .info._first, #wrapper.channel #wrapper_billing .wrap-input .info._first .right {
  width: 100% !important;
}

#wrapper_billing #iframe_billing {
  display: block !important;
  overflow: hidden;
  width: 690px !important;
  min-height: 785px !important;
}
#wrapper_billing #box {
  min-height: 100vh;
}
#wrapper_billing .notice,
#wrapper_billing .wrap-input,
#wrapper_billing .wrap-btn,
#wrapper_billing .line {
  max-width: 690px;
  width: 100%;
}
#wrapper_billing #heading .title.pmang {
  display: none !important;
}
#wrapper_billing #heading .title.channel-hidden {
  display: inline-block !important;
}
#wrapper_billing .wrap-input {
  margin-bottom: 20px;
}
#wrapper_billing .wrap-input .info._first {
  width: 100%;
}
#wrapper_billing .wrap-input .info._first .right { /* width:100%; */ }
#wrapper_billing .wrap-btn.billing {
  margin-top: 0;
}
#wrapper_billing #iframe_billing iframe {
  margin-bottom: 20px;
  min-height: 627px !important;
}
#wrapper_billing #iframe_billing .m-shop {
  width: 100% !important;
  max-width: 683px !important;
}
#wrapper_billing #iframe_billing .m-shop .m-shopGuide {
  width: 100% !important;
  width: 683px !important;
}
#wrapper_billing #iframe_billing .m-shop .coinArea {
  width: 100% !important;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}
#wrapper_billing #iframe_billing .m-shop .coinArea .coinList {
  margin-top: 20px;
}