@charset "utf-8";/* 로그인 */
.login_bg { background-color: #f4f3ef; }
.login_box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 50px; width: calc(100% - 40px); max-width: 398px; height: auto; }
.logo_img { width: 100%; height: 120px; }
.logo_img img { width: 100%; height: 100%; object-fit: contain; }
.login_pw { position: relative; }
.login_pw img { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.id_pw_link { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.id_pw_link p a { color: #768597; }

/* 회원 관리 */
.title { font-size: 20px; font-weight: 700; color: var(--black); }
table { width: 100%; }

th { padding: 12px; font-size: 14px; font-weight: 700; text-align: center; }
td { padding: 12px; font-size: 14px; font-weight: 500; text-align: center; }
.h_table td { height: 60px; }

/*221011 신규 클래스 추가 신정운 */

.label .desc.readonly { background-color: #ededed; color: #000; border: none; height: 40px;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor:inherit;
}

/*221215 신규클래스 추가 신정운*/
.pop_privacy p { font-size:15px; font-weight: 500; }
.pop_privacy small { color:var(--red); font-size:12px; margin-top:4px; }
.csinput { position: relative; width:100%; }
.cs_statebox { position: absolute; width:calc(100% - 138px); border:1px solid var(--line); background-color: #fff; color:#212121; font-size:15px; z-index:1000; padding:10px; height:300px; overflow-y: scroll; overscroll-behavior: none; }
.resetbox { width:calc(100% - 90px); }
.manualbox { width:calc(100% - 104px); }
.cs_statebox p { margin-bottom:8px; padding:4px; }
.cs_statebox p:last-child { margin-bottom:0; }
.cs_statebox p:hover { background-color: #d3d3d3; cursor:pointer; }
.cs_statebox::-webkit-scrollbar { width: 10px; /* 스크롤바의 너비 */}

.cs_statebox::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */
 background: var(--main); /* 스크롤바의 색상 */

 border-radius: 10px; }

.cs_statebox::-webkit-scrollbar-track { background: #fff; }
.inputchoice { position: relative; width:100%; }
.imgdrop { position: absolute; right:2px; top:10%; background-color: #ededed; width:30px; height:30px; }
.down { transform: rotate(-180deg); }
.nopermission_txt { font-size:14px; font-weight: 500; color:var(--red) }
.cshistory { border-radius: 10px; border:none; padding: 20px; font-weight: 500; font-size:16px; background-color: #ededed; height:220px; overflow-Y: auto; }
.cshistory li { margin-bottom:20px; }
.cshistory .historyex { margin-bottom:10px; }
.datehistory span:nth-child(1), .datehistory span:nth-child(2) { margin-right:6px; }
.historycstxt { font-weight: 400; font-size:14px; }

/* 22.12.16 정지훈 otp */
.card_otp_registration { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 50px; width: calc(100% - 40px); max-width:480px; height: auto; }
.otp_registration_qr_box { margin:40px 0; display:flex; justify-content:center; align-items:center; }
.otp_registration_qr_box img { width:150px; height:150px; background-color:#fdfdfd; }

/* 22.12.16 신정운 Sweet Alert */
.title_sweet { font-size:20px; color:#212121; }
.desc_sweet { font-size:15px; color:#212121; font-weight: 400; }
.swal2-styled { margin:0 !important; }
.swal2-actions:not(.swal2-loading) .swal2-styled:active { background-image: none !important; }
.swal2-styled.swal2-default-outline:focus, .swal2-styled.swal2-cancel:focus { box-shadow: none !important; }
.swal2-actions:not(.swal2-loading) .swal2-styled:hover { background-image: none !important; }
.swal2-actions .swal2-styled.swal2-cancel { margin-right:10px !important; border:1px solid var(--line); }

/* 코인관리 */
.imgcoin img { width:100%; height:100%;}
.imgcoin { width:40px; height:40px; margin-right:18px; margin:0 auto;}
.sub_coin { text-decoration: underline;}
.text_coin { color:#ccc;}

.input_txt { min-width:130px; height:40px; display: flex; align-items: center; color: #999; font-weight: 500; font-size: 14px; }
.box-file-input label { display:flex; justify-content: center; align-items: center; background:var(--main); color:#fff; cursor:pointer; padding: 10px 20px; border-radius: 8px; font-size: 14px; height:40px; font-weight: 700; margin-left:10px; }
.box-file-input label:after { content:"첨부"; }
.symbolname:after { content:"64 x 64 크기의 SVG 파일을 선택하세요."; }
.symbolname.nodan:after { content:""; }
.nodan.colorb { color:#212121; }
.symbolname, .coinsymbolname { COLOR:#666; }
.coinsymbolname { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.delete_btn { text-decoration: underline !important; color:#b50308 !important; }
.box-file-input .file-input { display:none; }
.delete_btn { margin-left:12px; }
.box-file-input .filename { width: 100%; height: 40px; font-size:14px; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); }

.custom_file {display: inline-flex; width: 100%;  border: 1px solid var(--line-color);border-radius: 10px;}
.custom_file_preview{ display:inline-block; border:1px solid #ccc; border-radius:10px; padding:10px; width:150px; height:150px; margin-right:10px;}
.custom_file_preview img{width:100%; height:100%; object-fit:contain; object-position:center;}
.upload_file_preview{padding-left:130px;}
.upload_file_preview img{padding:10px; border:1px solid #ccc; border-radius:10px; width:150px; height:150px; object-fit:contain;}

.custom_file2{display:inline-block; width:100px; height:100px; padding:10px; border:1px solid #ccc; border-radius:10px; background:url('../../assets/img/svg/icon_plus.svg') no-repeat center; cursor:pointer;}
.custom_file2 input{display:none;}
.custom_file2 img{width:100%; height:100%; object-fit:contain; object-position:center;}
.custom_file2.active{background:none;}
.custom_file input { display: none;}
.custom_file_design {width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); height: 40px; font-size:12px; color:#666; font-weight: 500; font-size: 14px; background: #ededed;}
.custom_file_button { display: flex; justify-content: center; align-items: center; background: var(--main); color: #fff; cursor: pointer; padding: 10px 20px; border-radius: 8px; font-size: 14px; width:70px; height: 40px; font-weight: 700; margin-left: 10px;}
.issue_volume { height:40px; font-size:15px; font-weight: 500; color:#999; }
.issue_volume input[type="radio"] { position: relative; top:3px; }
.issue_volume input[type="checkbox"] { position: relative; top:2px; }

/*221228 입출금 내역 신정운 */
.transactiontab li { border: 1px solid #E6EBF1; border-radius: 8px; font-weight: 500; font-family: "NotoSansKR"; height: 42px; font-size:14px;padding:10px 20px; cursor:pointer;}
.transactiontab li.tranactive {
  background: var(--main); color:var(--white);
}
.total_box {display:flex; align-items: flex-end;}
.state_total { color:#999;  font-weight: 400; font-size:16px; padding-left:10px;}
.tran_won {font-size:12px; padding-left:6px;}

/* 2022-12-28 정지훈 */
.customer_details{width:100%; height:200px; padding:10px 16px; border:1px solid var(--line); border-radius:10px; overflow-y:auto;}
.attachment_files{display:flex !important; gap:10px;}
.attachment_files a{font-size:14px; font-weight:400; text-decoration:underline;}
.list_sort_none{background:url("../img/svg/icon_sort_none.svg") no-repeat right center; cursor:pointer;}
.list_sort_asc{background:url("../img/svg/icon_sort_asc.svg") no-repeat right center; cursor:pointer;}
.list_sort_desc{background:url("../img/svg/icon_sort_desc.svg") no-repeat right center; cursor:pointer;}
.table_ui_ux tbody tr:hover td{background-color:#efefef;}

/*221229 신정운 매도매수 수수료 관리 */


.fees_grid .focus_active { border:1px solid var(--main);}
.importantchk span {color:#999; cursor:pointer; font-size:14px;}
.importantchk input {position: relative; top:1px;}
.importantchk {position: relative; top:1px;}
.note-editable {height:500px;}
.note-modal-footer {height:60px !important;}
.note-modal-footer .note-btn {
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 1px solid var(--main)!important;
  background-color: var(--main)!important;
  color: var(--white)!important;
}

/*230105 1:1문의관리 상세페이지  신정운*/
.attachments_box { padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); height: 44px; font-size:15px; cursor:pointer;}
.no_attachments { color:#999; font-weight: 500; font-size:15px;}
.attachments_box p:nth-child(2) {color:#999;}
.qnapopup_bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 99999;}

.qnapopup_bg .popup_img_viewer { width: 595px; height: 842px; padding: 64px 20px 20px 20px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.qnapopup_bg .popup_img_viewer .popup_viewer_close { position: absolute; right: 14px; top: 14px; background-color: #fff; color: #000; border: none; font-size: 20px;  font-weight: 700;}
.qnapopup_bg .popup_img_viewer img { min-width:555px; min-height:758px;  width: 100%; height: 100%; object-fit: contain; border: 1px dashed #ccc;}
.mh_450 { min-height:450px;}
.active_table { background-color:var(--main);  color:#fff;}

.active_table .cursor_view { color:#fff !important;}
.box_con {border:1px solid #f1f3f5; border-radius: 10px;  padding:10px;}
.swap_d {padding-left:6px;}

.line_balance { height:1px; border:1px solid #f1f1f1; margin:6px 0;}
.don_with {width:60px; display:block;}


/*230214 배너 페이지 추가 신정운*/
.banner_img { margin:0 auto;}
.banner_img img { width:100%; max-width: 320px; height:100px;  object-fit: cover;}
.upload_box input { display: none;}
.upload_box > label { position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.upload_box > p { font-size: 14px; font-weight: 700;}
.banner_preview { width: 400px; height: 250px; padding: 10px; border: 1px solid #ccc; border-radius: 10px; background: url(../../assets/img/svg/icon_plus.svg) no-repeat center;}
.banner_preview img {width:100%; height:100%; object-fit: contain;}
.upload_box { position: relative; padding: 10px 20px; display: flex; align-items: center; max-width: 140px;  border-radius: 8px; color:#fff; background: var(--main); margin-left:10px;}
.imgtxt {color: #757575; font-size:13px;}

/*230224 코인부분 수정작업 진행 신정운 */
/* .cointitle_name {  width:254px;}
.coindigital_name {width:250px; word-break: break-all;}
.coin_tiker {width:130px; word-break: break-all;}
.h_35 {height:35px;}

.market_title {  width:205px;  word-break: break-all;}
.market_coinimg {width:180px;}
.market_input {width:300px;} */

/* loading */
.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:#fff; z-index:9999;}
.loading_circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);width:100px; height:100px; border-radius:50%; border:2px solid var(--main); border-top-color:rgba(255,255,255,0); border-bottom-color:rgba(255,255,255,0); animation:loading2 3s infinite;}
.loading_text{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; font-weight:700; color:var(--dark);}
@keyframes loading2{
  100%{transform:translate(-50%,-50%) rotate(360deg);}
}
/* .loader10:before{
  content: "";
  position: absolute;
  top: 0px;
  left: -25px;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  -webkit-animation: loader10g 3s ease-in-out infinite;
      animation: loader10g 3s ease-in-out infinite;
}

.loader10{
  position: relative;
  width: 12px;
  height: 12px;
  top: 46%;
  left: 46%;
  border-radius: 12px;
  -webkit-animation: loader10m 3s ease-in-out infinite;
      animation: loader10m 3s ease-in-out infinite;
}


.loader10:after{
  content: "";
  position: absolute;
  top: 0px;
  left: 25px;
  height: 10px;
  width: 10px;
  border-radius: 10px;
  -webkit-animation: loader10d 3s ease-in-out infinite;
      animation: loader10d 3s ease-in-out infinite;
}

@-webkit-keyframes loader10g{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, 1);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10g{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, 1);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10m{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, 1);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10m{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, 1);}
  75%{background-color: rgba(255, 255, 255, .2);}
  100%{background-color: rgba(255, 255, 255, .2);}
}

@-webkit-keyframes loader10d{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, 1);}
  100%{background-color: rgba(255, 255, 255, .2);}
}
@keyframes loader10d{
  0%{background-color: rgba(255, 255, 255, .2);}
  25%{background-color: rgba(255, 255, 255, .2);}
  50%{background-color: rgba(255, 255, 255, .2);}
  75%{background-color: rgba(255, 255, 255, 1);}
  100%{background-color: rgba(255, 255, 255, .2);}
} */

.loadingbox {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid #F0142F;
  color: #fff;
  background-color: #f0142f;
}



.loadingbox span {
    display: inline-block; /* span 내부요소들을 한줄로 세우기 */
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;    /* span을 동그랗게 */
    animation: loading 1.5s 0s linear infinite;
    /* 이벤트명  반복시간  딜레이시간  이벤트처리부드럽게  이벤트무한반복*/
  }

  .loadingbox span:nth-child(1) {  /*loading의 자식 중 첫번째 span*/
    /*nth-child : 형제 사이에서의 순서*/
    animation-delay: 0s;
    background-color: #fff;
  }

  .loadingbox span:nth-child(2) {
    animation-delay: 0.3s;
    background-color: #fff;
  }

  .loadingbox span:nth-child(3) {
    animation-delay: 0.4s;
    background-color: #fff;
  }
@keyframes loading {        /*loading이라는 keyframe 애니메이션*/
    0%,                      /* 0, 50, 100은 구간*/
    100% {
      opacity: 0;            /* 안보였다가 */
      transform: scale(0.5); /*transform의 scale로 요소를 확대 또는 축소할 수 있음*/
    }
    50% {
      opacity: 1;             /* 보였다가 */
      transform: scale(1.2); /* 1.2배 */
    }
  }

.point_box {display: flex; justify-content: space-between; align-items: center; width:100%;}
.point_box span:nth-child(1) {text-align: left;}
.point_box span:nth-child(2) {flex:none; margin-left:10px; font-size:13px;}