@charset "UTF-8";

/*##################### RESET ####################*/
* { margin:0; padding:0; box-sizing:border-box; font-family:"noto"; font-weight: 500;}
html {height:100%;}
body {margin:0; padding:0; height:100%; background-color:var(--bg);}
li {list-style:none;}
a:link,a:visited { text-decoration:none; color:var(--white);}
input,select,textarea,button {outline: none; border:none;}
select { -webkit-appearance:none; -moz-appearance:none; appearance:none; background:url("../img/svg/icon_drop.svg") no-repeat 98% 50%/20px auto; background-size:10px;}
option {color:#212121; font-family: "noto_sans"; font-size:14px; padding:10px 0; background: #fff;}
table {border-spacing:0px; border-collapse:collapse;}
button[type="button"]{cursor:pointer;}
body{-ms-overflow-style:none;/* IE and Edge */ scrollbar-width: none; /* Firefox */}
body::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
img { display: block; }
body.hidden { overflow-y: hidden;}
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	box-shadow: 0 0 0 1000px white inset;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

p, span {color: #fff;}

/*#################### CSS 변수 ####################*/
:root {
	/* color */
  --main : #2F9BCC;
 --inactive: #c8f5fc;
  /* gradient end color : #50418C */
	--gradient:#50418C;
  --sub : #294E88;
  --sidebar:#141638;
  --black : #111111;
  --white : #ffffff;
  --green : #1F893B;
  --blue : #0000ff;
  --yellow : #ffc107;
  --red : #B50308;
  --dark: #08091B;
  --bg: #0a0b20;
  --sub_dark: #10122D;
  --dark_gray : #555555;
  --gray : #B1B1B1;
  --light_gray : #F2F2F2;

  /* border */
  --border : #8486A6;
  --border_sub : #EFEFEF;
  /* --input_read: #CFD0E3; */

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

/* font-family */
@font-face { font-family:"noto"; src:url("./font/NotoSansKR-Light.otf") format("opentype"); font-weight:300; font-style:normal;}
@font-face { font-family:"noto"; src:url("./font/NotoSansKR-Regular.otf") format("opentype"); font-weight:400; font-style:normal;}
@font-face { font-family:"noto"; src:url("./font/NotoSansKR-Medium.otf") format("opentype"); font-weight:500; font-style:normal;}
@font-face { font-family:"noto"; src:url("./font/NotoSansKR-Bold.otf") format("opentype"); font-weight:700; font-style:normal;}

@font-face { font-family:"pop"; src:url("./font/Poppins-Light.ttf") format("opentype"); font-weight:300; font-style:normal;}
@font-face { font-family:"pop"; src:url("./font/Poppins-Regular.ttf") format("opentype"); font-weight:400; font-style:normal;}
@font-face { font-family:"pop"; src:url("./font/Poppins-Medium.ttf") format("opentype"); font-weight:500; font-style:normal;}
@font-face { font-family:"pop"; src:url("./font/Poppins-SemiBold.ttf") format("opentype"); font-weight:600; font-style:normal;}
@font-face { font-family:"pop"; src:url("./font/Poppins-Bold.ttf") format("opentype"); font-weight:700; font-style:normal;}


/*#################### Components ####################*/
/* iOS / safari 브라우저일 경우 */
html.hidden_apple {position:static; height: 100vh;}
body.hidden_apple {position: fixed; touch-action: none;
    -webkit-webkit-touch-action: none;
    -moz-webkit-touch-action: none;
    -ms-webkit-touch-action: none;
    -o-webkit-touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    /* 이외의 브라우저 */
    overscroll-behavior: none;
}

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

/* wrap */
.wrap{width:100%; max-width:768px; min-height:100%; margin:0 auto; background-color:var(--dark); overflow-x: hidden; position: relative;}
.wrap.full{display:flex; flex-direction:column;}
.wrap.full .content{flex:1;}
.wrap.full .header{flex:none;}
.wrap.full .footer{flex:none;}


/*header*/
.header {width:100%; height:60px;}
.header a { display:block; width:100%; height:100%; }
.header_safe_area{width:100%; height:100%;}
.header_common_layout{position:fixed; left:50%; top:0; transform:translateX(-50%); display:flex; justify-content:space-between; align-items:center; width:100%; max-width:768px; height:60px; border-bottom:1px solid var(--border); background-color:var(--dark); z-index:100;}
.header_title{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:250px; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden; text-align: center;}
.header_left{ position:absolute; left: 0; width:65px; height:100%;}
.header_left img { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width: 24px; cursor:pointer; }
.header_right{ position:absolute; right: 0; width:65px; height:100%;}
.header_right img { position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); width:24px; cursor:pointer;}


/* bottom_tab */
/* .bottom_tab_safe_area{width:100%; height:83px;}
.bottom_tab{position:fixed; left:50%; bottom:0; transform:translateX(-50%); display:flex; justify-content:space-between; align-items:center;  width:100%; max-width:768px; padding:16px 20px; border-top:1px solid var(--border_sub); background-color:#fff; z-index:9;}
.bottom_tab li a{display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 10px;}
.bottom_tab li a .img{display:block; width:22px; height:22px; margin-bottom:8px; background-repeat:no-repeat; background-position:center; background-size:contain;}
.bottom_tab li a .text{font-size:14px; font-weight:500; color:#999;}
.bottom_tab .active a .text{color:var(--black);} */

/* .bottom_tab li:nth-child(1) a .img{background-image:url("../img/svg/icon_menu_wallet.svg");}
.bottom_tab li:nth-child(2) a .img{background-image:url("../img/svg/icon_menu_send.svg");}
.bottom_tab li:nth-child(3) a .img{background-image:url("../img/svg/icon_menu_shopping.svg");}
.bottom_tab li:nth-child(4) a .img{background-image:url("../img/svg/icon_menu_change.svg");}
.bottom_tab li:nth-child(5) a .img{background-image:url("../img/svg/icon_menu_mypage.svg");}

.bottom_tab .active:nth-child(1) a .img{background-image:url("../img/svg/icon_menu_wallet_on.svg");}
.bottom_tab .active:nth-child(2) a .img{background-image:url("../img/svg/icon_menu_send_on.svg");}
.bottom_tab .active:nth-child(3) a .img{background-image:url("../img/svg/icon_menu_shopping_on.svg");}
.bottom_tab .active:nth-child(4) a .img{background-image:url("../img/svg/icon_menu_change_on.svg");}
.bottom_tab .active:nth-child(5) a .img{background-image:url("../img/svg/icon_menu_mypage_on.svg");} */



/* content */
.content{width:100%; overflow:hidden;}
.content_inner{padding:0 20px;}

/* footer */
.footer{width:100%;}
.footer .inner{width:100%; max-width:768px; margin:auto;}


.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:#fff; z-index:9999;}
/* loading */
/*
.loading_circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);width:100px; height:100px; border-radius:50%; border:2px solid var(--main); border-top-color:rgba(255,255,255,0); border-bottom-color:rgba(255,255,255,0); animation:loading 3s infinite;}
.loading_text{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; font-weight:700; color:var(--sub);}
@keyframes loading{
  100%{transform:translate(-50%,-50%) rotate(360deg);}
} */


/*#################### Atomic CSS ####################*/

/*공통*/
.d_none{display:none  !important; }
.d_block{display:block !important;}
.d_flex{display:flex;}
.d_grid{display:grid;}
.d_table{display:table;}
.d_row{display:table-row;}
.d_cell{display:table-cell;}

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

/* 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_22{font-size:22px;}
.font_34{font-size:34px;}

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

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

/* background-color */
.bg_main{background-color:var(--main);}
.bg_sub{background-color:var(--sub);}
.bg_red{background-color:var(--red);}
.bg_blue{background-color:var(--blue);}
.bg_green{background-color:var(--green);}
.bg_yellow{background-color:var(--yellow);}
.bg_gray{background-color:var(--gray);}
.bg_white{background-color:var(--white);}
.bg_black{background-color:var(--black);}

/* color */


/* flex */
.flex{display:flex; align-items:center;}
.flex_none{flex:none;}
.flex_center{display:flex; justify-content:center; align-items:center;}
.flex_col_center{display:flex; flex-direction:column; justify-content:center; 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_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_wrap {flex-wrap:wrap;}
.flex_align_start { display: flex; align-items: flex-start;}
/* align-items */
.align_start{ align-items:start;}
.align_center{ align-items:center;}
.align_end{ align-items:end;}

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

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

/* width */
.w_10 { width:10%; }
.w_24 { width:24%; }
.w_33 { width:33%; }
.w_49 { width:49%; }
.w_100 { width:100%; }


/* margin 값 */
.m_auto{margin:auto;}

.m10{margin:10px;}
.m20{margin:20px;}
.m30{margin:30px;}
.m40{margin:40px;}
.m50{margin:50px;}

.ml4{margin-left:4px;}
.ml6{margin-left:6px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}

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

.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}

.mb10{margin-bottom:10px;}
.mb16{margin-bottom:16px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}

.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 값 */
.p10{padding:10px;}
.p20{padding:20px;}
.p30{padding:30px;}
.p40{padding:40px;}
.p50{padding:50px;}

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

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

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

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom: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;}

.cursor {cursor:pointer;}

.color_black {color:#000000; }
.color_red {color:#E31D2E; }
.color_blue {color:#3E79F7;}
.color_main {color:var(--main);}
.color_gray { color: var(--gray);}
.color_white {color: #fff;}
.color_active { color:#3E79F7;}
.card { padding:20px; width: 100%; border-radius: 10px;}
.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; }

.input_design { color: #212121; width: 100%; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); font-size: 14px; font-weight: 500; margin-top:6px;}
.input_design:disabled {border:none; background: #ddd;}
.pagination{display:flex; align-items:center;}
.pagination li{width:26px; height:26px; margin-right:4px;}
.pagination li:last-child{margin-right:0;}
.pagination li a{display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:14px; font-weight:500; font-family:"open"; color:var(--gray);}
.pagination .page.active{border-radius:4px; background-color:var(--main);}
.pagination .page.active a{color:#fff;}

/* 22.12.16 신정운 Sweet Alert */
.title_sweet { font-size:20px; color:#212121; }
.desc_sweet { font-size:15px; color:#212121; 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-left:10px !important; border:1px solid var(--line); }
.swal2-popup {width:400px !important;}
.border-bottom { border-bottom: 1px solid var(--border_sub);}
.slider_active {border-radius: 10px; background-color: #555555;}
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%);}
input[type="checkbox"] { -webkit-appearance: none; position: relative; width: 24px; height: 24px; cursor: pointer;  outline: none;  border: 1px solid var(--border); border-radius: 4px;}
input[type="checkbox"]:checked {background-color: var(--main); border: none;}


@media (max-width:767px){
.content {margin-bottom:20px;}
}