@charset "utf-8";

/*########## reset ##########*/
*{margin:0; padding:0; box-sizing:border-box;}
html{height:100%; -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family: var(--font-sans); 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; cursor:pointer; font-family: var(--font-sans);}
input,select,textarea{border:none; outline:none; font-family:inherit;}
table{font-variant-numeric:tabular-nums;}
select{appearance:none; -webkit-appearance:none; -moz-appearance:none;}
table {border-spacing:0px; border-collapse:collapse;}

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	box-shadow: 0 0 0 1000px white inset;
}

:root {
    --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  /* color */
  --black : #212121;
  --white : #fff;
  --sub_gray : #455560;
  --red : #b50308;
  --green : #1f893b;
  --blue : #00f;
  --orange : #FF8300;
  --main : #FF646C;
	/* #ffdc00; */
  --sub_bg : #fafafb;
  --button : #ECF2FE;

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

/* font-face */


/* word_break_all */
.word_break_all { word-break: break-all;}

/* ENG */
.eng { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* display */
.display_none{display:none !important;}
.display_block{display:block;}

/* 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_wrap { flex-wrap: wrap; }
.flex_shrink {flex-shrink: 0;}

/* gap */
.gap_5 {gap:5px}
.gap_10{gap:10px;}
.gap_20{gap:20px;}
.gap_30{gap:30px;}

/* color */
.color_black{color:var(--black);}
.color_white{color:var(--white);}
.color_red{color:var(--red);}
.color_green{color:var(--green);}
.color_blue{color:var(--blue);}
/* .color_main{color:var(--main);} */
.color_main{color:var(--blue);}
.color_sub{color:var(--sub_gray);}

/* 강조 텍스트 2022-07-25 : jjh */
.text_red{color:#B50308;}
.text_green{color:#1F893B;}
.text_purple{color:#b503ac;}
.text_blue{color:#1503b5;}
.text_skyblue{color:#03b5b5;}
.text_yellow{color:#e2e605;}
.text_orange{color:#b55f03;}

/* bg */
.bg_black{background-color:var(--black);}
.bg_white{background-color:var(--white);}
.bg_red{background-color:var(--red);}
.bg_green{background-color:var(--green);}
.bg_sub{background-color:var(--sub_bg);}

/* 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_400 { width: 400px; }
.w_500 { width: 500px; }
.w_600 { width: 600px; }

/* 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:0 10px;}
.px20{padding:0 20px;}
.px30{padding:0 30px;}

.py10{padding:10px 0;}
.py20{padding:20px 0;}
.py30{padding:30px 0;}

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

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

/* HEADER */
header { width: 100%; height: 70px; position: fixed; z-index: 1040;}
.logo_box { padding: 15px 24px;  height: 60px;}
.logo_box img { width: 100%; height: 100%; object-fit: contain;}

/* HEADER LEFT ICON */
.top_btn_box {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 70px; background-color: var(--white); border-bottom: 1px solid var(--line);}
.top_left_box { display: flex; align-items: center; }
/* CLICK BAR - 햄버거바 */
.button_container { margin-left: 24px; cursor: pointer; z-index: 100; transition: opacity 0.25s ease; }
.button_container:hover { opacity: 0.7; }
.button_container.active .top, .button_container.active .middle, .button_container.active .bottom  { background-color: var(--sub_gray);}
.button_container span { display: block; background: var(--main); border: none; height: 2px; width: 24px; transition: all 0.35s ease; cursor: pointer; border-radius: 2px;}
.button_container span:nth-of-type(2) { margin-top: 5px; }
.button_container span:nth-of-type(3) { margin-top: 5px; }

/* 햄버거바 비활성화시 X모양으로 변경 */
/*
.button_container.active .top { transform: translateY(7px) translateX(0) rotate(45deg); background: var(--main); }
.button_container.active .middle { opacity: 0; background: #FFF; }
.button_container.active .bottom { transform: translateY(-7px) translateX(0) rotate(-45deg); background: var(--main); }
*/
/* SEARCH BOX */
.top_search { width: 300px;}

/* HEADER RIGHT ICON */
.top_right_box { display: flex; align-items: center; margin-right: 30px;}
.alarm { position: relative; width: 31px; margin-right: 20px;}
.alarm img { width:24px; height: 24px;}
.alarm span { position: absolute; right: 0px; top: -7px; display: block; width: 20px; height: 20px; background-color: #F0142F; color: var(--white); border-radius: 50%; text-align: center; line-height: 20px; font-size: 14px; font-weight: 400;}
.global { margin-right: 20px;}

/* HEADER PROFILE  */
.border_bottom_line { border-bottom : 1px solid var(--line); }
.profile { position: relative; cursor: pointer; }
.profile > img { border-radius: 50%; width:44px; height:44px; object-fit: cover; }
.profile ul { position: absolute; right: -0; top: 50px; width: 170px; height: auto; background-color:#313537; text-align: center; border-radius: 8px; transition: all 2000ms;}
.profile_box { display: flex; font-size: 14px; font-weight: 500; padding: 10px 20px; color: var(--white); }

/* slider */
#incb { position: fixed; margin-left: 0; min-width: 252px; background-color:#353648; width: 100%; max-width: 252px; height: 100%; transition: all 500ms; margin-top: 70px; z-index: 1040; overflow: auto;}
#incb.active { margin-left: -252px; }
.slider_menu { height: calc(100% - 70px); padding: 12px 10px; overflow-y: auto;}
.slider_menu::-webkit-scrollbar {width: 20px;}
.slider_menu::-webkit-scrollbar-thumb { width:10px; background-color: #acacb9; border-radius:20px; border: 5px solid #47485f;}
.slider_menu::-webkit-scrollbar-track {width:20px; background-color: #47485f;}
.slider_menu li.active { background-color:var(--main); border-radius: 4px; }
.slider_menu li.active p {color:var(--white);}
.slider_menu li div { padding : 12px 14px; margin-bottom: 6px;}
.slider_menu li div img { margin-right: 10px;}
.slider_menu li div p { font-size: 14px; font-weight: 500; color: var(--white);}

/* TOGGLE BTN */
.on-off-toggle { width: 50px; height: 24px; position: relative; display: inline-block; }
.on-off-toggle__slider { width: 50px; 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: 'OFF'; color: #fff; padding-left: 22px; transition: all 500ms; }
.on-off-toggle__input { position: absolute; opacity: 0; }
.on-off-toggle__input:checked + .on-off-toggle__slider { background-color: var(--sub_gray); }
.on-off-toggle__input:checked + .on-off-toggle__slider:before { transform: translateX(26px); }
.on-off-toggle__input:checked + .on-off-toggle__slider:after { content: 'ON'; color: #FFFFFF; padding-left: 8px; }

/* content */
.content{ display: flex; width: 100%; }
.content_inner{ position:relative; margin-top: 70px; width: 100%; max-width:100%; min-height: calc(100vh - 70px); height: auto; padding: 30px 24px 0; transition: all 500ms; overflow-x: hidden; overflow-y: auto;}
.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{ position: absolute; bottom: 0; width:100%;}
.footer_inner{width:100%; margin:auto; padding-left:5px; padding-bottom: 20px;}
.footer_inner p {width: calc(100vh - 40px); width: calc(100svh - 40px);}
.footer_common_layout{padding:0 20px;}

/* btn */
.btn { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700;}
.btn.del { border: 1px solid #F0142F; color: #F0142F; background-color: var(--white);}
.btn.edit { border : 1px solid var(--main); background-color: var(--main); color: var(--white);}
.btn.cancel { border: 1px solid var(--line); color: var(--black); background-color: var(--white);}
.btn.black { border: 1px solid var(--line); color: var(--white); background-color: var(--black);}

/* 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? */

/* card */
.card{ background-color:#fff; margin-bottom: 50px; 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 */

/* media query */

/* pagination */
.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:var(--flame);}
.pagination_item.active a {color:var(--white);}
.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-allow_left.svg) no-repeat center; }
.pagination_prev.active { background: url(../img/svg/ic-allow_left_active.svg) no-repeat center;  }

.pagination_next { background: url(../img/svg/ic-allow_right.svg) no-repeat center;  }
.pagination_next.active { background: url(../img/svg/ic-allow_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;  }


.title_sweet { font-size:20px; color:var(--black); }
.desc_sweet { font-size:15px; color:var(--black); font-weight: 400; }
.swal2-styled { margin:0 !important; }
.swal2-actions:not(.swal2-loading) .swal2-styled:active { background-image: none !important; }
.swal2-styled.swal2-default-outline:focus, .swal2-styled.swal2-cancel:focus { box-shadow: none !important; }
.swal2-actions:not(.swal2-loading) .swal2-styled:hover { background-image: none !important; }
.swal2-actions .swal2-styled.swal2-cancel { margin-right:10px !important; border:1px solid var(--line); }
.swal2-popup {width:400px !important;}
.swal2-styled.swal2-confirm {color:#fff !important; background-color: var(--main) !important; }
/* swal2 모달 최외각으로 꺼내기 */
.swal2-container {
    z-index: 99999 !important;
}

/* 스마트폰 가로 및 소형 테블릿 */
@media all and (min-width:481px) and (max-width:767px){

}

/* 스마트폰 세로 */
@media all and (min-width:320px) and (max-width:480px){

}


/* input */

/* header 미디어쿼리 */
@media all and (max-width:992px) {
  /* header 쪽에 있는 search input 숨김 */
  /* .search_box input { display: none;}
  .search_box img { position: absolute; top: 50%; left: 50%; cursor: pointer; transform: translate(-50%, -50%); } */
  .top_btn_box { position: relative;}
  .top_left_box { display: block;}
  .logo_box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
  /* .search_box { display: none;} */
  .alarm { display: none;}
  .global { display: none; }

  .content { display: block; }
  #incb{ position: fixed; height: 100%; z-index: 1030;}
  .content_inner { position: absolute; margin-left: 0px; height: auto; min-height: calc(100% - 70px);}
}
th .hint {
  color: #888;
  font-weight: normal;
  font-size: 12px;
}