@charset "utf-8";
/*#################### RESET ####################*/
* { margin: 0; padding: 0; box-sizing: border-box; font-family: "NotoSansKR"; }
html { height: 100%; font-style: normal; color: var(--black); }
body { height: 100%; background-color: #F4F7FC; }
li { list-style: none; }
a:visited, a:link { text-decoration: none; color: var(--black); }
button { border: none; outline: none; cursor: pointer; }
input, select, textarea { border: none; outline: none; }
table { border-spacing: 0px; border-collapse: collapse; }
body.hidden { overflow: hidden; }

:root { /* color */
 --black: #1A3353;
 --white: #fff;
 --sub_gray: #455560;
 --red: #b50308;
 --green: #1f893b;
 --blue: #1162F8;
 --main: #ff8300;
 --sub_bg: #fafafb;
 --button: #ECF2FE;
 --line : #E6EBF1;

 --label-button-gap : 20px;
}
/* font-face */
@font-face { font-family: "NotoSansKR"; src: url("./fonts/NotoSansKR-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; }
@font-face { font-family: "NotoSansKR"; src: url("./fonts/NotoSansKR-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; }
@font-face { font-family: "NotoSansKR"; src: url("./fonts/NotoSansKR-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Regular.ttf") format("opentype"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Medium.ttf") format("opentype"); font-weight: 500; font-style: normal; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-SemiBold.ttf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Bold.ttf") format("opentype"); font-weight: 700; font-style: normal; }
.eng { font-family: "Poppins"; }


/*#################### COMPONENTS ####################*/

.gnb_logo{width:148px; margin-bottom:20px;}
.gnb_logo img{display:block; width:100%;}
.service_direct_link{display:block; padding:10px; text-align:center; border-radius:8px; background-color:#fff; font-size:14px; font-weight:500; color:#000; box-shadow:inset -1px -1px 2px rgb(0 0 0 / 40%), inset 1px 1px 2px rgb(0 0 0 / 40%); transition:background 0.3s;}
.service_direct_link:hover{background-color:#f0f0f0;}

/* wrap */
.wrap { position: relative; top: 0; height: 100%; }
.wrap_full { height: 100%}



/* logo */
.logo_text { font-size: 24px; font-weight: 500; color: var(--main); text-align: center; margin-bottom: 20px; }
.logo_text span { font-family: "Poppins"; }

/* login */
.login_guide_text { font-size: 16px; font-weight: 700; margin-bottom: 30px; text-align: center; }
.otp_qr { width: 100%; max-width: 100px; margin: 0 auto 30px; }
.otp_qr img { width: 100%; }

/* view */
.coin_register_view { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; }
.coin_register_preview { width: 100%; }
.coin_register_preview .guide { font-size: 14px; font-weight: 500; text-align: center; margin-bottom: 6px; }
.coin_register_preview .img { width: 278px; height: 278px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; margin: 0 auto; }
.coin_register_preview .img img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.banner_preview_box { width: 325px; height: 140px; padding: 16px 19px; border: 1px solid #ccc; border-radius: 10px; margin: auto; display: flex; align-items: center; }
.banner_preview_box .img { flex: none; width: 110px; height: 108px; margin-right: 10px; border: 1px dashed #ccc; border-radius: 10px; overflow: hidden; }
.banner_preview_box .img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.banner_preview_box .text { height: 108px; display: flex; flex-direction: column; justify-content: space-between; }
.banner_preview_box .text .title { font-size: 14px; font-weight: 500; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.banner_preview_box .text .date { font-size: 14px; font-weight: 500; }
.banner_preview_box.only_img { padding: 0; }
.banner_preview_box.only_img .img { border: none; margin-right: 0; width: 100%; height: 100%; }
.banner_preview_box.only_img .text { display: none}
.banner_type_tab { width: 325px; border-radius: 40px; background-color: #fafbfa; margin: 30px auto; padding: 10px; display: flex; }
.banner_type_tab li { width: 100%; padding: 8px 16px; text-align: center; font-size: 14px; font-weight: 700; cursor: pointer; }
.banner_type_tab .active { background-color: var(--main); color: #fff; border-radius: 30px; }

/* btn */
.button_box { display: flex; }

/* 버튼 기능별 구분 */
button.btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; }
button.del { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid #F0142F; color: #F0142F; background-color: var(--white); }
button.edit { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--main); background-color: var(--main); color: var(--white); }
button.stop { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--red); background-color: var(--red); color: var(--white); }
button.cancel { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--line); color: var(--black); background-color: var(--white); }
button.logout { padding: 4px 8px; border-radius: 12px; background-color: #fff; font-size: 14px; font-weight: 500; color: #333; }
button.otp { border: none; background-color: #fff; text-decoration: underline; text-underline-offset: 6px; color: var(--main); }

.change_password_button{border:none; background-color:#ff8000; color:#fff; box-shadow:inset -2px -2px 4px rgb(0 0 0 / 30%), inset 2px 2px 4px rgb(0 0 0 / 30%); font-size:12px; font-weight:500; cursor:pointer; transition:background 0.3s;}
.change_password_button:hover{background-color:#e17202;}
.logout_button{border:none; background-color:#f0f0f0; color:#999; box-shadow:inset -2px -2px 4px rgb(0 0 0 / 30%), inset 2px 2px 4px rgb(0 0 0 / 30%); font-size:12px; font-weight:500; cursor:pointer; transition:background 0.3s;}
.logout_button:hover{background-color:#d7d6d6;}


/* 버튼 색상 별 구분*/
button.main { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--main); background-color: var(--main); color: var(--white); }
button.red { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid #F0142F; color: #fff; background-color:#f0142f; }
button.gray { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--line); color: #fff; background-color: #999; }
button.green { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--line); color: var(--white); background-color: var(--green); }
button.black { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid #333; color: #fff; background-color: #333; }
button.small { padding: 6px 12px; }
button:disabled {padding: 10px 20px; border:1px solid #d3d3d3; border-radius: 8px; font-size: 14px; font-weight: 700; background: #d3d3d3; color: #666; cursor: inherit; }

button.red:disabled {background-color:#f0142f; color:#fff;}

/* 버튼 사이즈 별 구분 */
button[type="button"].small{font-size:10px; padding:5px 10px; border-radius:8px;}
button[type="button"].regular{font-size:12px; padding:6px 12px; border-radius:8px;}
button[type="button"].medium{font-size:14px; padding:7px 14px; border-radius:8px;}

/* label */

.label { display: block; }
.label .text { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label .desc { display: block; font-size: 14px; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; color: #1A3353; height: 40px; }
.label .help { display: block; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label input, .design_input { width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); height: 40px; }
.label input::placeholder{font-size: 14px; font-weight: 500; color: #D0D4D7; }


.label input[readonly], .readonlybox { background-color: #ededed; font-size: 14px; font-weight: 400; border: none; }
.label input[readonly].readonly { border: 1px solid var(--line); background-color: #fff; border-radius: 6px; font-size: 14px; font-weight: 500; }
.label.horizontal { display: flex; align-items: center; }
.label.horizontal .text { flex: none; margin-bottom: 0px; margin-right: var(--label-button-gap); min-width:130px; }
.label_toggle { display: block; position: relative; }
.label_toggle .text { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label_toggle .desc { display: block; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; }
.label_toggle .help { display: block; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label_toggle input { width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); }
.label_toggle input::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }
.label_toggle img { position: absolute; right: 10px; top: 43px; cursor: pointer; }
.label_button { display: flex; flex-wrap: wrap; position: relative; }
.label_button .text { display: block; width: 100%; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label_button .desc { display: block; width: 100%; font-size: 14px; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; height: 40px; }
.label_button .help { display: block; width: 100%; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label_button input { width: calc(100% - var(--label-button-total)); padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); height: 40px; }
.label_button input::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }
.label_button input[readonly] { background-color: #ccc; font-weight: 500; border: none; }
.label_button input[readonly].readonly { border: 1px solid var(--line); background-color: #fff; border-radius: 10px; font-weight: 500; }
.label_button .button { width: var(--label-button-size); padding: 10px 20px; margin-left: var(--label-button-gap); border-radius:8px; border: none; font-size:14px; font-weight:700; text-align: center; background-color: var(--main); color: #fff; cursor: pointer; }
.label_button.horizontal { flex-wrap: nowrap; }
.label_button.horizontal { display: flex; align-items: center; }
.label_button.horizontal .text {min-width:130px; flex: none; width: auto; margin-bottom: 0px; margin-right: var(--label-button-gap); }
.label_button .button { flex: none; }
.label_toggle_button { display: flex; flex-wrap: wrap; position: relative; }
.label_toggle_button .text { flex: none; display: block; width: 100%; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label_toggle_button .desc { display: block; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; }
.label_toggle_button .help { flex: none; display: block; width: 100%; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label_toggle_button input { width: calc(100% - var(--label-button-total)); padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); font-size: 16px; font-weight: 500; }
.label_toggle_button input::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }
.label_toggle_button .button { width: var(--label-button-size); padding: 10px 16px; margin-left: var(--label-button-gap); border-radius: 10px; border: none; text-align: center; background-color: var(--main); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.label_toggle_button img { position: absolute; right: calc(var(--label-button-total) + 10px); top: 43px; cursor: pointer; }
.label_select { display: block; }
.label_select .text { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label_select .desc { display: block; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; }
.label_select .help { display: block; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label_select select { width: 100%; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; }
.label_select.horizontal { display: flex; align-items: center; }
.label_select.horizontal .text { flex: none; margin-bottom: 0px; margin-right: var(--label-button-gap); }
.label_textarea { display: block; }
.label_textarea .text { display: block; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.label_textarea .desc { display: block; width: 100%; padding: 10px 16px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); background-color: #fff; }
.label_textarea .help { display: block; font-size: 12px; font-weight: 500; margin-top: 4px; }
.label_textarea textarea, .textarea_disign { resize: none; padding: 10px 16px; width: 100%; min-height: 200px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); }
.label_textarea textarea::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }
.label_checkbox { display: flex; align-items: center; }
.label_checkbox .text { font-size: 14px; font-weight: 700; margin-left: 10px; }
.label_checkbox input { -webkit-appearance: none; position: relative; width: 24px; height: 24px; cursor: pointer; outline: none; border: 1px solid var(--border); border-radius: 4px; }
.label_checkbox input::before { background-image: url("../img/svg/icon_chk.svg"); width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.label_checkbox input:checked { background-color: var(--main); border: none; }
.label_checkbox_inline { display: inline-flex; align-items: center; }
.label_checkbox_inline .text { font-size: 14px; font-weight: 700; margin-left: 10px; }
.label_checkbox_inline input { -webkit-appearance: none; position: relative; width: 24px; height: 24px; cursor: pointer; outline: none; border: 1px solid var(--border); border-radius: 4px; }
.label_checkbox_inline input::before { background-image: url("../img/svg/icon_chk.svg"); width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.label_checkbox_inline input:checked { background-color: var(--main); border: none; }

/*###################### 기존 인풋박스 구조 입니다. ######################*/

/* tab_box */
.tab_box{display:flex; padding-left:12px; gap:4px; margin-bottom:1px; }
.tab_box button{border-radius:0; border-top-left-radius:10px; border-top-right-radius:10px; padding:8px 16px;}
.tab_box button.edit{box-shadow:inset 1px 2px 8px rgb(0 0 0 / 10%), inset -1px -2px 7px rgb(0 0 0 / 20%);}

/* input_box */
.input_box { width: 100%; }
.input_box .label { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.input_box .outer { display: flex; align-items: center; width: 100%; }
.input_box .text { padding: 10px 16px; font-size: 14px; font-weight: 700; border: 1px solid var(--line); border-radius: 10px; }
.input_box input[type="radio"] { width: auto; }
.input_box .outer .inner { width: 100%; position: relative; display: flex; align-items: center; }
.input_box .outer .inner input { padding: 10px 16px; width: 100%; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); }
.input_box .outer .inner input::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }
.input_box .outer .inner img { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.input_box .outer button { flex: none; margin-left: 10px; }
.input_box .outer .inner.head input { padding-left: 80px; }
.input_box .outer .inner.head:before { content: "₩1,000"; display: block; padding: 4px 8px; border-radius: 8px; font-size: 14px; font-weight: 700; background-color: var(--line); color: #999; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
.input_box .outer .inner.tail input { padding-right: 80px; }
.input_box .outer .inner.tail:after { content: var(--tail); display: block; padding: 4px 8px; border-radius: 8px; font-size: 14px; font-weight: 700; background-color: var(--sub_gray); color: #fff; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
/* input_box horizontal */
.input_box.horizontal { display: flex; align-items: center; }
.input_box.horizontal .label { margin-bottom: 0px; margin-right: 20px; flex: none; width: 70px; }
/* input_box fit */
.input_box.fit .outer .inner { width: auto; }
/* radio_box */
.radio_box { width: 100%; }
.radio_box .label { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.radio_box.horizontal { display: flex; align-items: center; }
.radio_box.horizontal .label { margin-bottom: 0px; margin-right: 20px; flex: none; }
.radio_box .inner { display: flex; font-size: 14px; font-weight: 400; }
.radio_box .inner label { display: flex; align-items: center; margin-right: 10px; }
.radio_box .inner label:last-child { margin-right: 0px; }
.radio_box .inner input { margin-right: 4px; }

/* input_file_box */
.input_file_box { width: 100%; margin-bottom: 20px; }
.input_file_box .label { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.input_file_box .outer { display: flex; width: 100%; }
.input_file_box .outer .head { flex: none; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; background-color: var(--sub_gray); color: #fff; margin-right: 10px; }
.input_file_box .outer .inner { width: 100%; position: relative; }
.input_file_box .outer .inner .file { padding: 10px 16px; width: 100%; height: 42px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: #D0D4D7; }
.input_file_box .outer .inner .file.active { color: #000; }
.input_file_box .outer .inner input { display: none; }
.input_file_box .outer button { flex: none; margin-left: 10px; }

/* input_date_box */
.input_date_box { display: inline-flex; align-items: center; }
.input_date_box input { padding: 10px 16px; width: 100%; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); }
.input_date_box span { margin: 0 8px; font-weight: 700; }

/* textarea_box */
.textarea_box { width: 100%; }
.textarea_box .label { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.textarea_box textarea { resize: none; padding: 10px 16px; width: 100%; min-height: 150px; font-weight: 500; border-radius: 10px; border: 1px solid var(--line); }
.textarea_box textarea::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }

/* toggleSlideButton */
.toggleSlideButton { position: relative; display: inline-block; width: 60px; height: 30px; padding: 2px; border: 1px solid #f1f1f1; border-radius: 30px; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.03); cursor: pointer; transition: all 0.3s; flex: none; }
.toggleSlideButton:after { content: ""; display: block; width: 24px; height: 24px; border-radius: 24px; background-color: #dadada; transition: all 0.3s; }
.toggleSlideButton:before { content: "OFF"; display: block; font-size: 12px; font-weight: bold; font-style: normal; position: absolute; right: 6px; top: 50%; transform: translate(0, -50%); transition: all 0.3s; }
.toggleSlideButton.active { background-color: #1a73e8; }
.toggleSlideButton.active:before { content: "ON"; transform: translate(-28px, -50%); color: #fff; }
.toggleSlideButton.active:after { background-color: #fff; transform: translateX(30px); }
.toggleSlideButton input[type="checkbox"] { display: none; }
.toggleSlideButton_guide { position: relative; display: inline-block; width: 60px; height: 30px; padding: 2px; border: 1px solid #f1f1f1; border-radius: 30px; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.03); cursor: pointer; transition: all 0.3s; flex: none; }
.toggleSlideButton_guide:after { content: ""; display: block; width: 24px; height: 24px; border-radius: 24px; background-color: #dadada; transition: all 0.3s; }
.toggleSlideButton_guide:before { content: ""; display: block; font-size: 12px; font-weight: bold; font-style: normal; position: absolute; right: 6px; top: 50%; transform: translate(0, -50%); transition: all 0.3s; }
.toggleSlideButton_guide.active { background-color: #1a73e8; }
.toggleSlideButton_guide.active:before { content: ""; transform: translate(-28px, -50%); color: #fff; }
.toggleSlideButton_guide.active:after { background-color: #fff; transform: translateX(30px); }
.toggleSlideButton_guide input[type="checkbox"] { display: none; }

/* input */
input.search { padding: 8px 16px; height: 42px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-weight: 500; }
input.search::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }
input.search:focus { border-color: var(--main); }
input.search_account { min-width: 300px; }

/* select */
select.basic { padding: 10px 16px; border: 1px solid #E6EBF1; border-radius: 8px; font-weight: 500; font-family: "NotoSansKR"; height: 42px; }

/* // ###################### 기존 인풋박스 구조 입니다. ######################*/

/* breadcrumb */
.breadcrumb { display: flex; padding: 10px 0; margin-bottom: 20px; border-bottom: 1px solid #ccc; }
.breadcrumb li { display: flex; font-weight: 500; }
.breadcrumb li:first-child { font-size: 16px; font-weight: 700; }
.breadcrumb li:first-child:after { content: "-"; display: block; margin: 0 8px; }
.breadcrumb li:after { content: ">"; display: block; margin: 0 8px; }
.breadcrumb li:last-child:after { content: ""; display: none; }
.pagination { display: flex; justify-content: flex-end; align-items: center; width: 100%; }
.pagination li { display: flex; justify-content: center; align-items: center; width: 25px; height: 25px; margin-right: 8px; border-radius: 50%; font-size: 14px; font-weight: 500; cursor: pointer; }
.pagination li:last-child { margin-right: 0; }


.pagination { display: flex; width: fit-content; margin: 0 auto;}
.pagination li { width: 30px; height: 30px; background-color: var(--inactive); min-width: 30px; min-height: 28px; font-size: 14px; border-radius: 5px; margin-right: 4px; display: flex; justify-content: center; align-items: center; font-family: "montserrat";}
.pagination li a { font-weight: 600; display: flex; justify-content: center; align-items: center; width:100%; height:100%; }
.pagination li:first-child, .pagination li:last-child { font-family: 'noto_sans'; width: auto; height: 30px;}
.pagination li:first-child a, .pagination li:last-child a { font-weight: 600; }
.pagination .next a { background: url("../img/svg/ic-arrow_right_active.svg") no-repeat center; width: 24px; height: 24px; border-radius: 50%; border:1px solid var(--line);}
/* .pagination .last a { background: url("../img/svg/icon_arrow_right_double_active.svg") no-repeat center; width: 24px; height: 24px;  border-radius: 50%; border:1px solid var(--line);} */
/* .pagination .first a { background: url("../img/svg/ic-arrow_left_active.svg") no-repeat center; width: 24px; height: 24px;  border-radius: 50%; border:1px solid var(--line);} */
/* .pagination .one a { background: url("../img/svg/icon_arrow_left_double_active.svg") no-repeat center; width: 24px; height: 24px;  border-radius: 50%; border:1px solid var(--line);} */
.pagination .prev a { background: url("../img/svg/ic-arrow_left_active.svg") no-repeat center; width: 24px; height: 24px;  border-radius: 50%; border:1px solid var(--line);}
.pagination .prev.disable a { background: url("../img/svg/ic-arrow_left.svg") no-repeat center;}
.pagination .next.disable a { background: url("../img/svg/ic-arrow_right.svg") no-repeat center;}
.pagination .disable a { color: var(--dark-gray); cursor: context-menu; }
.pagination li.item.active { background-color: #000;}
.pagination li.item.active a {color: var(--white);}


/* coin_inventory */
.coin_inventory { display: flex; flex-wrap: wrap; }
.coin_card { width: 278px; margin-right: 30px; margin-bottom: 30px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }
.coin_card_no_data { width: 100%; height: 290px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 500; color: #999; }
.coin_card_title { padding: 8px 16px; background-color: #f1f1f1; font-size: 16px; font-weight: 700; color: #333; }
.coin_card_img { width: 100px; height: 100px; padding: 10px; border: 1px dashed #ccc; border-radius: 10px; margin: 10px auto; display: flex; justify-content: center; align-items: center; text-align: center; }
.coin_card_img img { width: 100%; height: 100%; object-fit: cover; }
.coin_card_text { padding: 0 20px; margin-bottom: 10px; }
.coin_card_text li { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.coin_card_text li .left { font-size: 14px; font-weight: 500; color: #999; }
.coin_card_text li .right { font-size: 14px; font-weight: 500; color: #333; }

/* auth_card */
.auth_card { border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); }
.auth_card_title { display: flex; justify-content: space-between; padding: 8px 16px; background-color: #f1f1f1; font-size: 16px; font-weight: 700; color: #333; }
.auth_card_title .read { margin-right: 20px; }
.auth_card_content { padding: 8px 16px; }
.auth_card_row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.auth_card_row:last-child { margin-bottom: 0px; }
.auth_card_row label { font-size: 14px; font-weight: 700; }
.auth_card_row label input { margin-right: 10px; }
.box_wrap { width: 50px; display: flex; justify-content: space-between; align-items: center; }

/* popup */
.popup { display: none; position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 2000; width: 100%; height: 100%; }
.popup.active { display: block; }
.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 .card.big { max-width: 70%; }
.popup_close { position: absolute; right: 20px; top: 20px; cursor: pointer; }
.popup_text { padding: 24px; display: flex; flex-direction: column; }
.popup_preview { white-space: pre-line; padding: 24px; display: flex; flex-direction: column; max-height: 500px; overflow: auto; }
.popup_preview::-webkit-scrollbar { width: 6px; }
.popup_preview::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
.popup_preview::-webkit-scrollbar-track { background-color: #fff; }

/* table */
.table_box { overflow-x: auto; }
.table_box::-webkit-scrollbar { display: none; }
.table_box::-webkit-scrollbar-thumb { display: none; }
.table_box::-webkit-scrollbar-track { display: none; }
.table_box table { white-space: nowrap; }
.table_box table tbody tr:hover { background-color: #fafafb; }
.table_box table tbody tr td { position: relative; }
.table_box table tbody tr td a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.table_qna tbody tr { cursor: pointer; }
.table_qna tbody tr td { padding: 20px 10px; }
.table_qna tbody tr .null_data { padding: 20px 10px; }
.table_member table tbody tr { cursor: pointer; }
.table_member table tbody tr td { padding: 0; }
.table_member table tbody tr td a { padding: 20px 10px; }
.table_member table tbody tr .null_data { padding: 20px 10px; }
.table_coin_history table { white-space: normal; }
.table_coin_history tbody tr td { word-break: break-all; }
.table_privacy_policy tbody tr { cursor: pointer; }
.table_privacy_policy tbody tr:first-child td { font-weight: 700; color: #000; }
.table_account tbody tr { cursor: pointer; }
.table_auth tbody tr.selected { background-color: var(--main); }
.table_auth tbody tr.selected td { color: #fff; }
.table_auth thead tr th { border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-top: 1px solid var(--line); background-color: #F1F1F1; }
.table_auth tbody tr td { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.table_box.table_auth table tbody tr.selected:hover { background-color: var(--main); }
.table_account_auth table tbody tr { cursor: pointer; }
.table_member_restriction table tbody tr td { padding: 0; }
.table_member_restriction table tbody tr td a { padding: 20px 10px; }
.table_member_restriction table tbody tr .null_data { padding: 20px 10px; }
.table_banner tbody tr td:nth-child(2) img { width: 150px; height: 150px; object-fit: contain; }
.table_banner tbody tr td:nth-child(5) label { display: block; margin-bottom: 6px; }
.table_operational tbody tr { cursor: pointer; }
.table_operational tbody tr td:nth-child(8) img { width: 150px; height: 150px; object-fit: contain; object-position: center; border: 1px solid #efefef; }

/* .table_operational tbody tr:not(:first-child) td:nth-child(4) { text-align:left; } */

.table_operational_view_table tbody tr td img { width: 200px; height: 200px; object-fit: contain; object-position: center; border: 1px solid #efefef; }
tr { border-bottom: 1px solid var(--line); }
/* hr */
hr { border: none; border-top: 1px solid #efefef; }

/* theme */
.theme_gray .label { color: #999; font-weight: 500; }
.theme_gray .text { color: #999; font-weight: 500; }

/*#################### ATOMIC CSS ####################*/

/* display */
.d_none { display: none; }
.d_block { display: block; }
.d_grid { display: grid; }
.display_none { display: none !important; }
.display_block { display: block; }
.grid_2 { grid-template-columns: repeat(2, 1fr); }
.grid_3 { grid-template-columns: repeat(3, 1fr); }
.grid_4 { grid-template-columns: repeat(4, 1fr); }
.grid_5 { grid-template-columns: repeat(5, 1fr); }
.grid_6 { grid-template-columns: repeat(6, 1fr); }
.grid_7 { grid-template-columns: repeat(7, 1fr); }
.grid_8 { grid-template-columns: repeat(8, 1fr); }
.grid_gap_10 { grid-gap: 10px; }
.grid_gap_20 { grid-gap: 20px; }
.grid_gap_30 { grid-gap: 30px; }
.grid_gap_40 { grid-gap: 40px; }
.grid_col_1 { grid-column: span 1; }
.grid_col_2 { grid-column: span 2; }
.grid_col_3 { grid-column: span 3; }
.grid_col_4 { grid-column: span 4; }
.grid_col_5 { grid-column: span 5; }
.grid_col_6 { grid-column: span 6; }

.gap10{gap:10px;}
.gap20{gap:20px;}
.gap30{gap:30px;}

/* position */
.position_center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* flex */
.flex { display: flex; align-items: center; }
.flex_na { display: flex; }
.flex_center { display: flex; justify-content: center; align-items: center; }
.flex_between { display: flex; justify-content: space-between; align-items: center; }
.flex_around { display: flex; justify-content: space-around; align-items: center; }
.flex_evenly { display: flex; justify-content: space-evenly; align-items: center; }
.flex_start { display: flex; justify-content: flex-start; align-items: center; }
.flex_end { display: flex; justify-content: flex-end; align-items: center; }
.flex_none { flex: none; }
.flex_col { display: flex; flex-direction: column; }

/* color */
.color_black { color: var(--black); }
.color_white { color: var(--white); }
.color_gray { color: #999; }
.color_red { color: var(--red) !important; }
.color_green { color: var(--green) !important; }
.color_blue { color: var(--blue) !important; }
.color_main { color: var(--main) !important; }
.color_sub { color: var(--sub_gray); }
.color_link {color:blue;}
a.color_black { color: var(--black); }
a.color_white { color: var(--white); }
a.color_gray { color: #999; }
a.color_red { color: var(--red); }
a.color_green { color: var(--green); }
a.color_blue { color: var(--blue); }
a.color_main { color: var(--main); }
a.color_sub { color: var(--sub_gray); }
a.color_link { color:blue; }
/* bg */
.bg_black { background-color: var(--black); }
.bg_white { background-color: var(--white); }
.bg_red { background-color: rgba(255, 0, 0, 0.1); }
.bg_gray { background-color: rgba(0, 0, 0, 0.1); }
.bg_green { background-color: var(--green); }
.bg_sub { background-color: var(--sub_bg); }

/* text-decoration */
.line_through { text-decoration: line-through}

/* pointer */
.pointer { cursor: pointer; }
.cursor_pointer { cursor: pointer; }
.cursor{cursor: pointer;}

/* font-size */
.font_10 { font-size: 10px; }
.font_11 { font-size: 11px; }
.font_12 { font-size: 12px; }
.font_13 { font-size: 13px; }
.font_14 { font-size: 14px; }
.font_15 { font-size: 15px; }
.font_16 { font-size: 16px; }
.font_17 { font-size: 17px; }
.font_18 { font-size: 18px; }
.font_19 { font-size: 19px; }
.font_20 { font-size: 20px; }
.font_24 { font-size: 24px; }
.font_26 { font-size: 26px; }
/* font-weight */

.thin { font-weight: 100 !important; }
.light { font-weight: 300 !important; }
.regular { font-weight: 400 !important; }
.medium { font-weight: 500 !important; }
.semi_bold { font-weight: 600 !important; }
.bold { font-weight: 700 !important; }

/* text-align */
.text_center { text-align: center; }
.text_left { text-align: left; }
.text_right { text-align: right; }
.underline{text-decoration:underline;}

/* width */
.w_15 { width: 15%; }
.w_25 { width: 25%; }
.w_33 { width: 33%; }
.w_50 { width: 50%; }
.w_100 { width: 100%; }
.w_200 { width: 200px; }
.w_400 { width: 400px; }
.w_600 { width: 600px; }
.mw_230 { min-width: 230px; }

/* height */
.h_100 { min-height: 100%; }

/* margin, padding */
.m0 { margin: 0 !important; }
.m10 { margin: 10px; }
.m20 { margin: 20px; }
.m30 { margin: 30px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mb10 { margin-bottom: 10px}
.mb20 { margin-bottom: 20px}
.mb30 { margin-bottom: 30px}
.mb40 { margin-bottom: 40px}
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.mx10 { margin: 0 10px; }
.mx20 { margin: 0 20px; }
.mx30 { margin: 0 30px; }
.my10 { margin: 10px 0; }
.my20 { margin: 20px 0; }
.my30 { margin: 30px 0; }
.p0 { padding: 0; }
.p10 { padding: 10px; }
.p20 { padding: 20px; }
.p30 { padding: 30px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pb10 { padding-bottom: 10px}
.pb20 { padding-bottom: 20px}
.pb30 { padding-bottom: 30px}
.pb40 { padding-bottom: 40px}
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.px10 { padding-left: 10px; padding-right: 10px; }
.px20 { padding-left: 20px; padding-right: 20px; }
.px30 { padding-left: 30px; padding-right: 30px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.py20 { padding-top: 20px; padding-bottom: 20px; }
.py30 { padding-top: 30px; padding-bottom: 30px; }

/* border-bottom */
.border_bottom { border-bottom: 1px solid var(--line); }

/* ellipsis */
.ellipsis { overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; }
.ellipsis_line2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* overflow */
.white_space { white-space: nowrap; }
/* #incb { position: fixed; margin-left: 0; min-width: 252px; background-color: #313537; width: 100%; max-width: 252px; height: 100%; transition: all 500ms; z-index: 1040; } */

#incb { background-color: #1E2329; color: var(--white); min-width: 252px; }


/* #incb.active { margin-left: -252px; } */
.slider_menu { padding: 12px 10px; background: #313537}
.slider_menu>li.active { overflow: hidden; }
.slider_menu>li>div { padding: 20px 15px; cursor: pointer; }
.slider_menu>li.active>div { background-color: var(--main); border-top-left-radius: 4px; border-top-right-radius: 4px; }
.slider_menu>li>div>img { transform: rotate(0deg); transition: all 500ms; }
.slider_menu>li.active>div>img { transform: rotate(-180deg); }
.slider_menu>li>div>div>img { margin-right: 10px; }
.slider_menu>li>div>div>p { font-size: 14px; font-weight: 500; color: var(--white); }
.slider_menu>li>ul { display: none; padding: 10px; background-color: var(--sub_bg); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.slider_menu>li>ul>li { display: block; padding: 5px; font-size: 14px; font-weight: 500; border-radius: 4px; }
.slider_menu>li>ul>li.active { display: block; padding: 5px; background-color: var(--main); border-radius: 4px; }
.slider_menu>li>ul>li>a { display: block; width: 100%; }
.slider_menu>li>ul>li.active a { color: white; }
.gnb_logo { display: flex; align-items: center; }
.gnb_logo .text { color: var(--white); font-weight: 500; font-size: 24px; font-family: 'Poppins'}
.gnb_logo .text span { font-family: 'Poppins'}
.gnb_info { display: flex; align-items: center; }
.gnb_info .pill { padding: 4px 8px; border: 1px solid #fff; border-radius: 12px; color: #fff; font-size: 12px; margin-right: 10px; }
.gnb_info .text { font-size: 14px; font-weight: 700; color: #fff; }
a.go_to_service { width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 14px; font-weight: 700; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }



/* content */
/* .content { display: flex; width: 100%; height:100%; } */
.content { display: flex; width: 100%; min-height: 100%; }

/* .content_inner { position:relative; margin-left: 252px; margin-top:0; width: 100%; max-width:100%; min-height: calc(100vh - 10px); height: auto; padding: 30px 24px 0; transition: all 500ms; overflow-x: hidden; overflow-y: auto; } */
.content_inner { width: 100%; min-width: 1200px; height: auto; position: relative; padding: 30px 24px 20px; overflow-x: hidden; overflow-y: auto; background: #FAFAFB; }
.content_inner.active { margin-left: 0px; }
.content_table { display: table; height: 100%; }
.content_table_row { display: table-row; }
.content_table_full { height: 100%; }
.content_table_cell { display: table-cell; vertical-align: middle; }

/* footer */
.footer_inner { width: 100%; margin: auto; }
.footer_common_layout { padding: 0 20px; }
.footer { position: absolute; bottom: 10px; }



/* input */
.search_box { margin-left: 19px; position: relative; }
.search_box img { position: absolute; top: 10px; left: 14px; cursor: pointer; }
.search_box input { padding: 10px 10px 10px 38px; min-height: 40px; border-radius: 8px; border: 1px solid var(--line); }
.search_box input::placeholder { font-size: 14px; font-weight: 500; color: #D0D4D7; }


/* TOGGLE BTN */
.on-off-toggle { width: 56px; height: 24px; position: relative; display: inline-block; }
.on-off-toggle__slider { width: 56px; height: 24px; display: block; border-radius: 34px; background-color: var(--main); transition: background-color 500ms; }
.on-off-toggle__slider:before { content: ''; display: block; background-color: #fff; bottom: 2px; height: 20px; left: 2px; position: absolute; transition: .4s; width: 20px; z-index: 5; border-radius: 100%; }
.on-off-toggle__slider:after { display: block; line-height: 24px; text-transform: uppercase; font-size: 12px; font-weight: bold; content: ''; color: #484848; padding-left: 26px; transition: all 500ms; }
.on-off-toggle__input { position: absolute; opacity: 0; }
.on-off-toggle__input:checked+.on-off-toggle__slider { background-color: #000; }
.on-off-toggle__input:checked+.on-off-toggle__slider:before { transform: translateX(32px); }
.on-off-toggle__input:checked+.on-off-toggle__slider:after { content: ''; color: #FFFFFF; padding-left: 8px; }

/* card */
.card { background-color: #fff; margin-bottom: 30px; border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); border: 1px solid var(--line); }
.card_inner { padding: 20px; }
.card_title { padding-bottom: 10px; margin-bottom: 20px; font-size: 20px; font-weight: 700; border-bottom: 1px solid #ccc; }

/* bottom_tabs */
.bottom_tabs_box { padding-top: 50px; }
.bottom_tabs { width: 100%; height: 50px; display: flex; justify-content: space-between; align-items: center; position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); }

/* keyframes */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.acc_wrapbox input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 24px; height: 24px; cursor: pointer; outline: none; border: 1px solid #d3d3d3; border-radius: 4px; }
.acc_wrapbox input[type="checkbox"]::before { background-image: url("../img/svg/icon_chk.svg"); width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.acc_wrapbox input[type="checkbox"]:checked { background-color: var(--main); border: none; }

/*221014 팝업*/
/* POPUP */
.edit_popup { display: none; position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; width: 100%; height: 100vh; top: 0; left: 0; }
.edit_popup.active { display: block; }
.edit_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: 18px; 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; }

.cursor_view { text-decoration: underline; color: var(--blue) !important; cursor: pointer;}

.swal2-popup {width:400px !important;}

input[type="radio"]{-webkit-appearance:none; width:16px; height:16px; border:2px solid #d3d3d3; border-radius:50%; flex:none;}
input[type="radio"]:checked{-webkit-appearance:none; border:2px solid var(--main); border-radius:50%;}
input[type='radio']:before {content:''; display:block; width:50%; height:50%;margin:25% auto; border-radius:50%;}
input[type='radio']:checked:before {background:var(--main);}

input[type="checkbox"]:disabled {
  cursor:inherit;
}

.textarea_disign.readonly {
  background: #ededed;
  -ms-user-select: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  cursor:inherit;
}

.d_none_ajax {display: none!important; }
.d_block_ajax {display: block!important; }