@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 : #1749C2;
  --orange : #FF8300;
  --main : #1749C2;
  --sub_bg : #fafafb;
  --button : #ECF2FE;

  /* border */
  --line : #E6EBF1;

  /* label-input-button */
  --label-button-size : 70px;
  --label-button-gap : 10px;
  --label-button-total : 80px;
}

/* font-face */
@font-face {font-family:"NotoSansKR"; src:url("./fonts/NotoSansKR-Thin.otf") format("opentype"); font-weight:100; font-style:normal;}
@font-face {font-family:"NotoSansKR"; src:url("./fonts/NotoSansKR-Light.otf") format("opentype"); font-weight:300; font-style:normal;}
@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-Light.ttf") format("opentype"); font-weight:300; 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 ####################*/

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

/* logo */
.logo_text{font-size:28px; font-weight:500; color:var(--black); text-align:center; margin-bottom:20px; font-family:"Poppins";}
.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);}

/* 버튼 색상 별 구분*/
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: #F0142F; background-color: var(--white);}
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 {background: #d3d3d3;border:none;color:#666; cursor:inherit;}

/* 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, .input_design{width:100%; padding:10px 16px; font-weight:500; border-radius:10px; border:1px solid var(--line); height:40px;}
.label input::placeholder, .input_design::placeholder{font-size:14px; font-weight:500; color:#D0D4D7;}
.label input[readonly]{background-color:#ccc; 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);}

.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 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_button.horizontal{flex-wrap:nowrap;}
.label_button.horizontal{display:flex; align-items:center;}
.label_button.horizontal .text{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;}


/* 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:200px; 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 20px; 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_double_next,.pagination_double_prev,.pagination_prev,.pagination_next{ border: 1px solid var(--line); }
.pagination_item a { display: block; width: 100%; height:100%; line-height:24px; text-align: center;}
.pagination_item.active{background-color:#1749C2;}
.pagination_item.active a {color:#fff;}
.pagination_border.acitve span { background-color: var(--main);}
.pagination_border span img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.pagination_double_prev { background: url(../img/svg/icon_arrow_left_double.svg) no-repeat center; }
.pagination_double_next a, .pagination_next a, .pagination_prev a, .pagination_double_prev a { display: block; width: 100%; height:100%; line-height:24px; text-align: center; }
.pagination_double_prev.active { background: url(../img/svg/icon_arrow_left_double_active.svg) no-repeat center;  }

.pagination_prev { background: url(../img/svg/ic-arrow_left.svg) no-repeat center; }
.pagination_prev.active { background: url(../img/svg/ic-arrow_left_active.svg) no-repeat center;  }

.pagination_next { background: url(../img/svg/ic-arrow_right.svg) no-repeat center;  }
.pagination_next.active { background: url(../img/svg/ic-arrow_right_active.svg) no-repeat center;  }

.pagination_double_next { background: url(../img/svg/icon_arrow_right_double.svg) no-repeat center;  }
.pagination_double_next.active { background: url(../img/svg/icon_arrow_right_double_active.svg) no-repeat center;  }

/* 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:76px; display:flex; justify-content:space-between; align-items:center;}
.w_checkbox {margin-right:8px;}


/* 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_title { padding: 15px 24px; font-size: 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
.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;}

/* 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;}




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

/* flex */
.flex{display:flex; align-items:center;}
.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);}
.color_blue{color:var(--blue);}
.color_main{color:var(--main) !important;}
.color_sub{color:var(--sub_gray);}

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);}

/* 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;}

/* 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;}
.light{font-weight:300;}
.regular{font-weight:400;}
.medium{font-weight:500;}
.semi_bold{font-weight:600;}
.bold{font-weight:700;}

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

/* width */
.w_33{width:33%;}
.w_50{width:50%;}
.w_100{width:100%;}
.w_200 {width:200px;}
.w_300 {width:300px;}
.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;}
.mb6 {margin-bottom:6px;}
.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 {background-color: #1E2329;color: var(--white); min-width: 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%; min-height:100%; }
.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;}

/* loading? */

/* 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;}

/* 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: 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;}

.ellipsis_200 { max-width:200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swal2-styled.swal2-default-outline:focus, .swal2-styled.swal2-cancel:focus {box-shadow:none;}
.swal2-actions:not(.swal2-loading) .swal2-styled:active, .swal2-actions:not(.swal2-loading) .swal2-styled:hover {background-image:none;}

.swal2-title, .swal2-popup {padding:0 !important;}
.swal2-popup {width:  calc(100% - 40px) !important;max-width: 520px !important;min-width: 350px !important;}
.title_sweet {font-size:16px; border-bottom:1px solid var(--line);  padding:15px 24px; font-weight: 700;}
.desc_sweet {font-weight: 700; font-size:20px; color:var(--black);}
.desc_sweet_500 {font-weight:500; font-size:20px; color:var(--black);}
.swal2-styled.swal2-cancel {font-size:14px !important; border: 1px solid var(--line) !important; color: var(--black) !important; background-color: var(--white) !important;}
.swal2-actions:not(.swal2-loading) .swal2-styled:hover, .swal2-actions:not(.swal2-loading) .swal2-styled:active {background-image:none !important;}
.swal2-styled.swal2-confirm {font-size:14px !important;}
.swal2-styled.swal2-default-outline:focus {box-shadow: none !important;}

.swal2-actions {margin:12px 0 20px !important; }
.swal2-file:focus, .swal2-input:focus, .swal2-textarea:focus {box-shadow:none !important; border:1px solid var(--line) !important;}
.swal2-file, .swal2-input, .swal2-textarea {height:40px;border:1px solid var(--line) !important; box-shadow: none!important;}