/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */
/* prettier-ignore */
/*# sourceMappingURL=user.css.map */

.card {font-size:0.9rem;}

.form-list-select {
  --falcon-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234d5969' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  padding: 0.3125rem 2rem 0.3125rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--falcon-input-color);
  background-color: var(--falcon-input-bg);
  background-image: var(--falcon-form-select-bg-img), var(--falcon-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px 12px;
  border: var(--falcon-border-width) solid var(--falcon-input-border-color);
  border-radius: var(--falcon-border-radius);
  -webkit-box-shadow: var(--falcon-box-shadow-inset);
  box-shadow: var(--falcon-box-shadow-inset);
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.form-list-control {
  display: block;
  padding: 0.3125rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--falcon-input-color);
  background-color: var(--falcon-input-bg);
  background-clip: padding-box;
  border: var(--falcon-border-width) solid var(--falcon-input-border-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--falcon-border-radius);
  -webkit-box-shadow: var(--falcon-box-shadow-inset);
  box-shadow: var(--falcon-box-shadow-inset);
  -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.btn-img-button {
	font-size: 1rem;
	background:none;
  border:0;
  cursor: pointer;
  position: relative;
  opacity: 0.5;
 
}

.btn-img-button:hover {
  opacity: 1;
}


.btn_category_img {
  display: inline-block;
  padding: 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--falcon-btn-color);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: var(--falcon-btn-border-width) solid var(--falcon-btn-border-color);
  border-radius: var(--falcon-btn-border-radius);
  background-color: var(--falcon-btn-bg);
  -webkit-box-shadow: var(--falcon-btn-box-shadow);
  box-shadow: var(--falcon-btn-box-shadow);
  -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media (max-width: 557px) {
	.col-sm-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		width: 50%;
	}
}

.div_background_f_dark{
 background-color: var(--falcon-dark);
 color: var(--falcon-table-color);
}



/* common */
body{color: #333; font-family: var(--falcon-font-sans-serif)}
ul,li,section{padding: 0;margin: 0;}
a,
h1,h2,h3,h4,h5,h6{color: inherit; margin-bottom: 0}

pre{font-family: var(--falcon-font-sans-serif) !important; white-space: pre-wrap }

table{table-layout: fixed}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{display: none}
.form-control{
  --falcon-border-radius: 1rem;
  padding : 0.5rem 1rem; min-height: 42px;
}

.form-select{
  --falcon-border-radius : 1rem;padding : 0.5rem 1rem; min-height: 42px;
}

input[type='text'].form-control{box-shadow: none; border-width: 0; border-bottom-width: 1px; border-radius: 0; background: transparent}
input[type='text'].form-control:read-only{color: rgb(var(--falcon-gray-700-rgb))}
input[type='text'].form-control:read-only:focus{border-color: var(--falcon-input-border-color)}
input[type='password'].form-control{box-shadow: none; border-width: 0; border-bottom-width: 1px; border-radius: 0; background: transparent}
input[type='password'].form-control:read-only{color: rgb(var(--falcon-gray-700-rgb))}
input[type='password'].form-control:read-only:focus{border-color: var(--falcon-input-border-color)}

.btn{
  --falcon-border-radius : 1rem;
  --falcon-btn-padding-y : .5rem;
}

.modal{
  --falcon-modal-border-radius : 1rem;
}

#container{overflow: hidden; }
.content_box{width: 100%; max-width: 1400px; margin: 0 auto; }

.rotate-90{transform: rotate(90deg)}
.rotate-180{transform: rotate(180deg)}
.rotate-270{transform: rotate(270deg)}

/* width */
.ratio-1x1{aspect-ratio: 1/1 !important;}
.ratio-4x3{aspect-ratio: 4/3 !important;}
.ratio-16x9{aspect-ratio: 16/9 !important;}
.ratio-3x4{aspect-ratio: 3/4 !important;}
.ratio-9x16{aspect-ratio: 9/16 !important;}

/* color 색상 */
.hover-text-dark:hover{color: var(--falcon-dark) !important;}
.hover-text-primary:hover{color: var(--falcon-primary) !important;}

/* font 폰트 */
.fs--2{font-size: 12px !important;}
.fs-12px{font-size: 12px !important;}

/* position */
.z-3{z-index: 3 !important;}
.z-5{z-index: 5 !important;}
.z-10{z-index: 10 !important;}

/* opacity */
.opacity-0{opacity: 0 !important;}

/* 그리드 */
.grid-col-1{grid-template-columns: repeat(1,1fr); }
.grid-col-2{grid-template-columns: repeat(2,1fr); }
.grid-col-3{grid-template-columns: repeat(3,1fr); }
.grid-col-4{grid-template-columns: repeat(4,1fr); }
.grid-col-5{grid-template-columns: repeat(5,1fr); }
.grid-col-6{grid-template-columns: repeat(6,1fr); }
.grid-col-7{grid-template-columns: repeat(7,1fr); }
.grid-col-8{grid-template-columns: repeat(8,1fr); }
.grid-col-9{grid-template-columns: repeat(9,1fr); }
.grid-col-10{grid-template-columns: repeat(10,1fr); }
.grid-col-11{grid-template-columns: repeat(11,1fr); }
.grid-col-12{grid-template-columns: repeat(12,1fr); }

[class*="grid-col-"]>.col-1{grid-column: span 1; width: auto;}
[class*="grid-col-"]>.col-2{grid-column: span 2; width: auto;}
[class*="grid-col-"]>.col-3{grid-column: span 3; width: auto;}
[class*="grid-col-"]>.col-4{grid-column: span 4; width: auto;}
[class*="grid-col-"]>.col-5{grid-column: span 5; width: auto;}
[class*="grid-col-"]>.col-6{grid-column: span 6; width: auto;}
[class*="grid-col-"]>.col-7{grid-column: span 7; width: auto;}
[class*="grid-col-"]>.col-8{grid-column: span 8; width: auto;}
[class*="grid-col-"]>.col-9{grid-column: span 9; width: auto;}
[class*="grid-col-"]>.col-10{grid-column: span 10; width: auto;}
[class*="grid-col-"]>.col-11{grid-column: span 11; width: auto;}
[class*="grid-col-"]>.col-12{grid-column: span 12; width: auto;}

.overscroll-behavior-contain{overscroll-behavior: contain}

/* custom */
.form-check.type1{min-height: auto; padding: 0; margin: 0}
.form-check.type1 .form-check-input{width: 0; height: 0; position: absolute; top:0; left: 0; z-index: -1; opacity: 0; pointer-events: none}
.form-check.type1 .form-check-label{margin: 0; padding: 8px 16px; border: 1px solid var(--falcon-border-color); border-radius:  var(--falcon-border-radius); width: 100%; text-align: center; box-shadow: var(--falcon-box-shadow-inset); background: var(--falcon-white)}
.form-check.type1 .form-check-input:checked+.form-check-label{border-color: var(--falcon-primary); color: var(--falcon-primary); box-shadow: var(--falcon-btn-box-shadow)}
.form-check.type1 .form-check-input:checked+.form-check-label{}

.page-link{
  --falcon-pagination-padding-x : 1rem;
  --falcon-pagination-padding-y : .25rem;
  --falcon-pagination-font-size : .8rem;
}
.page-item:first-child .page-link,
.page-item:last-child .page-link{
  --falcon-pagination-padding-x : .5rem;

}

  /* content */
/* 코인 결제 모달*/
#layer_banner{position: relative;}
#layer_banner [class*="swiper-button-"]{background: rgba(255,255,255,.5); width: 28px; height: 28px; z-index: 1; border-radius: 50%; margin:0}
#layer_banner [class*="swiper-button-"] span{display: block; width: 100%; height: 100%; background: url("https://smartpay-crypto.net/_global/Admin/img/ic_down_arrow.png") no-repeat center / 16px auto; transform: rotate(90deg)}
#layer_banner [class*="swiper-button-"]::after{display: none}
#layer_banner .swiper-button-prev{left: 5px; transform: translate(0%, -50%)}
#layer_banner .swiper-button-next{right: 5px; transform: translate(0%, -50%)}
#layer_banner .swiper-button-next span{transform: rotate(-90deg)}

/* 키패드 */
.keypad{display: flex; align-items: center; justify-content: center; width: 120px; height: 70px}


.com_loading_popup{width: 100vw;height: 100vh;position: fixed;z-index: 9990;display: none;}
.com_loading_popup.on{display: block;}
.com_loading_popup .bg_box{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.4);}
.com_loading_popup .con_box{width: 300px;height: 200px;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color: #fff;z-index: 10;box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.com_loading_popup .con_box .txt_box{width: 100%;height: 100%;display: flex;justify-content: center;flex-direction: column;align-items: center;}
.com_loading_popup .con_box .ic_loading{width: 50px;margin-bottom: 20px}
.com_loading_popup .con_box .big_txt{font-size: 16px;font-weight: bold;color: #333;}

.scrollbar-hidden{overflow: auto}
.scrollbar-hidden::-webkit-scrollbar{display: none}