@charset "utf-8";

/* 로그인 */
.login_bg { background-color: #313537; }
.login_box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 50px; width: calc(100% - 40px); max-width: 398px; height: auto; max-height: 509px;}
.logo_img { margin-bottom: 40px; width: 100%; max-width: 298px; height: 44px;}
.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%);}

/* 회원 관리 */
.title { font-size: 20px; font-weight: 700; color: var(--black); }
table { width: 100%;}
tr { border-bottom: 1px solid var(--line);}
th { padding: 20px 10px 10px; font-size: 15px; font-weight: 700; text-align: center;}
/* td { padding: 20px 10px; font-size: 15px; font-weight: 500; text-align: center;} */
td { padding: 10px; font-size: 15px; font-weight: 500; text-align: center;}
.coin_input { width: 100px; height: 36px; padding: 8px 16px; border : 1px solid var(--line); border-radius: 8px;}

.coin_btn { padding: 10px 20px 10px; background-color: var(--button); border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--main);}
.list_scroll { overflow-x: auto; }
.list_scroll::-webkit-scrollbar { display: none; }
.list_scroll::-webkit-scrollbar-thumb { display: none; }
.list_scroll::-webkit-scrollbar-track { display: none; }
.search_btn_box { display: flex; justify-content:space-between; align-items: center; padding-bottom: 20px;}


/* 회원정보 */
.content_detail { width:100%; margin: auto;}
.user_info_box, .user_info_box02 { display: flex; }
.user_info_box > li { flex-basis: 33%; padding-right: 15px; padding-left: 15px;}
/* .user_info_box > li:last-child {padding-right:0;} */
.user_info_box02 > li { flex-basis: 49%; padding-right: 15px; padding-left: 15px;}
.input_box > li p:first-child, .user_info_box > li p:first-child { font-size: 15px; font-weight: 400;}
.user_info_box > li p:last-child { font-size:14px; font-weight: 400;}
/* .coin_choice img { transition: 500ms ease;} */
.user_cimg {width:20px; height:20px; position: relative; top: 4px; margin-left:4px;}
/* 회원정보 수정 */
.input_box input, .user_info_box input, .user_info_box select, .user_info_box02 input  { padding: 10px 16px; font-weight: 400; border-radius: 10px; font-family:"NotoSansKR"; border:1px solid var(--line); color:var(--black);}
.pw_change,.pin_change { flex:none; margin-left: 10px;}
.readonly { background-color: #F7F7F8; color: #D0D4D7;}

/*220720 신규 클래스 추가 SJW */
.min_w270 {width: 236px;}
.assets_txt {min-width:150px;}
.user_view { font-size: 14px; font-weight: 400; min-width: 180px; color: #212121; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;word-wrap: break-word;}
.user_txtie { padding-left: 10px;  font-size: 18px;  font-weight: 800;}
.point_view {min-width: 140px; height:41px; color: #212121; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;word-wrap: break-word; display:flex; align-items: center;}
/*small태그 반영(개발시 에러메시지 발생시 간격을 위한 클래스 추가)*/
.user_nview { height:41px; min-width: 180px; color: #212121; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;word-wrap: break-word; display:flex; align-items: center;}
.user_date {font-weight: 700;}

/* SELECT BOX */
.category_select_box{ position: relative; width: 100%; background-color: #ffffff; box-sizing: border-box; font-size: 14px; cursor: pointer; outline: 0px; }
.category_select{ display: flex; justify-content: space-between; padding: 8px 0 5px;  border-radius: 8px; border: 1px solid var(--line);}

.min_ser {min-width:124px;}

.search_box input { font-family: 'NotoSansKR'; font-weight: 500;}
.search_container {  display: flex; justify-content: flex-start; align-items: center; width: 385px; }
.search_con {  display: flex; justify-content: flex-start; align-items: center; }
.search_bt {white-space: nowrap;}
.btn_p {padding:6px;}
.search_container .category_select{ height: 40px; }

/* POPUP */
.del_popup, .edit_popup, .pin_popup, .pw_popup { display: none; position:fixed; background-color: rgba(0, 0, 0,0.5); z-index: 2000; width: 100%; height: 100vh;}
.del_popup.active, .edit_popup.active, .pin_popup.active, .pw_popup.active { display: block;}
.del_popup .card, .edit_popup .card, .pin_popup .card, .pw_popup .card { margin: 0; padding:0; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 40px); max-width: 520px; min-width: 350px; height: auto; border: 1px solid var(--line);}
.popup_title { padding: 15px 24px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
.popup_txt { padding: 24px; display: flex; flex-direction: column;}
.popup_txt .user_info_box { flex-direction: column;}
.popup_btn { align-self: flex-end;}
.popup_btn button:last-child { margin-left: 8px;}

/* NOTICE_DETAILS */
.content_title { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 20px; border-bottom: 1px solid var(--line);}
.content_title p:first-child { font-size: 16px; font-weight: 700; }
.content_title p:last-child { font-size: 14px; font-weight: 500; margin-left: 38px; flex: none;}
.content_txt { display: flex; flex-direction: column; }
.content_txt p { font-size: 15px; font-weight: 500; line-height: 24px;}
.content_txt img { width: 50%; margin: 20px 0; }
.input_box textarea { padding: 10px 16px; border: 1px solid var(--line); border-radius: 8px; width: 100%; resize: none; font-family: 'NotoSansKR'; font-weight: 400;}
.input_box textarea::placeholder { font-family: 'NotoSansKR'; font-weight: 500; }
.input_box textarea::-webkit-scrollbar { width: 4px; }
.input_box textarea::-webkit-scrollbar-thumb { background-color: var(--main); }
.input_box textarea::-webkit-scrollbar-track { background-color: var(--line) }


/* COMPLET PAGE */
.comp_txt { padding: 180px 0; text-align: center;}

/* 관리자 계정 추가 : 220720 SJW */
.depoawith_state input[type="radio"]{ display: none;}
.depoawith_state input[type=radio]:checked + span{ background: #FF0000; color:var(--white); border:none;}
.depoawith_state P label span { color:var(--main); border:1px solid var(--main); background: var(--white); border-radius: 20px;
  padding:6px 14px; text-align: center; word-break: break-all; font-weight: 500; cursor: pointer; font-size:14px;}
.admin_i input[type="checkbox"]{ display: none;}
.admin_i input[type=checkbox]:checked + span{ background: #FF0000; color:var(--white); border:1px solid var(--red); }
.admin_i P label span { color:var(--main); border:1px solid var(--main); background: var(--white); border-radius: 20px;
  padding:6px 14px; text-align: center; font-weight: 500; font-size:14px;}
  .acc_info_box > li p:first-child {font-size: 14px;font-weight: 700; min-width:120px; }
.select_input { width: 100px; height: 41px; padding: 8px 16px; border : 1px solid var(--line); border-radius: 8px; background: var(--white);}
.admin_choice {padding:10px 0 0;}
.admin_choice table td {width:49%; border-right:1px solid var(--line);}
.view_list {background:#FF0000; color:var(--white); }
.coin_boxwrap {width:400px;}
.coin_push {min-width:350px;}
.coin_push input {padding: 10px 16px; font-weight: 500; border-radius: 10px; font-family:"NotoSansKR"; border:1px solid var(--line); color:var(--black);}

.coin_push input:read-only { background: #ededed;}
.package_statetable td {border-right:1px solid var(--line);}
.line {width:100%; border:1px solid #efefef; margin:16px 0; }
.point_admin .card {max-width:650px;}
.logo_box {cursor:pointer;}

/* 2022-07-20 JJH */
.notice_view_title{font-weight:bold;}
.notice_view_content img{max-width:40%; margin:10px 0;}
.notice_view_content p {font-weight: 500;}
.admin_authority_grid{display:grid; grid-template-columns:repeat(5, 1fr); grid-row-gap:20px; grid-column-gap:20px; margin-bottom:50px;}
.admin_authority_grid .card{padding:20px; margin:0;}
.admin_authority_grid label{display:block; margin-bottom:10px; font-weight:500;}
.main_dashboard_grid{display:grid; grid-template-columns:repeat(3, 1fr); grid-row-gap:20px; grid-column-gap:20px; margin-bottom:50px;}
.main_dashboard_grid .card{padding:20px; margin:0; white-space: nowrap;}
.main_dashboard_grid .card .card_title{text-align:center; border:none;}
.main_dashboard_grid .card .card_desc{text-align:center; font-size:24px; font-weight:bold;}

/* 220725 SJW */
.dash_title {font-size:16px; font-weight: 500;}
.dash_desc {font-size:26px; font-weight: 700; margin-top:10px}
.main_dashboard_grid .dashcard{padding:30px; margin:0; white-space: nowrap; border-radius: 10px; border: 1px solid #E6EBF1; background: var(--white); display:flex; justify-content: space-between; align-items: flex-end; }

.qna_desc {font-size: 14px;font-weight: 500;margin-left: 38px;flex: none;}
.coin_tablewrap table th:nth-child(1) {width:10%;}
.coin_tablewrap table th:nth-child(2) {width:20%;}
.coin_tablewrap table th:nth-child(3) {width:20%;}
.coin_tablewrap table td:nth-child(4) > div {justify-content: center;}

.krw_tablewrap table th:nth-child(1) {width:10%;}
.krw_tablewrap table th:nth-child(2) {width:20%;}
.krw_tablewrap table th:nth-child(3) {width:20%;}
.krw_tablewrap table td:nth-child(3) > div {justify-content: center;}

/*220728 SJW */
.hyper_txt {  color:#1162F8; text-decoration: underline;}
.package_ntfimg {width:120px; height:120px; margin:0 auto;}
.package_ntfimg img {max-width:100%;}
.package_img{width:60px; height:60px;}
.package_img img {max-width:100%;}
.user_info_box3 {display:grid; grid-template-columns:repeat(3, 1fr); grid-row-gap:20px; grid-column-gap:140px; height:38px; height:auto;}
.user_info_box3 > li p:first-child {font-size: 15px;font-weight: 400;}
.user_info_box3 > li p:last-child { font-size: 15px; font-weight: 400;}

.inventory_list {padding:10px;}
.inventory_list li { width: calc(50vw - 27.5px); max-width: 200px; border-radius: 8px; overflow: hidden;  box-shadow: 0 1px 4px rgb(21 34 50 / 8%);}

.booster_img {position:relative; width: 100%; background-color: lavender; object-fit: contain;    cursor: pointer;}
.booster_img > img { width: 100%; height: 100%;}
.booster_img > video {display:block; width:100%;}
.booster_txt {padding: 6px; background-color: #fff;  border: 1px solid var(--line);}
.price_amount { padding-top:4px; font-weight: 400;}
.inventory_info {margin-bottom:0; height:214px; padding:20px; border:none; box-shadow: none;}
.section_header a {display:block; padding-right:6px;}
.section_header a img {display:block;}
/* 220905 JJH  재생버튼 추가 관련 클래스 추가 */
.auto_btn { position: absolute; right: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 5px; cursor: pointer; z-index: 50; }

/* NFT */

.nft_table th {width:33%;}
.nftimg_box img{width:150px; height:150px;}
.nft_view_content img {max-width:30%;}
#View_area img { max-width:40%; padding-left:15px;}
.create_img {padding-left:15px; padding-bottom:10px;}
.nft_view_content_more img {max-width:50%; padding-left:15px;}
.nft_wrap {display:flex; justify-content: space-between;}
.nft_input {width:49%; }
.nft_input input { padding: 10px 16px; font-weight: 400; border-radius: 10px; font-family: "NotoSansKR"; border: 1px solid var(--line); color: var(--black);}

/*포인트*/
.point_tab, .keeppoint_tab { display:flex; justify-content: center;}
.point_tab li, .keeppoint_tab li {width:10%; border:1px solid var(--line); border-radius: 10px; text-align: center; padding:10px 0; margin-right:14px; cursor:pointer; font-size: 15px; font-weight: 400;}
.point_tab li:last-child, .keeppoint_tab li:last-child {margin-right:0;}
.point_active, .kpoint_active { background: var(--main); color:var(--white);}
.info_keep {font-size:14px; color:red; padding-left:12px;}


/* 22.09.05 JJH coinlog_detail 코인 거래내역 상세페이지 */
.text_row{display:flex; align-items:center; padding:0 10px;}
.text_row_title{flex:none; display:block; width: 200px; font-size:15px; font-weight:800; color:#6c757e;}
.text_row_content{display:block; font-size:15px; font-weight:500; color:#222;}

.readonlybox {
  padding: 10px 16px;
font-weight: 400;
border-radius: 10px;
font-family: "NotoSansKR";
border: none;
color: var(--black);
background: #ededed;
user-select: none;
}

.gray_col {
  color:#999;
}
.linebar {
  width:100%;
  border:1px solid #e9ecef;
  margin:12px 0;
}

.day_ma {  margin-top:0;}

.search_box input.date_year {width:150px;padding:10px 10px 10px 20px;}

.yearpicker-items:hover {background-color:var(--main) !important; color:#fff !important;}
.yearpicker-items.selected:hover {background-color:var(--main) !important; color:#fff !important;}

.yearpicker-items.selected {color:var(--main) !important;}
.dateyear input::placeholder { color:#212121 !important; font-size:13px;}
.sales_box td, .sales_box th {width:24%;}
.date_year_start {width:100px; padding:10px 10px 10px 32px !important; cursor:pointer;}
.info_bonustxt {min-width:93px; display:inline-block;}
.bonus_info li:nth-child(1) {padding-bottom:6px;}