@charset "utf-8";

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


:root {
  /* colors */
  --white : #fff;
  --black : #1A3353;
  --sub_gray : #455560;
  --red : #b50308;
  --green : #1f893b;
  --blue : #00f;
  --orange : #FF8300;
  --main : #3E79F7;
  --sub_bg : #fafafb;
  --button : #ECF2FE;
  --line : #B1B1B1;
  --darkgray : #a1a1a1;
  --dark : #89949C;

  /* td */
  --td_null_bg: #e5e5e5;
  --td_null_color: #939393;


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


/*#################### 모든 페이지에서 공통으로 사용하는 CSS ####################*/

/* wrap */
.wrap{display:flex; min-height:100%;}
.wrap_login{display:flex; justify-content:center; align-items:center; background-color:#f4f3ef;}

/* content */
.content{display:flex; flex-direction:column; position:relative; width:100%; padding:20px; transition:transform 0.6s;}
/* .content_inner{flex:1; min-width: 1280px; max-width: 100%;} */
.content_inner{flex:1; min-width: 1280px; max-width: 100%;}

/* footer */
.footer{width:100%;}

/* hr */
hr{border:none; border-top:1px solid #efefef;}

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

/* 버튼 기능별 구분 */
button[type="button"]{transition:background-color 0.3s, color 0.3s;}
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.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; height:24px; background-color:#fff;  font-size:12px; font-weight:500; color:#333;}
button.otp{border:none; background-color:#fff; text-decoration:underline; text-underline-offset:6px; color:var(--main);}
button.inactive{padding:10px 20px; border-radius:8px; font-size:14px; font-weight:700; background-color:#ccc; color:#999; cursor:auto;}
button.active{padding:10px 20px; border-radius:8px; font-size:14px; font-weight:700; background-color:var(--main); color:#fff; cursor:pointer;}
button.business_hours_button{background:none; font-size:16px; font-weight:700; color:var(--main);}
button.file_list_button{flex:none;width:120px; height:120px; border-radius:10px; border:1px dashed var(--line); background-color:#fff; font-size:16px; font-weight:700; color:#999; cursor:pointer;}

/* 버튼 색상 별 구분*/
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;}

/* span 버튼 */
span.button{display:inline-block; padding:10px 20px; border-radius:8px; font-size:14px; font-weight:700; background-color:var(--main); color:#fff;}

/* label_box */
.label_box{display:block;}
.label_box .text{display:block; font-size:14px; font-weight:700; margin-bottom:10px;}
.label_box .desc{display:block; font-size:14px; width:100%; font-weight:500; border-radius:10px; background-color:#fff; color:#1A3353;}
.label_box .help{display:block; font-size:12px; font-weight:500; margin-top:4px;}
.label_box small { font-size:12px; font-weight:500;}
.label_box input{width:100%; padding:10px 16px; font-weight:500; border-radius:10px; border:1px solid var(--line);}
.label_box input[type="radio"]{width: max-content; padding:10px 16px; font-weight:500; border-radius:10px; border:1px solid var(--line);}
.label_box input::placeholder{font-size:14px; font-weight:500; color:#D0D4D7;}
.label_box input[readonly]{background-color:#F7F7F8; border:1px solid #E6EBF1; font-size:14px; font-weight:400;}
.label_box input[readonly].readonly{border:1px solid var(--line); background-color:#fff; border-radius:6px; font-size:14px; font-weight:500;}




.label_box.horizontal{display:flex; align-items:center;}
.label_box.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;}
.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);}
.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; position:relative;}
.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_length{position:absolute; right:20px; bottom:20px; font-size:12px; font-weight:500; color:#ccc;}
.label_textarea textarea{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;}

.label_file{display:inline-block;}
.label_file .text{display:block; font-size:14px; font-weight:700; margin-bottom:10px;}
.label_file input[type="file"]{display:none;}
.label_file .file{display:block; width:100%; height:200px; border-radius:10px; border:1px dashed var(--line); cursor:pointer; overflow:hidden; position:relative;}
.label_file .file::after{content:"+"; font-size:20px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#999;}
.label_file .file img{width:100%; height:100%; object-fit:cover;}
.label_file .file.active::after{display:none;}

.label_file .square{display:block; width:120px; height:120px;}
.label_file .square .file{width:100%; height:100%;}

.label_file_list{flex:none; width:120px; height:120px; border:1px dashed var(--line); border-radius:10px; display:flex; justify-content:center; align-items:center; text-align:center; cursor:pointer;}
.label_file_list .text{font-size:16px; font-weight:700; color:#999;}
.label_file_list input{display:none;}



/* // label*/

/* input_box */
.input_box{width:100%;}
.input_box .label{font-size:14px; font-weight:700; margin-bottom:10px;}
.input_box .desc{font-size:14px; font-weight:500;}
.input_box input[type="text"]{padding:10px 16px; width:100%; font-weight:500; border-radius:10px; border:1px solid var(--line);}
.input_box input::placeholder{color:#D0D4D7;}
.input_box input[readonly]{background-color:#F7F7F8; border:1px solid #E6EBF1;}

.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 input:focus{border-color:var(--main);}

.input_box .outer .inner.head input{padding-left:80px;}
.input_box .outer .inner.head:before{content:"1 USD"; 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%);}

.my_info_sales .input_box .label { width:100px; text-align: center;}
.my_info_sales .input_box .text { text-align: center;}
/* input_box horizontal */
.input_box.horizontal{display:flex; align-items:center;}
.input_box.horizontal .label{margin-bottom:0px; margin-right:20px; flex:none; width:80px; text-align: center;}

/* input_box fit */
.input_box.fit .outer .inner{width:auto;}

/* input_box text */
.input_box .text { padding: 10px 16px; font-size: 14px; font-weight: 500; border: 1px solid var(--line); border-radius: 10px; }
.input_box .outer .inner p{padding:10px 16px; width:100%; font-size: 14px; font-weight: 500; border-radius:10px; border:1px solid var(--line);}
/* 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;}

.radio_pill input{display:none;}
.radio_pill span{display:inline-block; padding:8px 16px; border:1px solid #ccc; border-radius:30px; font-size:14px; font-weight:700; cursor:pointer;}
.radio_pill input[type="radio"]:checked + span{background-color:var(--main); color:#fff;}

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

/* file_list_box */
.file_list_box{width:100%;}
.file_list_box .label{font-size:14px; font-weight:700; margin-bottom:10px;}

.file_list_preview{width:100%; display:flex; align-items:center;}
.file_list_preview li{flex:none; display:block; width:120px; height:120px; margin-right:20px; border:1px dashed var(--line); border-radius:10px; position:relative; overflow:hidden;}
.file_list_preview li:last-child{margin-right:0px;}
.file_list_preview li img{width:100%; height:100%; object-fit:cover; object-position:center;}
.file_list_preview li .del{display:flex; justify-content:center; align-items:center; position:absolute; right:6px; top:6px; width:24px; height:24px; border-radius:50%; background-color:#fff; color:#000; cursor:pointer;}
.file_list_preview li .del:after{content:"x"; margin-top:-2px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}


/* file_list_content */
.file_list_content{display:flex; align-items:center; width:400px; padding:10px 0; overflow-x:auto;}
.file_list_content::-webkit-scrollbar {height: 6px;}
.file_list_content::-webkit-scrollbar-thumb {background-color: #D0D4D7; border-radius:10px;}
.file_list_content::-webkit-scrollbar-track {background-color: #fafbfa;}






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


/* 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:9px 16px; border:1px solid #E6EBF1; border-radius:10px; font-weight:500; font-family:"NotoSansKR";}
/* div형*/

/* table */
table { width: 100%;}
tr { border-bottom: 1px solid var(--line);}
th { padding: 10px; font-size: 14px; font-weight: 700; text-align: center;}
td { padding: 10px 10px; font-size: 14px; font-weight: 500; text-align: center;}
.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; color:var(--main);}

.table_franchisee thead tr th.desc a span{font-size:10px; padding-left:10px;}

.table_franchisee tbody tr td .m_amount{text-align:right;}
.table_franchisee tbody tr td .c_amount{text-align:right;}


.table_account_link{max-height:476px; overflow-y:auto; overscroll-behavior: none;}

/* card */
/* .card{ background-color:#fff; border-radius:10px; box-shadow:0 0 2px rgba(0,0,0,0.3); border: 1px solid var(--line); min-width: 1050px; width:max-content;} */
.card{overflow: hidden; background-color:#fff; border-radius:10px; box-shadow:0 0 2px rgba(0,0,0,0.3); border: 1px solid var(--line);}
.card.white1050 { min-width: 1050px; width:max-content; }
.card_login{padding:50px; width:398px;}
.card_title{padding-bottom:10px; margin-bottom:20px; font-size:20px; font-weight:700; border-bottom:1px solid #ccc;}


/* popup */
.popup_bg{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:99999;}
.popup_bg .popup_img_viewer{width:595px; height:842px; padding:64px 20px 20px 20px; background-color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.popup_bg .popup_img_viewer .popup_viewer_close{position:absolute; right:14px; top:14px; background-color:#fff; color:#000; border:none; font-size:20px; font-weight:700;}
.popup_bg .popup_img_viewer img{width:100%; height:100%; object-fit:contain; border:1px dashed #ccc;}

.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 .card.medium{max-width:800px;}
.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;}
/* 23.07.13 추가 KMS */
.popup_textarea {padding: 20px;}
.popup_textarea textarea {padding: 15px; border-radius: 8px; resize: none; width: 100%; min-height: 150px; border: 1px solid var(--line);}
/* .popup_textarea textarea::placeholder {color: black;} */

/* breadcrumb */
.breadcrumb{display:flex; padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid #ccc;}
.breadcrumb li{display:flex; font-weight:500;}
.breadcrumb li:first-child{font-size:16px; font-weight:500;}
.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 */
.pagination{display:flex; width:fit-content; margin:0 auto;}
.pagination li{min-width:30px; min-height:28px; font-size:14px; border:1px solid var(--line); border-radius:15px; margin-right:4px; display:flex; justify-content:center; align-items:center;}

.pagination li.disable {border:1px solid var(--line);}
.pagination li:last-child{margin-right:0px;}
.pagination li a{width:100%; height:100%; padding:4px 8px; font-weight:700; display:flex; justify-content:center; align-items:center;}
.pagination .prev a{background:url(../img/svg/ic-arrow_left_active.svg) no-repeat center;}
.pagination .prev.disable a{background:url(../img/svg/ic-arrow_left.svg) no-repeat center;}
.pagination .next a{background:url(../img/svg/ic-arrow_right_active.svg) no-repeat center;}
.pagination .next.disable a{background:url(../img/svg/ic-arrow_right.svg) no-repeat center;}
.pagination .disable{border-color:#ccc; color:#ccc; cursor:context-menu;}
.pagination .disable a{color:#ccc; cursor:context-menu;}
.pagination .active{background-color:var(--main);}
.pagination .active a{color:#fff;}

/* text_list */
.text_list{width:100%;}
.text_list > li{display:flex; align-items:flex-start; margin-bottom:20px;}
.text_list > li:last-child{margin-bottom:0px;}
.text_list > li .title{ flex:none; margin-right:20px; font-size:14px; font-weight:700; color:var(--black);}
.text_list > li .desc{font-size:14px; font-weight:500; color:var(--black); word-break: break-all;}
.text_list > li .desc.business_registration{width:150px; height:200px; border:1px dashed #ccc; cursor:pointer;}
.text_list > li .desc.business_registration img{width:100%; height:100%; object-fit:cover;}

.text_list.franchisee li .title{width:140px;}
.text_list.franchisee_popup li .title{width:140px;}

/* history_list */
.history_list{width:100%;}
.history_list li{margin-bottom:20px; font-size:14px; font-weight:700; color:var(--black);}
.history_list li:last-child{margin-bottom:0px;}

/* store_list */
.store_list{width:100%; display:flex; align-items:center;}
.store_list li{width:100px; height:100px; border:1px dashed #ccc; margin-right:20px; cursor:pointer;}
.store_list li:last-child{margin-right:0px;}
.store_list li img{width:100%; height:100%; object-fit:cover;}

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


/* .business_hours */
/* 운영관리 내 매장 공지사항 */
.notice_edit_area { width: 100%; height: 140px; padding: 20px; border: 1px solid var(--line); font-family: "noto_sans"; font-size: 14px; font-weight: 400; resize: none; border-radius: 10px; }

.hours_time { border:1px solid var(--line); border-radius: 10px; width:100%; padding:8px; font-size:14px; text-align: center;}
.hours_box { width:49%; position: relative;}
.businessstatus_btn div { width:33%; margin-right:30px; text-align: center; }
.businessstatus_btn div:last-child { margin-right:0; }
.business_hours_wrap { margin:20px; }
.business_hours { border:1px solid var(--line); border-radius: 10px; padding:20px;  position:relative;}
.business_hours_close{position:absolute; right:20px; top:20px; cursor:pointer; z-index:1;}
.hoilday_closeimg { cursor: pointer; margin-bottom:20px; }
.businessstatus_wrap { padding:24px 20px 20px; border-bottom:1px solid var(--line); }
.businessstatus_time { font-size:12px; font-weight: 400; }
.btn_state { outline: none; border:none; background:#fff; border:1px solid var(--line); border-radius: 18px; min-height:35px; font-size:14px; font-weight: 500; width:100%; color:var(--line); word-break: keep-all;}
.businessstatus_active { background:linear-gradient(to right, #2E9DCD , #523B88); color:#fff;}
/* timePicker custom */
.ui-menu-item{ height: 35px !important; display:flex !important; align-items: center !important;}
.ui-menu-item > a { display:block !important; width:100% !important; padding: 7px 0 !important; font-size: 14px !important;}
/* 영업정보 관련 안내문 */
.operation_info { padding: 20px; list-style-type: disc; }
.operation_info > li { font-size: 14px; color: var(--darkgray);}
/* switch initial setting & off style */
.hour_switch { line-height: 0; }
.hour_switch_check { cursor:pointer; position: absolute; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 50px; height: 26px; z-index: 2; margin: 0; }
.switch_label { position: relative; cursor: pointer; display: inline-block; width: 50px; height: 26px; background: var(--line); border-radius: 20px; transition: 0.2s; }
.onf_btn { position: absolute; top: 2px; left: 2px; display: inline-block; width: 22px; height: 22px; border-radius: 20px; background: #ffffff; transition: 0.2s; box-shadow: 0px 0px 5px rgba(0,0,0, 0.16); }
/* switch move & on style */
.hour_switch_check:checked+.switch_label .onf_btn { left: 26px; top: 2px; }
.hour_switch_check:checked+.switch_label { background: linear-gradient(to right, #2E9DCD , #523B88); }

.join_state { display: flex; justify-content: space-around; align-items: center; margin-top:14px; }
.time_rest > p {margin-top:10px; font-size:12px; font-weight: 500;}
.holiday_check { padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* 요일 체크박스 */
.join_obj input[type="checkbox"] {  display: none;}
.join_obj input[type="checkbox"] + span {display: flex; justify-content: center; align-items: center; color: #999; border-radius: 50%; border:1px solid var(--line); cursor: pointer; width:34px; height:34px; font-size:14px; font-weight: 400;}
.join_obj input[type="checkbox"]:checked + span { color: #fff; background: linear-gradient(to right, #2E9DCD , #523B88); border:none;}
.plus_buzi img { display: block; width: 15px; height: 15px;}
.buzi_txt { font-size:14px; color:var(--main); font-weight: 500; margin-left:4px; }

/*#################### // 모든 페이지에서 공통으로 사용하는 CSS ####################*/

/*#################### 해당 페이지에만 사용하는 CSS ####################*/


/*#################### 로그인 페이지 ####################*/
.login_logo { width: 100%; height: 70px;}
.login_logo img { width: 100%; height: 100%; object-fit: contain;}
.login_logo_text{font-size:28px; font-weight:600; font-family:"Poppins"; text-align:center; color:#000;}
/*#################### // 로그인 페이지 ####################*/

/*#################### 슬라이드 부분 ####################*/
#incb {flex:none; position:relative; width:252px; background-color:#313537; transition:all 500ms; z-index:999; white-space: nowrap;}

/* gnb_logo */
.gnb_logo{display:flex; align-items:center;}
.gnb_logo .img{display:inline-block; width:36px; height:36px; margin-right:6px; border-radius:50%; border:1px solid #ccc; padding:4px; background-color:#fff;}
.gnb_logo .img img{display:block; width:100%;}
.gnb_logo .text{color:#fff; font-weight:600; font-size:16px; font-family:'Poppins'}

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

/* go_to_service */
.go_to_service{width:100%; height:60px; border-top:1px solid #fff; border-bottom:1px solid #fff;}
.go_to_service a{display:block; width:100%; height:100%; font-size:14px; font-weight:700; color:#fff; text-align:center; line-height:58px;}

/* slide_menu */
.slider_menu { padding: 12px 10px;}
.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;}

/* slide_toggle_button */
.slide_toggle_button{width:24px; height:48px; border-radius:0 24px 24px 0; font-size:18px; background-color:#313537; color:#fff; font-weight:700; text-indent:-4px; position:absolute; top:400px; right:-24px; cursor:pointer; transition:background-color 0.3s;}
.slide_toggle_button:hover{background-color:var(--main);}
.slide_toggle_button.active{width:24px; height:48px; border-radius:0 24px 24px 0; padding:0; background-color:#313537; color:#fff;}
.slide_toggle_button::after{content:""; background-image:url("../img/svg/ic-arrow_down.svg"); width:100%; height:100%; background-repeat: no-repeat; background-position:center; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%)rotate(90deg);}
.slide_toggle_button.active::after{content: ""; background-image:url("../img/svg/ic-arrow_down.svg"); width:100%; height:100%; background-repeat: no-repeat; background-position:center; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%)rotate(-90deg);}
.wrap.slider_hidden #incb{margin-left:-252px;}
/*#################### // 슬라이드 부분 ####################*/

/*#################### // 해당 페이지에만 사용하는 CSS ####################*/

/*#################### 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 */
.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 */
.p_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;}
.flex_end_end { display: flex; justify-content: flex-end; align-items: flex-end; }
.flex_between_start {display:flex; justify-content:space-between; align-items:flex-start;}
.flex_between_end {display:flex; justify-content:space-between; align-items:flex-end;}
.flex_only_start {display: flex; align-items: flex-start;}
/* color */
.color_black{color:var(--black);}
.color_white{color:var(--white);}
.color_dark_gray{color:#666;}
.color_gray{color:#999;}
.color_red{color:var(--red);}
.color_green{color:var(--green);}
.color_blue{color:var(--blue);}
.color_main{color:var(--main);}
.color_sub{color:var(--sub_gray);}
.color_orange{color:var(--orange);}

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);}
.bg_main{background-color:var(--main);}
.bg_button{background-color:var(--button);}

/* pointer */
.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_30{font-size:30px;}
.font_40{font-size:40px;}
.font_50{font-size:50px;}

/* font-family */
.eng {font-family:"Poppins";}


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



/* height */
.h_auto{height:auto;}
.h_100{height:100%;}
.height_300 {height: 300px;}

/* 카테고리관리 width */
.width_500 { width: 500px; margin:0 auto 20px;}
.width_800 { width: 800px; margin:0 auto 20px;}
.width_700 { width: 700px;}
.width_850 { width: 850px;}
.height_500 { height: 500px; }
.height_120 { min-height: 120px; }
.min_w_500 { min-width:500px; }

/* 대시보드 */
.width_400 { width: 400px;}
.width_300 { width: 300px;}
.width_200 { width: 200px;}
.width_100 { width: 100px;}
/* margin */
.m0 { margin: 0 !important;}
.m10{margin:10px;}
.m20{margin:20px;}
.m30{margin:30px;}
.m30{margin:40px;}
.m30{margin:50px;}

.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}

.mb10{margin-bottom:10px}
.mb20{margin-bottom:20px}
.mb30{margin-bottom:30px}
.mb40{margin-bottom:40px}
.mb50{margin-bottom:50px}

.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr40{margin-right:40px;}
.mr50{margin-right:50px;}

.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}

.mx10{margin-left:10px; margin-right:10px;}
.mx20{margin-left:20px; margin-right:20px;}
.mx30{margin-left:30px; margin-right:30px;}
.mx40{margin-left:40px; margin-right:40px;}
.mx50{margin-left:50px; margin-right:50px;}

.my10{margin-top:10px; margin-bottom:10px;}
.my20{margin-top:20px; margin-bottom:20px;}
.my30{margin-top:30px; margin-bottom:30px;}
.my40{margin-top:40px; margin-bottom:40px;}
.my50{margin-top:50px; margin-bottom:50px;}

/* padding */
.p0 {padding: 0 !important;}
.p10{padding:10px;}
.p20{padding:20px;}
.p30{padding:30px;}
.p40{padding:40px;}
.p50{padding:50px;}

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}

.pb10{padding-bottom:10px}
.pb20{padding-bottom:20px}
.pb30{padding-bottom:30px}
.pb40{padding-bottom:40px}
.pb50{padding-bottom:50px}

.pr10{padding-right:10px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr40{padding-right:40px;}
.pr50{padding-right:50px;}

.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl40{padding-left:40px;}
.pl50{padding-left:50px;}

.px10{padding-left:10px; padding-right:10px;}
.px20{padding-left:20px; padding-right:20px;}
.px30{padding-left:30px; padding-right:30px;}
.px40{padding-left:40px; padding-right:40px;}
.px50{padding-left:50px; padding-right:50px;}

.py10{padding-top:10px; padding-bottom:10px;}
.py20{padding-top:20px; padding-bottom:20px;}
.py30{padding-top:30px; padding-bottom:30px;}
.py40{padding-top:40px; padding-bottom:40px;}
.py50{padding-top:50px; padding-bottom:50px;}

/* ellipsis */
.truncate_1{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;}
.truncate_2{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.truncate_3{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
.truncate_4{overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;}

/* overflow */
.nowrap{white-space:nowrap;}
.cursor_p { cursor:pointer;}

.word_txt {  word-break: break-all;}

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

/* middle_line */
.middle_line { text-decoration: line-through; }
.hidden { overflow: hidden;}
.flex_gap10 { gap: 10px;}
.flex_gap20 { gap: 20px;}
.flex_gap30 { gap: 30px;}

button:disabled {background: #ddd; border:none;  cursor:inherit;}
.not_padding {  padding:0 !important;}

input[type="month"] { position: relative; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/*#################### // ATOMIC CSS ####################*/

/* 관리자 페이지는 반응형 작업을 하지 않습니다. */