@charset "UTF-8";

/* 공통 contents_cont CSS */
.contents_cont {width: 100%; margin-left:auto; margin-right: auto; padding-left:20px; padding-right: 20px; padding-top:100px; padding-bottom:50px;}
.contents_cont.login {padding-top:0; padding-bottom: 0;}
/* .wrapper.login {background-image: linear-gradient(-120deg, rgb(22,21,34), rgba(255,255,255, 0)), url(../img/contents/bg_02.jpg); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;} */
.inner_cont {color:#fff;}
.divide_bottom {border-bottom: 1px solid var(--dark-gray); color:#fff;}
.divide_bottom.red {border-bottom: 1px solid var(--active);}

/* inner_cont */
.inner_cont.login, .inner_cont.deal, .inner_cont.deal_register, .inner_cont.fee { width: 100%; max-width: 500px; padding: 20px; border-radius:10px; background-color: var(--bg_active);}
.inner_cont.guide ,.inner_cont.deal_history, .inner_cont.cs {max-width: 800px;}
.inner_cont.deal_main, .inner_cont.deal_register, .inner_cont.deal_history,.inner_cont.cs, .inner_cont.fee {margin:0 auto;}

/* button */
.btn_common {width: 100%; height: 50px; border-radius: 5px; background-color: var(--bg_inactive); color:#fff; font-size: 16px; font-weight: 600; line-height: 50px; transition:background-color 300ms ease; }
.btn_common a {display: block; width: 100%; height: 100%;}
.btn_common:hover, .btn_box.half span:hover {background-color: var(--main);}
.btn_box.half span, .btn_box.half button { width: 48%; height:50px; background-color: #333b42; border-radius: 5px; line-height: 50px; text-align: center; cursor: pointer;}
span.btn_common {display: block; text-align: center; cursor: pointer;}
button.active, .btn_common.active {background-color: var(--main);}
.btn_common.search {height: 36px; line-height: 36px;}
.btn_box.pop {padding-top: 30px;}
.btn_box.pop span{width: 48%; height: 50px; line-height: 50px; text-align: center; background-color: var(--bg_inactive); border-radius: 5px; color:#fff; cursor: pointer;}
.btn_box.pop span.active{background-color: var(--main);}
.btn_common.leave {height: unset; padding:4px 0; color:14px; line-height: 1.5;}
button.btn_common.leave:hover {background-color: var(--bg_inactive);}
button.btn_common.active:hover {background-color: var(--main);}

/* select */
.select_box {width: 100%; height: 36px; padding:10px; border: 1px solid #fff; background-color: var(--input_box);  border-radius:5px; color:#fff;}
option {background-color: var(--bg); color:#fff;}

/* popup */
.dark_bg {display: none; position: fixed; width: 100%; height: 100%; left:0; top:0; background-color: rgba(0,0,0,0.5); z-index: -1;}
.pop_up {position: fixed;left:50%; top:50%;transform:translate(-50%, -50%);width: calc(100% - 40px); max-width:460px; padding:20px; background-color: #fff;  border-radius:5px; font-family: 'noto_sans'; z-index: -1; opacity:0; transition:z-index 200ms ease, opacity 200ms ease;}
.view_active { opacity:1; transition:z-index 200ms ease, opacity 200ms ease;}
.dark_bg.view_active {display: block; z-index: 150;}
.pop_up.view_active {z-index: 160;}
.pop_up.privacy_policy { color:#fff; background-color: var(--bg_pop);}
.pop_up.privacy_policy .btn_common {background-color: var(--line);}

/* user > login 로그인 페이지 */
.input_box {position: relative; width: 100%; border-radius: 5px; }
.input_box input { width: 100%; height: 36px; padding: 10px 20px;caret-color: var(--main); background-color: var(--input_box); border:1px solid #fff; border-radius: 5px; color:#fff; transition: border-color 300ms ease;}
.input_box input:focus {border-color:var(--main);}
.input_box input::placeholder {line-height: 36px;}
.input_box img {position: absolute; right:10px; top:50%; transform:translateY(-50%); cursor:pointer;}

/* user > join 회원가입 페이지 */
.verify_btn {min-width:120px; margin-left: 10px; height: 36px; font-size: 14px; color:#fff; border-radius:5px; background-color: var(--bg_inactive); text-align: center; line-height: 36px; transition:background-color 300ms ease; cursor: pointer;}
.verify_btn:hover {background-color: var(--main);}
.check_agree span.check { min-width: 24px;min-height: 24px; margin-right: 10px;background: url(../img/layout/icon_check_off.svg);background-size: cover;background-repeat: no-repeat;background-position: center; }
.check_agree > span:last-child {width: 100%;}
.check_agree input[type = 'checkbox']:checked+span.check {background: url(../img/layout/icon_check_on.svg);background-size: cover;background-repeat: no-repeat;background-position: center;}
.input_box {position: relative;}
.input_icon {position: absolute; right:20px; top:50%; transform: translateY(-50%);}
.valid_time {margin-left: 10px; color:var(--active); font-size: 12px; font-weight: 600; }

/* guide > guide_main 이용안내 */
.guide_list {flex-wrap: wrap; width: 100%; padding-top: 30px;}
.guide_cat { align-self: stretch; width: 49%; padding: 20px; margin-bottom:2%; border-radius: 10px; background-color: var(--bg_inactive); }
.guide_cat:nth-child(odd) {margin-right: 1%;}
.guide_cat:nth-child(even) {margin-left: 1%;}
.guide_link_list {padding-top: 10px;}
.guide_link_list > a {display: block; padding: 6px 10px; transition: color 300ms ease; color:#fff;}
.guide_link_list > a:hover {color:var(--main);}

/* guide > guide_view 이용안내 */
.inner_cont.guide_view {width: 100%; max-width:500px;}
.bread_crum {padding-bottom: 10px;}
.guide_txt {min-height: calc(100vh - 350.39px); padding: 30px 20px; border-radius: 10px; background-color: var(--bg_active);}
.guide_txt p {text-align: justify;}

/* deal > deal_main 거래 메뉴 메인 페이지 */
.inner_cont.deal_main {max-width: 800px;}
.deal_sec {width: 100%; border-radius: 10px; margin-bottom: 30px; background-color:var(--bg_active); overflow: hidden;}
.tab_list {width: 100%;}
.tab_list li{width: 50%; height: 60px; background-color:var(--bg_inactive); text-align: center; line-height: 60px;}
.tab_list li.active {background-color:var(--bg_active); color:var(--main);}
.tab_list li a {display: block; width: 100%; height: 100%;}
.tab_list.current li {height: unset; padding: 20px; padding-bottom: 0; color:#fff; text-align: left; line-height: 1;}
.select_box.deal_main {width:calc(100% - 120px); max-width: 300px;}

  /* table 관련 */
.table_box {position: relative;  max-height: 296.59px; margin: 20px; overflow-y: auto;}

/* 스크롤바 커스텀 */
.table_box::-webkit-scrollbar {width: 10px; height: 10px;}
.table_box::-webkit-scrollbar-thumb {height: 5px; border-radius: 10px; background: #aaaaaa;}
.table_box::-webkit-scrollbar-track { background: #686d7600; border-radius: 10px;}

table thead th {font-weight: 400; min-width: 90px;}
.deal_current_table {width: 100%; text-align: center; border-collapse: collapse;}
.deal_current_table thead {position:sticky; top:-1px; left:0; background-color: var(--bg_inactive); }
.deal_current_table thead tr th, .deal_current_table tr td{ padding:10px;}
.deal_current_table tbody tr {border-bottom: 1px solid var(--line);}
.scroll_box {height: 300px; overflow-y: auto;}
.null.deal_table {display: flex; justify-content:center; align-items:center; height:201.59px; }

/* deal > deal_register 구매/판매 등록 페이지 */
.select_box.register {width: 100%; }

/* deal > deal_history 구매/판매 내역 리스트 페이지 */
.table_box.history {height: 810.59px; overflow-y: unset; overflow-x: auto;}
.table_box.history > .deal_current_table {min-width: 460px;}
.search_box.history {width: calc(50% - 20px); margin-left: auto; margin-right: 20px;}
.search_box.history .select_box{width: 100%; min-width:150px;}
.null.deal_history {height: calc(100vh - 350.39px);}
.pagination { padding-bottom: 30px; padding: 20px 15px;}
.pager_list {margin-bottom: 20px;}
.pager_list li a{display: block; padding: 2px 10px; margin-right:2px; margin-left:2px; border-radius: 5px; color:var(--dark-gray); transition:background-color 300ms ease; white-space: nowrap;}
.pager_list li:hover a {background-color: var(--bg_active); color:#fff;}
.pager_list li.active a{ background-color: #fff; color:#fff; background-color: var(--main);}
.history_tbody > tr { cursor:pointer; transition:background-color 300ms ease;}
.history_tbody > tr:hover { background-color: var(--main);}

.history_tbody > .not_hover:hover {background-color: transparent; cursor:default;}

.history_tbody > tr:hover td:last-child{ color:#fff; }
/* .history_tbody > tr td:last-child > p{ white-space: nowrap; } */


/* deal > deal_view 거래내역(삽니다/팝니다) 상세보기 페이지 */
.inner_cont.deal  { width: 100%; max-width: 500px; margin: 0 auto; padding: 20px; border-radius:10px; background-color: var(--bg_active);}
.details_list li{margin-top: 20px; padding:20px; border-radius: 10px; background-color: var(--input_box); }
.item_tit {display: inline-block; padding:6px 10px; border-radius: 6px; background-color: #2c323a;}

/* dear > dear_ongoing 거래 미완료목록 상세 페이지 */
.rules_txt { margin-top: 20px; padding: 20px; border-radius:10px; border:1px solid var(--line);}
.input_box.point {width: 100%; height: 50px; line-height: 50px; text-align: center; border-radius:5px; border:1px solid var(--line);}

/* dear > my_deal_register 나의 구매/판매 등록 내역 페이지 */

/* wallet > wallet_main 지갑 > 메인 페이지 */
.inner_cont.wallet {max-width: 500px; margin: 0 auto;}
.select_cont { padding: 20px; border-radius: 10px; background-color: var(--bg_active);}
.select_box.wallet_main { width: 100%; max-width:300px;}
.guide_btn {display: block; width:68px; height: 36px; padding:0 10px; margin-left: 10px; border-radius: 5px; border:1px solid var(--bg_inactive); font-size: 12px; line-height: 36px; transition: background-color 300ms ease; white-space: nowrap;}
.guide_btn:hover {background-color: var(--bg_inactive);}
.asset_list {padding-top: 30px;}
.asset_list li {width: 100%; padding: 20px; margin-bottom: 20px; border-radius: 10px; background-color: var(--bg_active);}
.asset_tit img {width: 36px; height: 36px; border-radius: 18px;}

/* wallet > deposit 지갑 > 입금 페이지 */
.addr_box {padding: 20px; border-radius: 10px; background-color: var(--bg_active);}
.select_box.deposit {max-width: 300px;}
.addr_txt {padding: 10px 20px; border-radius: 10px; background-color: var(--bg_inactive); font-size: 16px; font-weight: 600;}
.copy_btn {font-size: 14px; cursor:pointer; white-space:nowrap; transition: color 300ms ease;}
.copy_btn:hover {color:var(--main);}
.qr_box {width: 250px; height: 250px; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; border-radius: 20px; border:1px solid #fff; text-align: center;}
/* .qr_box video {width: 100%; height: 100%; border-radius: 20px;} */

/* wallet > withdraw 지갑 > 출금 페이지 */
.withdraw_info {padding: 20px; border-radius: 10px; background-color: var(--bg_active);}
.withdraw_info input, .withdraw_info input::placeholder {text-align: right;}
.withdraw_info input.left_txt, .withdraw_info input.left_txt::placeholder {text-align: left;}
.input_box input[readonly]:focus {border-color:var(--input_box);}

/* wallet > transfer_history 지갑 > 입출금 내역 페이지 */
.transfer_info {padding-top:20px; padding-bottom:20px; border-radius: 10px; background-color: var(--bg_active);}
.table_box.transfer { height:495px; overflow-y: auto; overflow-x: auto;}

.null.transfer {height: 200px;}

/* wallet > deposit_point 포인트 충전 페이지 */
.charge_box {padding:30px 20px; border-radius: 10px; background-color: var(--bg_active); text-align: center;}
.input_box.charge input {max-width: calc(100% - 84px); text-align: right;}
.input_box.charge input::placeholder {text-align: right;}
.input_box.charge input+span {margin-left: 10px; white-space: nowrap;}

/* wallet > withdraw_point 포인트 출금 페이지 */
.input_box.withdraw {width:100%; margin-bottom: 20px;}
.input_box.withdraw span {width: 100px; margin-right: 10px; text-align: left;}
.input_box.withdraw input {max-width:calc(100% - 110px); text-align: right;}
.input_box.withdraw input.left_txt {text-align: left;}
.input_box.withdraw .select_box {max-width:calc(100% - 110px);}

/* cs > notice 공지사항 리스트 페이지 */
.input_box.search {max-width:370px;}
.btn_common.search {margin-left: 10px; max-width:120px;}
.table_box.notice { height:594px; margin: 0; margin-top: 20px;}
.text-scroll {max-width: 200px; font-size: 14px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}

.table_box.notice tbody tr td:last-child {font-size: 12px;}
.hide {display: block;}
.null.notice {height: 450px;}
.history_tbody > tr.null_notice:hover {background-color: var(--bg); cursor:auto;}

/* cs > notice_view 공지사항 상세페이지*/
.notice_txt_box {padding: 20px; border-radius: 10px; background-color: var(--bg_active);}
.notice_top {padding-bottom: 10px;}
.notice_top span:nth-child(1){font-size: 14px;}
.notice_txt {min-height: calc(100vh - 390px); overflow-y: auto; text-align: justify;}

/* cs > fee_guide 수수료 안내 페이지 */
.table_box.fee {height: unset; margin: 0;}
.fee_table {width: 100%; text-align: center; border-collapse: collapse;}
.fee_table th, .fee_table td {padding: 4px 2px;}
.fee_table th {border-bottom: 1px solid #fff; border-top: 1px solid #fff;  border-right:1px solid #fff; border-left:none; font-size: 14px; }
.fee_table th:last-child {border-right:none;}
.fee_table td {height: 60px; border: 1px solid #fff;}
.fee_table tr td:first-child {border-left:none; }
.fee_table tr:first-child td:last-child {border-right:none; }

/* user > mypage */
.input_box.popup input, .select_box.popup {background-color: #fff; }
.select_box.popup, .input_box.popup input, .input_box.popup input::placeholder {color:var(--dark-gray);}
.select_box.popup option {background-color: #fff; color:#000;}
.mypage_cont {padding: 20px; margin-top: 30px; border-radius: 10px; background-color: var(--bg_active);}
.qr_box {padding:20px;}
.qr_box img {width: 100%;}

/* user > leave01~04 회원탈퇴 */
.step_list li {padding:4px 10px; border-radius: 10px; background-color: var(--bg_inactive);}
.step_list li.active {background-color: var(--main);}
.leave_cont {padding: 30px 20px;  border-radius: 10px; background-color: var(--bg_active);}
.leave_cont.scroll {padding-right:10px;}

/* user > privacy_policy */
.privacy_txt {height: calc(100vh - 330px); padding-right:6px; overflow-y: auto; text-align: justify;}
.privacy_txt::-webkit-scrollbar-track {background:rgba(255,255,255, 0);}
.privacy_txt::-webkit-scrollbar {width:6px;}
.privacy_txt::-webkit-scrollbar-thumb {background-color: var(--dark-gray); border-radius:5px;}
.leave_comp_txt {height:calc(100vh - 500px);}

/* sweetAlert 커스텀 */
.swal2-popup, .swal2-container.swal2-center>.swal2-popup {max-width:410px!important; font-size: 16px!important; border-radius:10px!important;}
.swal2-title {font-size: 18px!important;}
.swal2-styled.swal2-confirm {font-size:16px!important;}

/*신규 클래스  추가  : SJKW */
.text_red { color:var(--active);}
.text_blue { color:var(--main);}

.qna_list {display: flex; justify-content: space-between;align-items: center; padding-bottom: 20px; }
.qna_item {width: 49%; border-bottom: 2px solid var(--light_gray); text-align: center; font-size: 20px; background: var(--bg_active); padding:10px 0; border-radius: 10px;}
.qna_item.active { background: var(--main); color:#fff;}
.input_box textarea { width: 100%; height: 412px; padding: 10px 20px; caret-color: var(--main); background-color: var(--input_box); border: 1px solid var(--input_box); border-radius: 5px; color: #fff;  transition: border-color 300ms ease; outline: none; resize:none;}

.qna_content {margin-top: 30px; width: 100%; font-size: 16px; font-family: "noto_sans"; font-weight: 600;}
.line {border: none; border-top: 10px solid #505050; width:100%; max-width:800px; margin:20px auto;}
.admini_tab li:nth-child(2) { font-size:14px;}
.qna_viewbtn {display: flex; justify-content: space-between; align-items: center; margin-top:20px;}
.qna_viewbtn li {width:49%;}
.qna_viewbtn li:nth-child(1) button {background-color: var(--active);}

.word_keep { word-break: keep-all;}
.main_guide { background: #fff;}
.titlebox {width:100%; text-align: center; margin-bottom:40px;}
.guide_title {font-size:32px;  font-family: "noto_sans"; font-weight: 600; text-align: center; border-bottom:2px solid #0094FA; display:inline-block; text-align: center;}
.main_guide img { max-width:100%;}
.topb{padding:50px 0;}
.guidebox  {
      max-width:768px;
      display:flex;
      margin:0 auto;
      align-items: flex-start;
      flex-wrap:wrap;
      padding:0 20px;
}

.guidebox div:nth-child(1) {
  width:50%;
  margin:0 auto;
}

.guidebox div:nth-child(2) {
  width:50%;
}

.guidetxtbox {
  font-size:20px;
  font-weight: 600;
  padding-left:22px;
}

.total_wrap {
  height:100vh;
}

.topbox {
  position: fixed;
  right: 2%;
  bottom: 50px;
  display: none;
  z-index: 999;
  background: var(--main);
  color:#fff;
  width:40px;
  height:40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  cursor:pointer;
}

/***************************************  반응형 설정 ***********************************/
@media (max-width:767px) {
.guide_title {font-size:20px;}
.main_guide img {width:100%; max-width:100%;}
.guidebox div, .guidebox div:nth-child(1), .guidebox div:nth-child(2)  {width:100%;}
.guidetxtbox {padding-left:0;}

.guidebox div:nth-child(1) {
  text-align: center;
}


}

@media (max-width:576px){
  .pager_list li:nth-child(n+7) {display: none;}
  .pager_list li:last-child {display: block;}
}
@media (max-width:499px){
  /* guide > guide_main 이용안내 */
  .guide_cat {width: 100%; margin-bottom: 20px;}
  .guide_cat:nth-child(odd) {margin-right: 0;}
  .guide_cat:nth-child(even) {margin-left: 0;}

  /* deal > deal_history 구매/판매 내역 리스트 */
  .search_box.history {width: 100%; padding:20px; padding-bottom: 0;}
  .search_box.history .select_box {width: 100%; max-width:100%;}

  /* wallet > deposit 입금 주소 페이지 */
  .copy_btn {align-self: stretch; padding-left:10px; padding-top: 3px;}
  .select_box.deposit {width: 100%; max-width:unset;}

  /* cs > notice 공지사항 */
  .table_box.notice {height: 445px;}
  .table_box.notice thead tr th {font-size: 12px; white-space: nowrap;}
  .table_box.notice tbody tr td {font-size: 12px;}
  .hide {display: none;}

  /* cs > notice_view */
  .notice_top span:last-child {align-self: flex-end;}

  /* user > leave03 */
  .step_list li {width:calc(25% - 5px); min-width:80px; font-size: 14px; text-align: center;}
  .step_list li:nth-child(3) {align-self: stretch; line-height:40px;}

  /* pagination */
  .pager_list li a {font-size: 12px;}

  /* button */
  .btn_common {font-size: 12px;}

}