
*{margin:0; padding:0; box-sizing:border-box; font-family:'noto_sans', sans-serif; color:var(--black);
-ms-overflow-style: none; scrollbar-width: none;}
*::-webkit-scrollbar { display: none;}
body{margin:0; padding:0; background-color:#efefef; height:100svh;}
html {height:100%; }
li{list-style:none;}
a:link, a:visited{text-decoration:none;}
a {outline: none;}
select, input, textarea, button, hr{border:none; outline:none;}
table{border-spacing:0px; border-collapse:collapse; width:100%; padding: 0; border: 0;}
body.hidden {overflow: hidden;}

/*input label 화살표 제거*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.word_break_all{word-break:break-all;}
.word_keep_all{word-break:keep-all; word-wrap: break-word;}

.height_100 {
  height: calc(var(--vh, 1vh) * 100) !important;
}

/* 색상 변수 설정 */
:root {
  --body_bg : #08091B;
  --container_bg : #0a0b20;
  --header_bg : #0a0b20;
  --card_bg : #222b3c;
  --bottom_tab_bg : #0a0b20;
  --wrap_bg : #0a0b20;
  --gradient : linear-gradient(-225deg, #2F9BCC, #50418C);
  --main_blue : #2F9BCC;
  --hr_bg : #222b3c;
  --light_gray : #F2F2F2;

  /* color */
  --main : #0079fa;
  --sub : #ffbc00;
  --white : #FFF;
  --black : #212121;
  --red : #F00;
  --red9 : #900;
  --orange : #F80;
  --yellow : #FF0;
  --green : #00d980;
  --green9 : #090;
  --blue : #00F;
  --blue9 : #009;
  --blue8 : #0e6f9c;
  --purple : #90f;
  --pink : #f0f;
  --graye : #eee;
  --grayd : #ddd;
  --grayc : #ccc;
  --grayb : #bbb;
  --graya : #aaa;
  --gray9 : #999;
  --gray8: #888;
  --gray7 : #777;
  --gray6 : #666;
  --gray5 : #555;
  --gray4 : #444;
  --gray3 : #333;
  --gray: #B1B1B1;
  /* item */
  --btn : #efefef;

  /* function */
  --warning : #bf0010;
  --confrim : #65f;
  --excel : #292;
  --active : #FF8800;
  --inactive : #ccc;
  --disabled : #999;

  /* bootstrap */

  /* background-color */
  --bg : #efefef;
  --bg2 : #fafbfa;

  /* border color */
  --line : #0a0b20;
  --line2 : #fafafa;
  --line3 : #fbfbfb;

  /* placeholder */
  --placeholder :  rgba(34,34,34,.4);

  /* box-shadow */
  --shadow : 1px 2px 4px rgba(0,0,0,0.08);

  /* radius */
  --radius-box : 10px;
  --radius-card : 8px;
  --radius-btn : 8px;
  --radius-small-btn : 6px;
  --textarea-radius : 6px;
  --select-radius : 6px;

  /* border */
  --border : #C3C3C3;
  --input-border :  solid 1px #0a0b20;
  --textarea-border : solid 1px #e6e6ea;
  --select-border : solid 1px #e6e6ea;
  --border_sub : #EFEFEF;
}

/*
  [z-index 정리]

  헤더 101
  하단탭 102

  팝업 1001

  로딩장 10001
*/

/* MONTSERRAT(영문) */
@font-face { font-family: "montserrat-italic"; src: url("./font/Montserrat-LightItalic.ttf") format("truetype"); font-weight: 300;}
@font-face {font-family: "montserrat";src: url("./font/Montserrat-Regular.ttf") format("truetype"); font-weight: 400;}
@font-face {font-family: "montserrat";src: url("./font/Montserrat-Medium.ttf") format("truetype"); font-weight: 500;}
@font-face {font-family: "montserrat";src: url("./font/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600;}
@font-face {font-family: "montserrat";src: url("./font/Montserrat-Bold.ttf") format("truetype"); font-weight: 700;}

/* NOTO SANS KR(한글) */
@font-face { font-family: "noto_sans"; src: url("./font/NotoSansKR-Light.otf") format("opentype"); font-weight: 300;}
@font-face { font-family: "noto_sans"; src: url("./font/NotoSansKR-Regular.otf") format("opentype"); font-weight: 400;}
@font-face { font-family: "noto_sans"; src: url("./font/NotoSansKR-Medium.otf") format("opentype"); font-weight: 500;}
@font-face { font-family: "noto_sans"; src: url("./font/NotoSansKR-Bold.otf") format("opentype"); font-weight: 700;}

/* wrap */
.wrap{width:100%; max-width:768px; min-height:100%; margin:0 auto; background-color:#f9f9f9;}
.wrap.wide{max-width:100%;}

/* test */
#toggle{
    display: inline-flex;
    border-radius: 10px;
    padding: 2px;
    background-color: var(--wrap_bg);
}
#toggle i{
    font-size: 18px;
    padding: 5px;
    background-color: var(--white);
    color: #fde675;
}
#light-mode{
    border-radius: 10px 0px 0px 10px;
}
#dark-mode{
    border-radius: 0px 10px 10px 0px;
}
#toggle input{
    display: none;
}
#toggle input[type=radio]:checked + label > i {
    background-color: var(--wrap_bg);
    color: #fff;
    transition: all 0.3s ease-in-out;
}

/* header */
.header {width:100%;}
.header_safe_area{width:100%; height:50px;}
.header_common_layout{width:100%; max-width:768px; height:50px; padding:0 20px; border-bottom:1px solid #efefef; position:fixed; left:50%; top:0; transform:translateX(-50%); background-color:var(--white); z-index:990; display:flex; justify-content:center; align-items:center;}
.header_logo{font-size:22px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:var(--black);}
.header_title{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:18px; font-weight:700; color:var(--black);}
.header_left{margin-right:auto;}
.header_right{margin-left:auto;}
.header .close{width:14px; cursor:pointer;}
.header .close img{display:block;}
.header .back{width:10px; cursor:pointer;}
.header .back img{display:block;}



/* container */
.container{width:100%; min-height:calc(100svh - 50px);}
.container.no_footer{min-height:calc(100svh - 50px);}
.container.footer{min-height:calc(100svh - 120px);}
.container.no_header{min-height:calc(100svh - 70px);}
.container.only_container{min-height:100svh;}

/* footer */
.footer{width:100%;}

/* Components CSS */

/* label */
label.design{width:100%; font-size:16px; font-weight:500; color:var(--black);}
label.design small{display:inline-block; width:100%;}

/* input */
input.design{width: 100%; height: 40px; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--grayb); font-size: 14px; color:var(--black); background: var(--white);}

input.design::placeholder{font-size:14px; font-weight:500; color:var(--grayb); font-family: "Noto Sans KR", sans-serif;}

input.design:read-only{background-color:#ededed; color:var(--black); border:none;}
input.design:read-only::placeholder {color:var(--black);}
input.not_readonly:read-only{background-color:#fff; color:#000 !important;}

input.design:disabled{background-color:#ededed;}
input.not_disabled:disabled{background-color:#fff; color:#000 !important;}

/* checkbox */
label.checkbox{display:inline-flex; justify-content:flex-start; align-items:center; gap:10px;}
label.checkbox input{display:none;}
label.checkbox .icon{display:block; width:24px; height:24px; border-radius:4px; background-color:#f1f1f1; cursor:pointer; position:relative;}
label.checkbox .text{font-size:14px; font-weight:500;}
label.checkbox input + .icon::after{content:"✓"; display:block; font-size:14px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#ccc;}
label.checkbox input:checked + .icon{background:var(--gradient);}
label.checkbox input:checked + .icon::after{color:#fff;}
label.checkbox input:checked ~ .text{color:var(--main_blue) !important;}

/* select */
select.design{width:100%; padding:8px 16px; border-radius:6px; font-size:14px; font-weight:500; background:transparent; border:1px solid var(--border);}
select.design option{color:var(--black);}

/* textarea */
textarea.design{width:100%; padding:8px 16px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-weight:500; color:var(--black); background-color:var(--white); resize:none;}
textarea.design::placeholder{font-size:16px; font-weight:400; color:var(--grayb);}

/* button */
button.design{width:100%; height:40px; background:var(--main); border-radius:var(--radius-btn); font-size:18px; font-weight:500; cursor:pointer; color:var(--white);}
button.design:disabled{border:solid 1px rgba(0,0,0,.05); background-color:#e6e6ea; color:#fff;}
button.design.red{background-image:none; background-color:var(--warning);  color:#fff;}
button.design.gray{background-image:none; background-color:var(--gray9);}
button.design.blue{background-image:none; background-color: var(--blue8);}
button.design.white{background-image:none; background-color: var(--black);}
button.design.black{background-image:none; background-color: var(--white);}
button.design.small{width:auto; height:50px; padding:0 16px; font-size:16px; border-radius:var(--radius-small-btn);}

.btn{width:100%; height:50px; background:var(--main); border-radius:var(--radius-btn); color:var(--black); font-size:16px; font-weight:700; cursor:pointer; display:inline-flex; justify-content:center; align-items:center;}
.btn.small{width:auto; height:50px; padding:0 16px; font-size:16px; border-radius:var(--radius-small-btn);}
/* hr */
hr.design{border-top:1px solid var(--hr_bg);}

/* card */
.card{padding:20px; background:var(--card_bg); border-radius:var(--radius-box);}
.card.gradient{padding:20px; background:var(--gradient); border-radius:var(--radius-box);}
.info_card{ background:var(--card_bg); border-radius:var(--radius-box); box-shadow: 2px 4px 12px rgba(0,0,0,0.06);}
/* .info_card > div:first-child { padding:14px 20px;  } */
.responsive_330 { display: flex; justify-content: space-between; flex-direction: column; align-items: flex-start; }
.responsive_330 .amount { align-self: flex-end; margin-bottom: 10px; }
.info_card .title{display:flex; align-items:center; gap:10px;}
.info_card .title img{width:40px; height:40px; border-radius:50%; background: var(--white); border:1px solid var(--grayc);}
.info_card p { color:var(--black); }
.info_card .amount{ margin-bottom:10px; display: flex; justify-content: flex-end; align-items: center; font-size:22px; font-weight:700; font-family:"montserrat"; color:var(--white);}
.info_card .desc{display: flex; justify-content: flex-end; align-items: center; font-size:14px; font-weight:500; }
.info_card.border_blue  { background: var(--main); }

.main_card_bottom {display: flex; justify-content: space-between; align-items: center; height:50px; background: rgba(255,255,255,0.7); width:100%; border-radius: 0 0 10px 10px;}
.main_card_bottom li { width: 100%; height: 100%; border-right: 1px solid var(--main);}
.main_card_bottom li:last-child { border:none; }
.main_card_bottom li a  { display: flex; align-items: center; text-align: center; justify-content: center; width:100%; height: 100%; font-size: 16px; font-weight: 500; color:var(--black);}

/* banner */
/* .coin_swiper, .banner_swiper { width:100%; height:100%; }
.banner_swiper li { width:100%; height:100%; }
.banner_swiper li a { display: block; width: 100%; height:100%; margin: 0 auto; }
.banner_swiper li a img { display: block; border-radius: 10px; width:100%; height: 100%; aspect-ratio: 3 / 1; object-fit: contain;}
.coin_swiper .swiper-pagination { bottom: 0px !important; }
.coin_swiper .swiper-pagination-bullet-active { background: var(--sub); } */

.banner_swiper .swiper-pagination{bottom:30px;}
.banner_swiper .swiper-pagination-bullet{width:6px; height:6px; margin-right:4px; background-color:#fff; opacity:1;}
.banner_swiper .swiper-pagination-bullet-active{background-color:var(--sub);}
.banner_slide {position:relative; width:100%; padding-top:56.25%;}
.banner_slide img{position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain; }


.direct_link_list{width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows: 1fr; gap:10px;}
.direct_link_list li { position: relative; border-radius:var(--radius-box); box-shadow:2px 4px 12px rgba(0,0,0,0.06);}
.direct_link_list .direct_txt { width:100%; font-size: 18px; font-weight: 700; color:var(--black);}
.direct_link_list .direct_txt.color_white { color: var(--white); }
.direct_link_list li a{width:100%; height:100%; padding:10px; font-size:14px; font-weight:700; display:flex; flex-direction:column; justify-content: space-between;}
.direct_link_list li a > div {width:100%; height:100%; display: flex; flex-direction: column; justify-content: space-between; }
.direct_link_list li a img{display:inline-block; width:50px; margin-left:auto;}

/* page : qna */
.qna_tab{width:100%; height:62px; display:flex; justify-content:center; align-items:center;}
.qna_tab li {width:100%; height:100%; border-bottom:2px solid #fff;}
.qna_tab li a{display:block; width:100%; height:100%; font-size:16px; font-weight:700; line-height:60px; text-align:center;}
.qna_tab .active{border-bottom-color:var(--main);}
/* .qna_tab .active a{color:var(--main_blue);} */
.qna_list{width:100%;}
.qna_list li{  background: var(--card_bg); padding: 0 20px; border-radius: var(--radius-box); margin-bottom: 10px; margin-bottom: 10px;  }
.qna_list li:last-child { margin-bottom: 0; }
.qna_list a{display:block; padding:20px 0;}
.qna_list .title{margin-bottom:10px; font-size:16px; font-weight:700;}
.qna_list .info{display:flex; justify-content:space-between; align-items:center;}
.qna_list .info .state{font-size:14px; font-weight:500;}
.qna_list .info .date{font-size:14px; font-weight:500;}

.qna_view {width:100%;}
.qna_view li{ background: var(--card_bg); padding: 0 20px; border-radius: 10px 10px 0 0; margin-bottom: 10px;}
.qna_view li:last-child { margin-bottom: 0; }
.qna_view a{display:block; padding:20px 0;}
.qna_view .title{margin-bottom:10px; font-size:16px; font-weight:700;}
.qna_view .info{display:flex; justify-content:space-between; align-items:center;}
.qna_view .info .state{font-size:14px; font-weight:500;}
.qna_view .info .date{font-size:14px; font-weight:500;}
.qna_view_top_txt { background: var(--card_bg); padding: 20px; border-radius: 0 0 10px 10px; margin-bottom: 10px; }
.qna_admin_answer { background: var(--card_bg); padding: 20px; border-radius: 10px 10px 0 0; }

/* send_card_list */
.send_card_list {  background:var(--card_bg); width: 100%; padding: 16px; font-size: 14px; border-radius: var(--radius-box); }
.send_card_list .title { flex: none; font-weight: 700; color: var(--gray); word-break: break-all; }
.send_card_list .desc { font-size: 14px; font-weight: 700; word-break: break-all; }
.send_card_list li { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.send_card_list li:last-child { margin-bottom: 0; border: none; padding: 0; }


/* text_card_list */
.text_card_list{width:100%;  border:1px solid var(--border); border-radius:var(--radius-box);}
.text_card_list li{display:flex; justify-content:space-between; align-items:center; padding:0 16px 14px; margin-bottom:14px; border-bottom:1px solid #efefef;}
.text_card_list li:first-child {padding-top:16px;}
.text_card_list li:last-child{padding-bottom:16px; margin-bottom:0px; border-bottom:none;}
.text_card_list .title{flex:none; font-size:14px; font-weight:500; word-break: break-all;}
.text_card_list .desc{font-size:14px; font-weight:700; word-break: break-all;}

/* page : login */
.login_logo {width:100%; margin:0 auto; text-align: center; padding-top:120px;}
.login_logo img {width:200px; height:200px;}

/* page : register */
.argree_box {height:90px; border:1px solid #ededed; font-size:14px; padding:10px; font-weight: 500; overflow-y: auto; }

/* page : notice */
.notice_list{width:100%;}
.notice_list li{width:100%; border-bottom: 1px solid var(--border_sub); padding:20px 20px 10px; }
.notice_list li a{width:100%; padding:10px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.notice_list li:first-child a{padding-top:0; }
.notice_list li:last-child{border-bottom:none; }
.notice_list li a .title{font-size:16px; font-weight:700; color:var(--black);}
.notice_list li a .date{font-size:14px; font-weight:500; flex:none;  color:var(--gray);}
/* page : marketplace */
/* 230419 장터페이지 추가 작업 : 신정운 */
.giftcard_tab { display: grid; grid-template-columns: repeat(3,1fr); grid-column-gap: 10px; justify-content: center;}
.market_ul, .marketplace_view { display:flex; justify-content: space-between; align-items: center; padding:6px 10px; }
.market_ul li, .marketplace_view li { width:24%; }
.market_table ul { width:100%;}
.marker_border { position: relative; z-index:999; border-top:1px solid #f1f3f5;}
.giftcard_active { outline:2px solid var(--main);}
.giftcard_tab img { max-width:100%;}

.market_tablewrap { border-radius: 10px; border:2px solid #f1f3f5; overflow: hidden; }
.market_table { text-align: center; font-size:15px; transition: transform 0.3s; position: relative;  border-bottom:none; width:100%;
  word-break: break-all; overflow: hidden; z-index:990;}
.market_nohistory { width:100%; height:calc(100vh - 400px); display: flex; justify-content: center; align-items: center;}
.marketplace_view { transition: transform 0.3s; z-index:999; background-color:var(--card_bg);}
.marketplace_view.active { transform: translateX(-100%);}
.market_hight { height:100%;}

.viewbtn button { width:70px; height:30px; font-size:15px;}
.total_marketbox { display: flex; align-items: flex-end; position: absolute; right: 0; bottom:0; width:100%; z-index:-1;}
.total_listview {font-size:15px; border-radius: 8px; width:100%; padding:10px;}
.total_listview li { display:flex; border-bottom:1px solid #f1f3f5; justify-content: space-between; padding:10px 0;}
.total_listview li:first-child { padding-top:0;  }
.total_listview li:last-child{ padding-bottom:0; border-bottom:none;}
.total_listview li p:nth-child(1) {width:25%;}
.total_listview li p:nth-child(2) {width:24%; margin-left:auto;}


.market_ul{background-color:var(--card_bg);}
.market_ul .link_viewli, .marketplace_view  .link_viewli {width:10%;}
.market_ul li:nth-child(1), .marketplace_view li:nth-child(1) { width:12%;}
.market_ul li:nth-child(3), .marketplace_view li:nth-child(3) { width:10%;}
.market_ul li:nth-child(2), .marketplace_view li:nth-child(2) { width:65%;}
.market_ul .link_viewli, .marketplace_view  .link_viewli {width:5%;}

.card_80 { color:#d7b629; font-weight: 700; }
.card_120 { color:#7595cb; font-weight: 700; }
.card_160 { color:#ad667c; font-weight: 700; }

.info_market {width:100%; text-align: right; font-size:16px; color:#ff0000; font-weight: 500;}
.view_linkimg img {width:30px; height:30px; display: block;}
.view_linkimg {cursor:pointer;}

.market_info_txt {font-size: 14px; font-weight: 500; text-align: right;}
.market_info_txt img { display: block; }

.market_list_view > button { background: var(--sub); font-size: 16px;  color:var(--black);}
/* page : withdraw */
.withdraw_tab{width:100%; display:flex; justify-content:center; align-items:center; gap:20px;}
.withdraw_tab li{width:100%; height:50px; line-height:50px; border-radius:6px; text-align:center; background-color:var(--gray3); font-size:16px; font-weight:700; cursor:pointer;}
.withdraw_tab .active{background:var(--gradient);}

.withdraw_panel li{display:none;}
.withdraw_panel .active{display:block;}

.table_wrap { overflow-x: auto; font-size:14px; text-align: center; background-color:var(--white); border-radius:6px; box-shadow:2px 4px 12px rgba(0,0,0,0.06);}
.table_wrap table th { border-bottom:1px solid var(--bg); padding:14px 10px; white-space: nowrap; color:var(--black);}
.table_wrap table td { text-align: center; padding:14px 10px; border-bottom:1px solid var(--bg); white-space: nowrap; color: var(--black); }
.table_wrap table tr:last-child td{border-bottom:none; color:var(--black); font-weight: 600;}
.total_num, .no_datab { color:var(--black); }

.purchase_tab{display:flex; justify-content:center; align-items:center; gap:10px;}
.purchase_tab li{width:100%; height:52px; border-radius:6px; background:var(--grayd); font-size:16px; font-weight:700; color:var(--gray3); display:flex; justify-content:center; align-items:center; cursor:pointer;}
.purchase_tab .active{background:var(--main); color:var(--white);}



/* loading */
.loading{position:fixed; left:0; top:0; width:100%; height:100vh; background-color:var(--body_bg); z-index:10001;}
.loading_circle{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(0deg);width:100px; height:100px; border-radius:50%; border:2px solid #fff; 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:#fff;}
@keyframes loading{
    100%{transform:translate(-50%,-50%) rotate(360deg);}
  }

/* keypad */
.keypad{display: grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr;}
.keypad button{display:block; width:100%; height: 78px; font-size:26px; font-weight:700; display:flex; justify-content:center; align-items:center; background:none; cursor:pointer;}
.keypad a {display:block; width: 100%; height: 78px; border-radius: unset; padding: 0; font-size: 26px; font-weight: 700; display: flex; justify-content: center; align-items: center;}

/* pin */
.pin_box span { display: block; width: 38px; height: 38px; border-radius: 6px; background-color: #eee; margin-right: 6px; position: relative; overflow: hidden; }
.pin_box .active:before { content: "*"; text-align: center; line-height: 46px; font-size: 20px; color: #fff; background:var(--main); position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

/* pagination */
.pagination_wrap { width: 100%; max-width: 768px; padding: 28px 0; margin: 0 auto; }
.pagination_item a {display:block; width:100%; height:100%; color:#fff; display: flex; justify-content: center; align-items: center;}
.pagination_item.active a { background:var(--main); border-radius: 4px; font-family: 'Montserrat', sans-serif; color: var(--black); }
.pagination_list { display: flex; justify-content: center; width: 170px; margin: 0 auto; gap:4px; }
.pagination_list li.pagination_item { display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; font-size: 14px; font-family: 'Montserrat', sans-serif; color: #fff; user-select: none; cursor: pointer; }
.pagination_item:first-child, .pagination_item:last-child { color: #fff; }

/* popup */
.popup_wrap { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0,0,0,0.5); }
.pop_bg { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 8000; transition: all 300ms ease-in; }
.pop_cont { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:calc(100% - 40px); max-width:700px; max-height: 582px; padding: 10px; background-color:var(--card_bg); border-radius: 20px; z-index: 9920; }
.pop_title { font-weight: 700; text-align: center; border-bottom: 2px solid #121330; padding-bottom: 10px; font-size: 20px; font-family: "Noto Sans KR", sans-serif; line-height: normal; }
.popup_txt { color: #fff; word-break: break-all; font-family: "Noto Sans KR", sans-serif; padding: 20px 0; line-height: normal; font-size: 18px; font-weight: 700; max-height:300px; overflow: auto;}
.pop_btn { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
.pop_btn p { display: block; width: 48%; padding: 6px; text-align: center; color: #fff; font-size: 16px; background-color:var(--gray9); border-radius: 10px; cursor: pointer; font-weight: 700; }
.pop_btn p:nth-child(2) { background:var(--gradient); }

/* bottom_tab */
.bottom_tab_safe_area{width:100%; height:70px;}
.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:6px 20px; border-top:1px solid #ededed; background-color:var(--white); 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:32px; height:32px; margin-bottom:4px; 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(--main);}

.bottom_tab li:nth-child(1) a .img{background-image:url("../img/new_img/icon_tab_home_inactive.svg");}
.bottom_tab li:nth-child(2) a .img{background-image:url("../img/new_img/icon_coin_send_inactive.svg");}
.bottom_tab li:nth-child(3) a .img{background-image:url("../img/new_img/icon_tab_money_inactive.svg");}
.bottom_tab li:nth-child(4) a .img{background-image:url("../img/svg/icon_menu_shopping.svg");}

.bottom_tab .active:nth-child(1) a .img{background-image:url("../img/new_img/icon_tab_home_active.svg");}
.bottom_tab .active:nth-child(2) a .img{background-image:url("../img/new_img/icon_coin_send.svg");}
.bottom_tab .active:nth-child(3) a .img{background-image:url("../img/new_img/icon_tab_money_active.svg");}
.bottom_tab .active:nth-child(4) a .img{background-image:url("../img/svg/icon_menu_shopping_on.svg");}




/* tree */
/*tree*/
.seearch_img { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); cursor: pointer; }
.search_inputbox { position: relative; }
.container_tree { position: relative; overflow: auto; }
.tree1 ul { padding-top: 15px; position: relative; display: flex; }
/* .tree1 a {display:block; height:100%;} */
.tree1 li { text-align: center; position: relative; padding: 18px 5px 0 5px; }
.tree_wrap { width:100%; max-width:768px; margin:0 auto; padding:0 10px; overflow:auto; }
.user_infom { word-break: break-all; border: 2px solid #c3c3c3; display: inline-block; width: 190px; border-radius: 6px; }
.tree_idbox { display:flex; align-items: center; justify-content: center; padding:4px; border-radius: 4px 4px 0 0; color:#fff; background-color:#212121;
  min-height:30px; font-weight:600; height:auto; font-size:12px; }
  .tree_idbox_name { display:flex; align-items: center; justify-content: center; padding:4px; border-radius: 4px 4px 0 0; min-height:30px; font-weight:600; height:auto; font-size:12px; }
.set1 { width:100%; height:1px; margin:0 auto; }
.tree_imgbox img { width:30px; margin:0 auto; display: block;}
.tree_imgbox, .tree_datebox { padding:8px 0; font-size:10px; font-weight:400;}
.tree_namebox { font-size:12px; font-weight:600; padding-top:4px; word-break: break-all; }
.tree_search { padding:0 20px; }
.tree_imgbox { border-bottom:1px solid #ddd; }
.container_tree { -ms-overflow-style: none; scrollbar-width: none; }
.container_tree::-webkit-scrollbar { display:none; }
/*li 단독속성 (ul의 지정요소가 그 부모의 유일한 자식요소인 경우) */
.tree1 li:only-child { padding-top: 0; margin: auto; }
/* after, before 이벤트 */
.tree1 li::before, .tree1 li::after { content: ''; position: absolute; top: 0; right: 50%; border-top: 2px solid #c3c3c3; width: 50%; height: 18px; }
.tree1 li::after { right: auto; left: 50%; border-left: 2px solid #c3c3c3; }
.tree1 li:only-child::after, .tree1 li:only-child::before { display: none; }
.tree1 li:first-child::before, .tree1 li:last-child::after { border:none; }
.tree1 li:last-child::before { border-right: 2px solid #c3c3c3; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; }
.tree1 li:first-child::after { border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; }
.tree1 ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #c3c3c3; width: 0; height: 15px; }

/* hover 이벤트 */
.tree1 li a:hover+ul li::after, .tree1 li a:hover+ul li::before, .tree1 li a:hover+ul::before, .tree1 li a:hover+ul ul::before{ border-color: var(--main); }
.tree1 li a div:hover, .tree1 li a:hover+ul li a div { border: 2px solid var(--main); cursor:pointer; }
.tree1 li a div:hover > p:nth-child(1) { background:var(--main); color:var(--white); }
.tree1 li a:hover+ul li a div p:nth-child(1) {  background:var(--main); color:var(--black);}
.tree1 li a div:hover, .tree1 li a:hover+ul li a div { border: 2px solid var(--main); }


/* market table 수정작업 : NBR */
.market_table_box { padding: 6px 20px; background-color: var(--card_bg); display: flex; justify-content: space-between; align-items: center;}
.market_tablewrap > p { background: var(--card_bg); }
.marketplace_view{border-bottom:1px solid rgba(255,255,255,0.5);}
.marketplace_list.active > div:first-child {border-bottom:1px solid rgba(255,255,255,0.5);}
.marketplace_view .first, .market_table_box .first { min-width: 20px; text-align: center;}
.marketplace_view .center, .market_table_box .center { min-width: 100px; width: 100%;  text-align: center;}
.marketplace_view .last, .market_table_box .last { max-width: 110px; width: 100%; text-align: center;}
.market_tablewrap.bg { background-color: var(--white); }
.marketplace_list { margin-bottom: 1px; position: relative; bottom: 0; border:none; box-shadow: none; width: 100%; height: 40px; line-height: 42px; -webkit-perspective: 230px; perspective: 230px;}
.marketplace_list:last-child { margin:0; }
.marketplace_list > div { padding: 0 20px; background: var(--card_bg); position: absolute; width: 100%; height: 40px; margin:0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s; }
.marketplace_list > div:nth-child(1) {-webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; }
.marketplace_list > div:nth-child(2) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px; }
.marketplace_list.active > div:nth-child(1) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
.marketplace_list.active > div:nth-child(2) { opacity: 0; color: transparent; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); }
.marketplace_list button { width: 70px; height: 30px; font-size: 15px; }


/* 추천하기 */
.bg_referral { background: #fdeabf; }
.referral_tit { padding: 20px 20px 0; text-align: center; }
.referral_tit p:first-child { font-size: 38px; line-height: 1.2; }
.referral_tit p:last-child { font-size: 16px; }
.referral_box { position: relative; padding: 0 20px 20px; }
.referral_bg {background: linear-gradient(to top, var(--main), transparent 50%);}
.referral_box img { width:100%; max-width: 620px; height:100%; max-height: 430px; object-fit: contain; aspect-ratio: 6 / 5; margin: auto; }
.referral_box_card { margin: 0 20px 0; padding: 14px 20px; background: var(--white);  border-radius: 10px; box-shadow: 2px 4px 12px rgba(0,0,0,0.06); }
.referral_info li { display: flex; align-items: stretch; }
.referral_num { flex:none; display: block; width: 21px; height: 21px; display: flex; justify-content: center; align-items: center; background: #89949C; font-size: 12px; font-weight: 600; font-family: "montserrat"; border-radius: 50%; color:var(--white); }
.referral_info li { font-size: 14px; font-weight: 500; }
.referral_fri_card { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--white); border-radius: 10px; width: calc(100% - 40px); margin: 10px auto 0; }
.referral_receive_section { background-color: #EBF3FE; padding: 42px 20px 50px; }
.referral_receive_img img { width: 100%; max-width: 370px; margin:0 auto; }
.referral_receive_card { text-align: center; background-color: var(--lightgray); padding: 14px 20px 20px; border-radius: 10px; }
.referral_receive_card p:last-child { line-height: 1.7; }
.referral_receive_col { margin-top: 28px; display: flex; gap: 10px; }
.referral_receive_col_card { display: flex; flex-direction: column; align-items: center; padding: 24px 20px; background-color: var(--lightgray); border-radius: 10px; flex: 1; gap: 10px; }
.referral_receive_col_card > span:first-child { background-color: #ebebeb; width: 80px; height: 80px; aspect-ratio: 1/1; border-radius: 50%; display: block; overflow: hidden; }
.referral_receive_col_card > span:first-child > img { width: 100%; height: 100%; object-fit: cover; }
.referral_tq_btn { border-radius: 10px; background-color: var(--main); padding: 10px 12px; color: var(--white); }
footer.referral_receive_footer { padding-bottom: 120px; background-color: #F4F4F4; }
.referral_receive_info { background-color:var(--lightgray); padding: 20px; font-size: 14px; }
.referral_receive_info p:nth-of-type(1) { display: flex; align-items: center; gap: 5px; }

/*#################### Atomic CSS ####################*/

/* display */
.d_none{display:none !important;}
.d_block{display:block;}
.d_inline{display:inline;}
.d_flex{display:flex;}
.d_grid{display:grid;}
.d_table{display:table;}
.d_contents{display:contents;}
.d_flow_root{display:flow-root;}
.d_inline_block{display:inline-block;}
.d_inline_flex{display:inline-flex;}
.d_inline_grid{display:inline-grid;}
.d_inline_table{display:inline-table;}
.d_list_item{display:list-item;}

/* border */
.border_bottom { border-bottom: 1px solid var(--line); }

/* flex */
.flex_none{flex:none;}
.flex_1{flex:1;}
.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_evenly{display:flex; justify-content:space-evenly; align-items:center;}
.flex_center{display:flex; justify-content:center; align-items:center;}
.flex_center_col{display:flex; flex-direction:column; justify-content:center; align-items:center;}
.flex_end_between { display: flex; justify-content: space-between; align-items: flex-end; }
.flex_end_center { display: flex; justify-content: flex-end;; align-items: flex-end; }
.flex {display:flex; align-items: center;}
.flex_start_start { display:flex; justify-content: flex-start; align-items: flex-start; }
/* flex-direction */
.flex_dir_col{flex-direction:column;}
.flex_wrap {flex-wrap:wrap;}
/* gap */
.gap10{gap:10px;}
.gap20{gap:20px;}
.gap30{gap:30px;}

/* grid */

/* text truncation*/

/* stretched link */
.extend_link::after{content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0;}

/* position */
.relative{position:relative;}
.absolute{position:absolute;}
.absolute_center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.absolute_right_center{position:absolute; right:10px; top:50%; transform:translateY(-50%);}
.absolute_left_center{position:absolute; left:10px; top:50%; transform:translateY(-50%);}

/* cursor */
.pointer{cursor:pointer;}

/* text-align */
.text_center{text-align:center;}
.text_right{text-align:right;}

/* text-highlight */
.text_highlight {background: linear-gradient(to top, #999 50%, transparent 50%); font-weight:700;}

/* color */
.color_red{color:var(--red);}
.color_blue{color:var(--blue);}

.text_red{color:var(--red);}
.text_green9{color:var(--green9);}
.text_blue{color:var(--blue);}
.text_gray{color:var(--gray5);}
.text_purple{color:#800080;}

.color_main{color:var(--main);}
.color_sub{color:var(--sub);}
.color_red{color:var(--red);}
.color_blue{color:var(--blue);}
.color_green{color:var(--green);}
.color_yellow{color:var(--yellow);}
.color_gray{color:var(--gray);}
.color_dark_gray{color:var(--dark_gray);}
.color_white{color:var(--white);}
.color_black{color:var(--black);}

/* background-color */
.bg_red{background-color:var(--red);}
.bg_main{background-color:var(--main);}
.bg_sub{background-color:var(--sub);}
.bg_tq{background-color: #1162F8;}
.bg_white{background-color: var(--card_bg);}
.bg_white_one{background-color: var(--white);}
.bg_card {background-color:#212121;}
/* border */
.border1{border:1px solid var(--border);}
.border2{border:2px solid var(--border);}
.border3{border:3px solid var(--border);}
.border4{border:4px solid var(--border);}
.border5{border:5px solid var(--border);}
.border6{border:6px solid var(--border);}
.border7{border:7px solid var(--border);}
.border8{border:8px solid var(--border);}
.border9{border:9px solid var(--border);}
.border10{border:10px solid var(--border);}

/* border-style */
.border_dash{border-style:dashed;}
.border_dot{border-style:dotted;}
.border_double{border-style:double;}
.border_groove{border-style:groove;}

/* border-radius */
.r50{border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:50%;}

.r1{border-top-left-radius:1px; border-top-right-radius:1px; border-bottom-left-radius:1px; border-bottom-right-radius:1px;}
.r2{border-top-left-radius:2px; border-top-right-radius:2px; border-bottom-left-radius:2px; border-bottom-right-radius:2px;}
.r3{border-top-left-radius:3px; border-top-right-radius:3px; border-bottom-left-radius:3px; border-bottom-right-radius:3px;}
.r4{border-top-left-radius:4px; border-top-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px;}
.r5{border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
.r6{border-top-left-radius:6px; border-top-right-radius:6px; border-bottom-left-radius:6px; border-bottom-right-radius:6px;}
.r7{border-top-left-radius:7px; border-top-right-radius:7px; border-bottom-left-radius:7px; border-bottom-right-radius:7px;}
.r8{border-top-left-radius:8px; border-top-right-radius:8px; border-bottom-left-radius:8px; border-bottom-right-radius:8px;}
.r9{border-top-left-radius:9px; border-top-right-radius:9px; border-bottom-left-radius:9px; border-bottom-right-radius:9px;}
.r10{border-top-left-radius:10px; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}

/* object-position */
.object_center{object-position:center;}

/* object-fit */
.object_cover{object-fit:cover;}
.object_contain{object-fit:contain;}

/* width */
.w_100{width:100%;}
.w_50{width:50%;}
.w_49{width:49%;}
.w_33{width:33%;}
.w_25{width:25%;}
.w_10{width:10%;}

.w_30px{width:30px;}
.w_32px{width:32px;}
.w_34px{width:34px;}
.w_36px{width:36px;}

/* height */
.svh_100{height:100svh;}
.m_svh_100{min-height:100svh;}

/* aspect-ratio */
.ratio_1x1{aspect-ratio:1/1;}
.ratio_4x3{aspect-ratio:4/3;}
.ratio_3x4{aspect-ratio:3/4;}
.ratio_16x9{aspect-ratio:16/9;}
.ratio_16x10{aspect-ratio:16/10;}
.ratio_golden{aspect-ratio:1/1.618;}
.ratio_golden2{aspect-ratio:1.618/1;}

/* rotate */
.rotate45{rotate:45deg;}
.rotate90{rotate:90deg;}
.rotate180{rotate:180deg;}
.rotate_45{rotate:-45deg;}
.rotate_90{rotate:-90deg;}
.rotate_180{rotate:-180deg;}

/* animation */

/* transition */
.transition_all{transition:all;}

/* filter */
.blur1{filter:blur(1px);}
.blur2{filter:blur(2px);}
.blur3{filter:blur(3px);}
.blur4{filter:blur(4px);}
.blur5{filter:blur(5px);}
.blur6{filter:blur(6px);}
.blur7{filter:blur(7px);}
.blur8{filter:blur(8px);}
.blur9{filter:blur(9px);}
.blur10{filter:blur(10px);}


/* overflow */
.hidden{overflow:hidden;}
.hidden_x{overflow-x:hidden;}
.hidden_y{overflow-y:hidden;}

/* opacity*/
.opcity0{opacity:0;}
.opcity_1{opacity:0.1;}
.opcity_2{opacity:0.2;}
.opcity_3{opacity:0.3;}
.opcity_4{opacity:0.4;}
.opcity_5{opacity:0.5;}
.opcity_6{opacity:0.6;}
.opcity_7{opacity:0.7;}
.opcity_8{opacity:0.8;}
.opcity_9{opacity:0.9;}
.opcity1{opacity:1;}

/* user-select */
.user_select_none{user-select:none;}
.user_select_all{user-select:all;}
.user_select_text{user-select:text;}
.user_select_contain{user-select:contain;}

/* box-shadow */
.shadow{box-shadow:var(--shadow);}

/* word-break */
.keep_all{word-break:keep-all;}
.break_all{word-break:break-all;}

/* text-transform */
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}

/* font-size */
.font10{font-size:10px;}
.font11{font-size:11px;}
.font12{font-size:12px;}
.font13{font-size:13px;}
.font14{font-size:14px;}
.font15{font-size:15px;}
.font16{font-size:16px;}
.font17{font-size:17px;}
.font18{font-size:18px;}
.font19{font-size:19px;}
.font20{font-size:20px;}
.font21{font-size:21px;}
.font22{font-size:22px;}
.font23{font-size:23px;}
.font24{font-size:24px;}
.font25{font-size:25px;}
.font26{font-size:26px;}
.font27{font-size:27px;}
.font28{font-size:28px;}
.font29{font-size:29px;}
.font30{font-size:30px;}
.font31{font-size:31px;}
.font32{font-size:32px;}
.font33{font-size:33px;}
.font34{font-size:34px;}
.font35{font-size:35px;}
.font36{font-size:36px;}
.font37{font-size:37px;}
.font38{font-size:38px;}
.font39{font-size:39px;}

/* font-weight */
.regular{font-weight:400;}
.medium{font-weight:500;}
.semi_bold{font-weight:600;}
.bold{font-weight:700;}

/* font-style */
.font_italic{font-style:italic;}

/* font-family */
.kor{font-family:"noto_sans";}
.eng{font-family:"montserrat";}

/* text-decoration */
.text_underline{text-decoration:underline;}

/* vertical-align */
.vertical_middle{vertical-align:middle;}

/* z-index */


input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	box-shadow: 0 0 0 1000px white inset;
}

  /* 1번대 일반적인 순서 자유롭게 사용 */
  .z1{z-index:1;}
  .z2{z-index:2;}
  .z3{z-index:3;}
  .z4{z-index:4;}
  .z5{z-index:5;}
  .z6{z-index:6;}
  .z7{z-index:7;}
  .z8{z-index:8;}
  .z9{z-index:9;}

  /* 100번대 */
  .z100{z-index:100;} /* 헤더 */

  /* 1000번대 */
  .z1000{z-index:100;} /* 팝업 */

  /* 10000번대 */
  .z10000{z-index:100;} /* 로딩창 */


/* margin */
.m_auto{margin-left:auto; margin-top:auto; margin-right:auto; margin-bottom:auto;}
.ml_auto{margin-left:auto;}
.mr_auto{margin-right:auto;}
.mt_auto{margin-top:auto;}
.mb_auto{margin-bottom:auto;}

.m1{margin-left:1px; margin-top:1px; margin-right:1px; margin-bottom:1px;}
.m2{margin-left:2px; margin-top:2px; margin-right:2px; margin-bottom:2px;}
.m3{margin-left:3px; margin-top:3px; margin-right:3px; margin-bottom:3px;}
.m4{margin-left:4px; margin-top:4px; margin-right:4px; margin-bottom:4px;}
.m5{margin-left:5px; margin-top:5px; margin-right:5px; margin-bottom:5px;}
.m6{margin-left:6px; margin-top:6px; margin-right:6px; margin-bottom:6px;}
.m7{margin-left:7px; margin-top:7px; margin-right:7px; margin-bottom:7px;}
.m8{margin-left:8px; margin-top:8px; margin-right:8px; margin-bottom:8px;}
.m9{margin-left:9px; margin-top:9px; margin-right:9px; margin-bottom:9px;}
.m10{margin-left:10px; margin-top:10px; margin-right:10px; margin-bottom:10px;}
.m11{margin-left:11px; margin-top:11px; margin-right:11px; margin-bottom:11px;}
.m12{margin-left:12px; margin-top:12px; margin-right:12px; margin-bottom:12px;}
.m13{margin-left:13px; margin-top:13px; margin-right:13px; margin-bottom:13px;}
.m14{margin-left:14px; margin-top:14px; margin-right:14px; margin-bottom:14px;}
.m15{margin-left:15px; margin-top:15px; margin-right:15px; margin-bottom:15px;}
.m16{margin-left:16px; margin-top:16px; margin-right:16px; margin-bottom:16px;}
.m17{margin-left:17px; margin-top:17px; margin-right:17px; margin-bottom:17px;}
.m18{margin-left:18px; margin-top:18px; margin-right:18px; margin-bottom:18px;}
.m19{margin-left:19px; margin-top:19px; margin-right:19px; margin-bottom:19px;}
.m20{margin-left:20px; margin-top:20px; margin-right:20px; margin-bottom:20px;}
.m21{margin-left:21px; margin-top:21px; margin-right:21px; margin-bottom:21px;}
.m22{margin-left:22px; margin-top:22px; margin-right:22px; margin-bottom:22px;}
.m23{margin-left:23px; margin-top:23px; margin-right:23px; margin-bottom:23px;}
.m24{margin-left:24px; margin-top:24px; margin-right:24px; margin-bottom:24px;}
.m25{margin-left:25px; margin-top:25px; margin-right:25px; margin-bottom:25px;}
.m26{margin-left:26px; margin-top:26px; margin-right:26px; margin-bottom:26px;}
.m27{margin-left:27px; margin-top:27px; margin-right:27px; margin-bottom:27px;}
.m28{margin-left:28px; margin-top:28px; margin-right:28px; margin-bottom:28px;}
.m29{margin-left:29px; margin-top:29px; margin-right:29px; margin-bottom:29px;}
.m30{margin-left:30px; margin-top:30px; margin-right:30px; margin-bottom:30px;}
.m31{margin-left:31px; margin-top:31px; margin-right:31px; margin-bottom:31px;}
.m32{margin-left:32px; margin-top:32px; margin-right:32px; margin-bottom:32px;}
.m33{margin-left:33px; margin-top:33px; margin-right:33px; margin-bottom:33px;}
.m34{margin-left:34px; margin-top:34px; margin-right:34px; margin-bottom:34px;}
.m35{margin-left:35px; margin-top:35px; margin-right:35px; margin-bottom:35px;}
.m36{margin-left:36px; margin-top:36px; margin-right:36px; margin-bottom:36px;}
.m37{margin-left:37px; margin-top:37px; margin-right:37px; margin-bottom:37px;}
.m38{margin-left:38px; margin-top:38px; margin-right:38px; margin-bottom:38px;}
.m39{margin-left:39px; margin-top:39px; margin-right:39px; margin-bottom:39px;}
.m40{margin-left:40px; margin-top:40px; margin-right:40px; margin-bottom:40px;}

.mx1{margin-left:1px; margin-right:1px;}
.mx2{margin-left:2px; margin-right:2px;}
.mx3{margin-left:3px; margin-right:3px;}
.mx4{margin-left:4px; margin-right:4px;}
.mx5{margin-left:5px; margin-right:5px;}
.mx6{margin-left:6px; margin-right:6px;}
.mx7{margin-left:7px; margin-right:7px;}
.mx8{margin-left:8px; margin-right:8px;}
.mx9{margin-left:9px; margin-right:9px;}
.mx10{margin-left:10px; margin-right:10px;}
.mx20{margin-left:20px; margin-right:20px;}
.mx30{margin-left:30px; margin-right:30px;}

.my1{margin-top:1px; margin-bottom:1px;}
.my2{margin-top:2px; margin-bottom:2px;}
.my3{margin-top:3px; margin-bottom:3px;}
.my4{margin-top:4px; margin-bottom:4px;}
.my5{margin-top:5px; margin-bottom:5px;}
.my6{margin-top:6px; margin-bottom:6px;}
.my7{margin-top:7px; margin-bottom:7px;}
.my8{margin-top:8px; margin-bottom:8px;}
.my9{margin-top:9px; margin-bottom:9px;}
.my10{margin-top:10px; margin-bottom:10px;}
.my20{margin-top:20px; margin-bottom:20px;}
.my30{margin-top:30px; margin-bottom:30px;}

.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml3{margin-left:3px;}
.ml4{margin-left:4px;}
.ml5{margin-left:5px;}
.ml6{margin-left:6px;}
.ml7{margin-left:7px;}
.ml8{margin-left:8px;}
.ml9{margin-left:9px;}
.ml10{margin-left:10px;}
.ml11{margin-left:11px;}
.ml12{margin-left:12px;}
.ml13{margin-left:13px;}
.ml14{margin-left:14px;}
.ml15{margin-left:15px;}
.ml16{margin-left:16px;}
.ml17{margin-left:17px;}
.ml18{margin-left:18px;}
.ml19{margin-left:19px;}
.ml20{margin-left:20px;}
.ml21{margin-left:21px;}
.ml22{margin-left:22px;}
.ml23{margin-left:23px;}
.ml24{margin-left:24px;}
.ml25{margin-left:25px;}
.ml26{margin-left:26px;}
.ml27{margin-left:27px;}
.ml28{margin-left:28px;}
.ml29{margin-left:29px;}
.ml30{margin-left:30px;}
.ml31{margin-left:31px;}
.ml32{margin-left:32px;}
.ml33{margin-left:33px;}
.ml34{margin-left:34px;}
.ml35{margin-left:35px;}
.ml36{margin-left:36px;}
.ml37{margin-left:37px;}
.ml38{margin-left:38px;}
.ml39{margin-left:39px;}
.ml40{margin-left:40px;}

.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr3{margin-right:3px;}
.mr4{margin-right:4px;}
.mr5{margin-right:5px;}
.mr6{margin-right:6px;}
.mr7{margin-right:7px;}
.mr8{margin-right:8px;}
.mr9{margin-right:9px;}
.mr10{margin-right:10px;}
.mr11{margin-right:11px;}
.mr12{margin-right:12px;}
.mr13{margin-right:13px;}
.mr14{margin-right:14px;}
.mr15{margin-right:15px;}
.mr16{margin-right:16px;}
.mr17{margin-right:17px;}
.mr18{margin-right:18px;}
.mr19{margin-right:19px;}
.mr20{margin-right:20px;}
.mr21{margin-right:21px;}
.mr22{margin-right:22px;}
.mr23{margin-right:23px;}
.mr24{margin-right:24px;}
.mr25{margin-right:25px;}
.mr26{margin-right:26px;}
.mr27{margin-right:27px;}
.mr28{margin-right:28px;}
.mr29{margin-right:29px;}
.mr30{margin-right:30px;}
.mr31{margin-right:31px;}
.mr32{margin-right:32px;}
.mr33{margin-right:33px;}
.mr34{margin-right:34px;}
.mr35{margin-right:35px;}
.mr36{margin-right:36px;}
.mr37{margin-right:37px;}
.mr38{margin-right:38px;}
.mr39{margin-right:39px;}
.mr40{margin-right:40px;}

.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt3{margin-top:3px;}
.mt4{margin-top:4px;}
.mt5{margin-top:5px;}
.mt6{margin-top:6px;}
.mt7{margin-top:7px;}
.mt8{margin-top:8px;}
.mt9{margin-top:9px;}
.mt10{margin-top:10px;}
.mt11{margin-top:11px;}
.mt12{margin-top:12px;}
.mt13{margin-top:13px;}
.mt14{margin-top:14px;}
.mt15{margin-top:15px;}
.mt16{margin-top:16px;}
.mt17{margin-top:17px;}
.mt18{margin-top:18px;}
.mt19{margin-top:19px;}
.mt20{margin-top:20px;}
.mt21{margin-top:21px;}
.mt22{margin-top:22px;}
.mt23{margin-top:23px;}
.mt24{margin-top:24px;}
.mt25{margin-top:25px;}
.mt26{margin-top:26px;}
.mt27{margin-top:27px;}
.mt28{margin-top:28px;}
.mt29{margin-top:29px;}
.mt30{margin-top:30px;}
.mt31{margin-top:31px;}
.mt32{margin-top:32px;}
.mt33{margin-top:33px;}
.mt34{margin-top:34px;}
.mt35{margin-top:35px;}
.mt36{margin-top:36px;}
.mt37{margin-top:37px;}
.mt38{margin-top:38px;}
.mt39{margin-top:39px;}
.mt40{margin-top:40px;}

.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb3{margin-bottom:3px;}
.mb4{margin-bottom:4px;}
.mb5{margin-bottom:5px;}
.mb6{margin-bottom:6px;}
.mb7{margin-bottom:7px;}
.mb8{margin-bottom:8px;}
.mb9{margin-bottom:9px;}
.mb10{margin-bottom:10px;}
.mb11{margin-bottom:11px;}
.mb12{margin-bottom:12px;}
.mb13{margin-bottom:13px;}
.mb14{margin-bottom:14px;}
.mb15{margin-bottom:15px;}
.mb16{margin-bottom:16px;}
.mb17{margin-bottom:17px;}
.mb18{margin-bottom:18px;}
.mb19{margin-bottom:19px;}
.mb20{margin-bottom:20px;}
.mb21{margin-bottom:21px;}
.mb22{margin-bottom:22px;}
.mb23{margin-bottom:23px;}
.mb24{margin-bottom:24px;}
.mb25{margin-bottom:25px;}
.mb26{margin-bottom:26px;}
.mb27{margin-bottom:27px;}
.mb28{margin-bottom:28px;}
.mb29{margin-bottom:29px;}
.mb30{margin-bottom:30px;}
.mb31{margin-bottom:31px;}
.mb32{margin-bottom:32px;}
.mb33{margin-bottom:33px;}
.mb34{margin-bottom:34px;}
.mb35{margin-bottom:35px;}
.mb36{margin-bottom:36px;}
.mb37{margin-bottom:37px;}
.mb38{margin-bottom:38px;}
.mb39{margin-bottom:39px;}
.mb40{margin-bottom:40px;}

/* padding */
.p1{padding-left:1px; padding-top:1px; padding-right:1px; padding-bottom:1px;}
.p2{padding-left:2px; padding-top:2px; padding-right:2px; padding-bottom:2px;}
.p3{padding-left:3px; padding-top:3px; padding-right:3px; padding-bottom:3px;}
.p4{padding-left:4px; padding-top:4px; padding-right:4px; padding-bottom:4px;}
.p5{padding-left:5px; padding-top:5px; padding-right:5px; padding-bottom:5px;}
.p6{padding-left:6px; padding-top:6px; padding-right:6px; padding-bottom:6px;}
.p7{padding-left:7px; padding-top:7px; padding-right:7px; padding-bottom:7px;}
.p8{padding-left:8px; padding-top:8px; padding-right:8px; padding-bottom:8px;}
.p9{padding-left:9px; padding-top:9px; padding-right:9px; padding-bottom:9px;}
.p10{padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px;}
.p11{padding-left:11px; padding-top:11px; padding-right:11px; padding-bottom:11px;}
.p12{padding-left:12px; padding-top:12px; padding-right:12px; padding-bottom:12px;}
.p13{padding-left:13px; padding-top:13px; padding-right:13px; padding-bottom:13px;}
.p14{padding-left:14px; padding-top:14px; padding-right:14px; padding-bottom:14px;}
.p15{padding-left:15px; padding-top:15px; padding-right:15px; padding-bottom:15px;}
.p16{padding-left:16px; padding-top:16px; padding-right:16px; padding-bottom:16px;}
.p17{padding-left:17px; padding-top:17px; padding-right:17px; padding-bottom:17px;}
.p18{padding-left:18px; padding-top:18px; padding-right:18px; padding-bottom:18px;}
.p19{padding-left:19px; padding-top:19px; padding-right:19px; padding-bottom:19px;}
.p20{padding-left:20px; padding-top:20px; padding-right:20px; padding-bottom:20px;}
.p21{padding-left:21px; padding-top:21px; padding-right:21px; padding-bottom:2px;}
.p22{padding-left:22px; padding-top:22px; padding-right:22px; padding-bottom:2px;}
.p23{padding-left:23px; padding-top:23px; padding-right:23px; padding-bottom:2px;}
.p24{padding-left:24px; padding-top:24px; padding-right:24px; padding-bottom:21px;}
.p25{padding-left:25px; padding-top:25px; padding-right:25px; padding-bottom:2px;}
.p26{padding-left:26px; padding-top:26px; padding-right:26px; padding-bottom:2px;}
.p27{padding-left:27px; padding-top:27px; padding-right:27px; padding-bottom:2px;}
.p28{padding-left:28px; padding-top:28px; padding-right:28px; padding-bottom:2px;}
.p29{padding-left:29px; padding-top:29px; padding-right:29px; padding-bottom:2px;}
.p30{padding-left:30px; padding-top:30px; padding-right:30px; padding-bottom:30px;}
.p31{padding-left:31px; padding-top:31px; padding-right:31px; padding-bottom:31px;}
.p32{padding-left:32px; padding-top:32px; padding-right:32px; padding-bottom:32px;}
.p33{padding-left:33px; padding-top:33px; padding-right:33px; padding-bottom:33px;}
.p34{padding-left:34px; padding-top:34px; padding-right:34px; padding-bottom:34px;}
.p35{padding-left:35px; padding-top:35px; padding-right:35px; padding-bottom:35px;}
.p36{padding-left:36px; padding-top:36px; padding-right:36px; padding-bottom:36px;}
.p37{padding-left:37px; padding-top:37px; padding-right:37px; padding-bottom:37px;}
.p38{padding-left:38px; padding-top:38px; padding-right:38px; padding-bottom:38px;}
.p39{padding-left:39px; padding-top:39px; padding-right:39px; padding-bottom:39px;}
.p40{padding-left:40px; padding-top:40px; padding-right:40px; padding-bottom:40px;}

.px1{padding-left:1px; padding-right:1px;}
.px2{padding-left:2px; padding-right:2px;}
.px3{padding-left:3px; padding-right:3px;}
.px4{padding-left:4px; padding-right:4px;}
.px5{padding-left:5px; padding-right:5px;}
.px6{padding-left:6px; padding-right:6px;}
.px7{padding-left:7px; padding-right:7px;}
.px8{padding-left:8px; padding-right:8px;}
.px9{padding-left:9px; padding-right:9px;}
.px10{padding-left:10px; padding-right:10px;}
.px20{padding-left:20px; padding-right:20px;}
.px30{padding-left:30px; padding-right:30px;}

.py1{padding-top:1px; padding-bottom:1px;}
.py2{padding-top:2px; padding-bottom:2px;}
.py3{padding-top:3px; padding-bottom:3px;}
.py4{padding-top:4px; padding-bottom:4px;}
.py5{padding-top:5px; padding-bottom:5px;}
.py6{padding-top:6px; padding-bottom:6px;}
.py7{padding-top:7px; padding-bottom:7px;}
.py8{padding-top:8px; padding-bottom:8px;}
.py9{padding-top:9px; padding-bottom:9px;}
.py10{padding-top:10px; padding-bottom:10px;}
.py14{padding-top:14px; padding-bottom:14px;}
.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;}
.py100{padding-top:100px; padding-bottom:100px;}

.pl1{padding-left:1px;}
.pl2{padding-left:2px;}
.pl3{padding-left:3px;}
.pl4{padding-left:4px;}
.pl5{padding-left:5px;}
.pl6{padding-left:6px;}
.pl7{padding-left:7px;}
.pl8{padding-left:8px;}
.pl9{padding-left:9px;}
.pl10{padding-left:10px;}
.pl11{padding-left:11px;}
.pl12{padding-left:12px;}
.pl13{padding-left:13px;}
.pl14{padding-left:14px;}
.pl15{padding-left:15px;}
.pl16{padding-left:16px;}
.pl17{padding-left:17px;}
.pl18{padding-left:18px;}
.pl19{padding-left:19px;}
.pl20{padding-left:20px;}
.pl21{padding-left:21px;}
.pl22{padding-left:22px;}
.pl23{padding-left:23px;}
.pl24{padding-left:24px;}
.pl25{padding-left:25px;}
.pl26{padding-left:26px;}
.pl27{padding-left:27px;}
.pl28{padding-left:28px;}
.pl29{padding-left:29px;}
.pl30{padding-left:30px;}
.pl31{padding-left:31px;}
.pl32{padding-left:32px;}
.pl33{padding-left:33px;}
.pl34{padding-left:34px;}
.pl35{padding-left:35px;}
.pl36{padding-left:36px;}
.pl37{padding-left:37px;}
.pl38{padding-left:38px;}
.pl39{padding-left:39px;}
.pl40{padding-left:40px;}

.pr1{padding-right:1px;}
.pr2{padding-right:2px;}
.pr3{padding-right:3px;}
.pr4{padding-right:4px;}
.pr5{padding-right:5px;}
.pr6{padding-right:6px;}
.pr7{padding-right:7px;}
.pr8{padding-right:8px;}
.pr9{padding-right:9px;}
.pr10{padding-right:10px;}
.pr11{padding-right:11px;}
.pr12{padding-right:12px;}
.pr13{padding-right:13px;}
.pr14{padding-right:14px;}
.pr15{padding-right:15px;}
.pr16{padding-right:16px;}
.pr17{padding-right:17px;}
.pr18{padding-right:18px;}
.pr19{padding-right:19px;}
.pr20{padding-right:20px;}
.pr21{padding-right:21px;}
.pr22{padding-right:22px;}
.pr23{padding-right:23px;}
.pr24{padding-right:24px;}
.pr25{padding-right:25px;}
.pr26{padding-right:26px;}
.pr27{padding-right:27px;}
.pr28{padding-right:28px;}
.pr29{padding-right:29px;}
.pr30{padding-right:30px;}
.pr31{padding-right:31px;}
.pr32{padding-right:32px;}
.pr33{padding-right:33px;}
.pr34{padding-right:34px;}
.pr35{padding-right:35px;}
.pr36{padding-right:36px;}
.pr37{padding-right:37px;}
.pr38{padding-right:38px;}
.pr39{padding-right:39px;}
.pr40{padding-right:40px;}

.pt1{padding-top:1px;}
.pt2{padding-top:2px;}
.pt3{padding-top:3px;}
.pt4{padding-top:4px;}
.pt5{padding-top:5px;}
.pt6{padding-top:6px;}
.pt7{padding-top:7px;}
.pt8{padding-top:8px;}
.pt9{padding-top:9px;}
.pt10{padding-top:10px;}
.pt11{padding-top:11px;}
.pt12{padding-top:12px;}
.pt13{padding-top:13px;}
.pt14{padding-top:14px;}
.pt15{padding-top:15px;}
.pt16{padding-top:16px;}
.pt17{padding-top:17px;}
.pt18{padding-top:18px;}
.pt19{padding-top:19px;}
.pt20{padding-top:20px;}
.pt21{padding-top:21px;}
.pt22{padding-top:22px;}
.pt23{padding-top:23px;}
.pt24{padding-top:24px;}
.pt25{padding-top:25px;}
.pt26{padding-top:26px;}
.pt27{padding-top:27px;}
.pt28{padding-top:28px;}
.pt29{padding-top:29px;}
.pt30{padding-top:30px;}
.pt31{padding-top:31px;}
.pt32{padding-top:32px;}
.pt33{padding-top:33px;}
.pt34{padding-top:34px;}
.pt35{padding-top:35px;}
.pt36{padding-top:36px;}
.pt37{padding-top:37px;}
.pt38{padding-top:38px;}
.pt39{padding-top:39px;}
.pt40{padding-top:40px;}

.pt100{padding-top:100px;}
.pt150{padding-top:150px;}

.pb1{padding-bottom:1px;}
.pb2{padding-bottom:2px;}
.pb3{padding-bottom:3px;}
.pb4{padding-bottom:4px;}
.pb5{padding-bottom:5px;}
.pb6{padding-bottom:6px;}
.pb7{padding-bottom:7px;}
.pb8{padding-bottom:8px;}
.pb9{padding-bottom:9px;}
.pb10{padding-bottom:10px;}
.pb11{padding-bottom:11px;}
.pb12{padding-bottom:12px;}
.pb13{padding-bottom:13px;}
.pb14{padding-bottom:14px;}
.pb15{padding-bottom:15px;}
.pb16{padding-bottom:16px;}
.pb17{padding-bottom:17px;}
.pb18{padding-bottom:18px;}
.pb19{padding-bottom:19px;}
.pb20{padding-bottom:20px;}
.pb21{padding-bottom:21px;}
.pb22{padding-bottom:22px;}
.pb23{padding-bottom:23px;}
.pb24{padding-bottom:24px;}
.pb25{padding-bottom:25px;}
.pb26{padding-bottom:26px;}
.pb27{padding-bottom:27px;}
.pb28{padding-bottom:28px;}
.pb29{padding-bottom:29px;}
.pb30{padding-bottom:30px;}
.pb31{padding-bottom:31px;}
.pb32{padding-bottom:32px;}
.pb33{padding-bottom:33px;}
.pb34{padding-bottom:34px;}
.pb35{padding-bottom:35px;}
.pb36{padding-bottom:36px;}
.pb37{padding-bottom:37px;}
.pb38{padding-bottom:38px;}
.pb39{padding-bottom:39px;}
.pb40{padding-bottom:40px;}

/* responsive */
.d_none_500{display:none;}
.d_none_480{display:none;}
.d_none_375{display:none;}
.d_none_360{display:none;}
.d_none_330{display:none;}
.d_none_320{display:none;}



/* 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;}

/*230526 클래스 추가 작업 : 신정운 */
.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-left:10px !important; }
.swal2-styled.swal2-confirm {background-color:var(--main) !important;}
.swal2-styled.swal2-confirm:focus {box-shadow: none !important;}
.swal2-popup {width:400px !important;}
input[type="checkbox"]{-webkit-appearance:none; position:relative; width:24px; height:24px; cursor:pointer; outline:none; border:1px solid var(--border); border-radius:4px; top:6px;}
input[type="checkbox"]::before{background-image:url("../img/svg/icon_chk_white.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"]:checked{background-color:var(--main); border:none;}
label { display: block;}
.terms_box { max-height: 200px; overflow-y: auto; white-space: pre-line; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border);
  font-size: 12px; font-weight: 400;}
.label_checkbox span {cursor:pointer;}
.label_checkbox {width:max-content;}
/* popup */
.popup_bg{position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8);  z-index:9999;}
.popup_box{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:334px; padding:20px; border-radius:6px; background-color:var(--white);}
.popup_title{font-size:22px; font-weight:700; text-align:center; margin-bottom:20px; word-break:break-all; color:var(--black); border-bottom:1px solid var(--border); padding-bottom:4px;}
.popup_content{font-size:16px; font-weight:400; max-height:300px; overflow-y:auto; margin-bottom:10px; overscroll-behavior:none;
   word-break:break-all; color:var(--black);  border-bottom:1px solid var(--border); padding-bottom:4px;}
.popup_button_box{display:flex; align-items:center;}
.popup_button_box button{margin-right:20px; font-size:14px;}
.popup_button_box button:last-child{margin-right:0px; background: var(--main);}
.coin_list{width:100%; overflow:hidden;}
.coin_list_no_data{height:68px; text-align:center; border:1px solid var(--border_sub); display:flex; justify-content:center; align-items:center; font-size:18px; font-weight:700; border-radius:6px; box-shadow:1px 1px 2px rgb(226 226 226 / 30%);}
.coin_list li{position:relative; margin-bottom:14px;}
.coin_list li:last-child{margin-bottom:0px;}
.coin_list_info{padding:10px 16px; border:1px solid #efefef; border-radius:6px; box-shadow:1px 1px 2px rgb(226 226 226 / 30%); display:flex; align-items:center; cursor:pointer; position:relative; background-color:#fff; transition:transform 0.3s; color:var(--black);}
.coin_list_info.active { transform: translateX(-240px);}
.coin_list_info .img{flex:none; width:46px; height:46px; margin-right:10px; border:1px solid var(--border); border-radius:50%; display:flex; justify-content:center; align-items:center;}
.coin_list_info .img img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
.coin_list_info .text_area{display:flex; justify-content:space-between; align-items:center; width:100%;}
.coin_list_info .text_area .name{font-size:16px; font-weight:700; color:var(--black);}
.coin_list_info .text_area .amount{font-size:16px; font-weight:700; color:var(--black);}
.coin_list_info .text_area .price{font-size:14px; font-weight:400; color:var(--gray6); text-align:right;}

/* coin_list_button_box */
.coin_list_button_box{display:flex; align-items:center; position:absolute; right:0; top:50%; transform:translateY(-50%);}
.coin_list_button_box button{margin-right:10px; cursor:pointer;}
.coin_list_button_box button:last-child{margin-right:0;}
.coin_list_button { width: 70px; height: 60px; background-color: var(--main); color: var(--white);  font-size: 12px; font-weight: 700; border-radius: 6px;}
.cursor { cursor:pointer; }

/* member */
.member_card{width:100%; padding-top: 20px; background: linear-gradient(to right, #0079fa, #00d980);  border-radius:6px;}
.member_card .id{font-size:20px; font-weight:700; color:var(--white);}
.member_card .amount{font-size:22px; font-weight:700; color:var(--white);}
.member_card .amount b{color:var(--black);}
.member_card_user{display: flex; align-items: center; justify-content: start; padding: 0 20px 20px;}
.mypointbox{padding: 0 20px 10px;}
.esc_list_box{position: relative; padding: 10px 20px;}
.esc_bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #ffffff30; z-index: 20;}
.esc_list_btn{display: flex; align-items: center; gap: 6px; z-index: 30;}
.list_btn{width: 100px; outline: none; border: none; background: #212121; border-radius: 16px; color: var(--white); padding: 6px 16px; font-size: 14px; font-weight: 700; cursor: pointer;}

.member_list{width:100%; padding:16px; border-radius:6px; background-color:var(--sub);}
.member_id{font-size:16px;font-weight:500; color:var(--black);}
.member_cash{font-size:22px; font-weight:700; color:var(--black); padding-bottom:16px; border-bottom:1px solid rgba(242, 242, 242,0.3); word-break:break-all;}
.copy_btn{width:112px; height:40px; margin-top:10px; border-radius:4px; background-color:var(--main); font-size:16px; font-weight:700; color:var(--black);}
  hr.type2 {border: 1px solid #efefef;}


/* wrap */

.wrap.full{display:flex; flex-direction:column; background: var(--white);}
.wrap.full .content{flex:1;}
.wrap.full .header{flex:none;}
.wrap.full .footer{flex:none;}
/* content */
.content{width:100%; overflow:hidden;}
.content_inner{padding:0 20px;}
.label_search { position: relative;}
.label_search img { position: absolute; right: 10px; top: 38px;cursor: pointer;}
.box_gray { padding: 14px 10px; border-radius: 6px; background-color: var(--white); font-size: 14px; font-weight: 400; text-align: center;
  word-break: break-all; color:var(--black);}
  .pin_box {display:flex; align-items: center; justify-content: center; margin-top:30px;}
  .pin_box span { display: block; width: 38px; height: 38px; border-radius: 6px; background-color: var(--grayd); margin-right: 6px;
  position: relative; overflow: hidden; }

  .flex_col_center { display: flex; flex-direction: column; justify-content: center; align-items: center;  }

  /* shopping_list */
  .shopping_list{display:grid; grid-template-columns:repeat(2,1fr); grid-column-gap:20px; grid-row-gap:20px;}
  .shopping_list li a{display:block; border:1px solid var(--graye); border-radius: 6px; padding:10px;}
  .shopping_list li a .img{width:100%; height:0; padding-top:100%; margin-bottom:10px; background-color:#eee; overflow:hidden; position:relative; border-bottom:1px solid var(--grayd)}
  .shopping_list li a .img img{width:100%; height:100%; object-fit:contain; object-position:center; position:absolute; left:0; top:0;}
  .shopping_list li a .title{font-size:16px; font-weight:700; margin-bottom:10px; word-break: break-all; color:var(--black);  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:1; -webkit-box-orient: vertical;}
  .shopping_list li a .price{font-size:16px; font-weight:700; color:var(--black);}
  .shopping_list li a .price .discount{margin-left:10px; font-size:12px; font-weight:500; color:var(--gray8); text-decoration:line-through;}

  /* shopping_view */
  .shopping_product_img{width:100%; height:0; padding-top:56.25%; position:relative;}
  .shopping_product_img img{width:100%; height:100%; position:absolute; left:0; top:0; object-fit:contain; object-position:center;}
  .shopping_product_info {border-bottom:4px solid #e1e1e1;}
  .shopping_product_info .title{font-size:16px; font-weight:700; margin-bottom:20px; word-break: break-all;}
  .shopping_product_info .price{font-size:18px; font-weight:700;}
  .price_span{display: block; margin-top: 5px;}
  .shopping_product_info .price .discount{font-size:12px; font-weight:500; color:var(--gray); text-decoration: line-through; margin-left:6px;}
  .shopping_product_order .amount{display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;}
  .shopping_product_order .amount .text{font-size:14px; font-weight:500;}
  .shopping_product_order .amount .button{display:flex; align-items:center; justify-content:center;}
  .shopping_product_order .total_price{display:flex; justify-content:space-between; align-items:center;}
  .shopping_product_order .total_price .text{font-size:14px; font-weight:500;}
  .shopping_product_order .total_price .price{font-size:18px; font-weight:700;}
  .shopping_product_explain p{margin:20px 0; font-size:14px; font-weight:500;}
  .shopping_product_explain p img{max-width:100%; border:1px solid #efefef; margin-bottom:12px;}
  .button_safe_area{width:100%; height:82px;}
  .bottom_button_box{width:100%; max-width:768px; padding:0 20px 6px 20px; position:fixed; left:50%; bottom:0; transform:translateX(-50%); display:flex; justify-content:center; align-items:center;}
  .bottom_button_box button{display:block;}
  .shopping_product_detail li {border-bottom:1px solid #efefef;}
  .shopping_product_detail ul {border:1px solid var(--white); margin-top:10px; box-shadow: 2px 4px 12px rgba(0,0,0,0.08);}

  /* shopping_history_data */
  .shopping_history_data{width:100%; display:flex; align-items:center;}
  .shopping_history_data a {display:block; width:100%; height:100%;}
  .shopping_history_data a .state{font-size:14px; font-weight:700; margin-bottom:10px;}
  .shopping_history_data a .info{display:flex; justify-content:center; align-items:center;}
  .shopping_history_data a .info .img{flex:none; width:94px; height:94px; margin-right:20px;}
  .shopping_history_data a .info .img img{width:100%; height:100%;}
  .shopping_history_data a .info .text{width:100%;}
  .shopping_history_data a .info .text .title{font-size:16px; font-weight:700; margin-bottom:10px; word-break: break-all;}
  .shopping_history_data a .info .text .option{font-size:14px; font-weight:500; color:#b1b1b1; margin-bottom:10px;}
  .shopping_history_data a .info .text .price{font-size:18px; font-weight:700;}
  .shopping_history_data a .info .text .price .discount{font-size:12px; font-weight:500; color:#b1b1b1; text-decoration: line-through; margin-left:4px;}

  .shopping_history_data {display:block; width:100%; height:100%; padding:20px;}
  .shopping_history_data .state{font-size:14px; font-weight:700; margin-bottom:10px;}
  .shopping_history_data .info{display:flex; justify-content:center; align-items:center;}
  .shopping_history_data .info .img{flex:none; width:94px; height:94px; margin-right:20px;}
  .shopping_history_data .info .img img{width:100%; height:100%;  object-position: center;}
  .shopping_history_data .info .text{width:100%;}
  .shopping_history_data .info .text .title{font-size:16px; font-weight:700; margin-bottom:10px; word-break: break-all;}
  .shopping_history_data .info .text .option{font-size:14px; font-weight:500; color:#b1b1b1; margin-bottom:10px;}
  .shopping_history_data .info .text .price{font-size:18px; font-weight:700;}
  .shopping_history_data .info .text .price .discount{font-size:12px; font-weight:500; color:#b1b1b1; text-decoration: line-through; margin-left:4px;}

  button[type="button"].plus { width: 28px; height: 28px; font-size: 18px; border-radius: 50%; padding: 0; cursor:pointer; }
  button[type="button"].plus.active { background-color: var(--main); color: var(--white); }
  button[type="button"].minus { width: 28px; height: 28px; font-size: 18px; border-radius: 50%; padding: 0; cursor:pointer; color:var(--black); }
  input.shopping_amount { width: 40px; text-align: center; font-size: 16px; font-weight: 700; background: transparent;}
  button[type="button"].minus.active { background-color: var(--main); color: var(--white);}
  .text_list{width:100%; padding:16px; border-radius:6px;}
  .text_list li{display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; margin-bottom:14px;}
  .text_list li:last-child{padding-bottom:0px; margin-bottom:0px; border-bottom:none;}
  .text_list .title{flex:none; font-size:14px; font-weight:500; color:var(--dark_gray);}
  .text_list .desc{font-size:14px; font-weight:700; word-break: break-all; text-align:right;}
  .border{border:1px solid var(--border_sub);}
  .border-top{border-top:1px solid var(--border_sub);}
  .border-bottom{border-bottom:1px solid var(--border_sub);}
  .border-left{border-left:1px solid var(--border_sub);}
  .border-right{border-right:1px solid var(--border_sub);}

  .label_button{display:flex; flex-wrap:wrap; position:relative;}
  .label_button .text, .label .text{display:block; width:100%; font-size:16px; font-weight:700; margin-bottom:10px;}
  .label_button .help{display:block; width:100%; font-size:12px; font-weight:500; margin-top:4px;}
  .label_button input{width:calc(100% - 80px); padding:8px 16px; border-radius:6px; border:1px solid var(--border); font-size:14px; font-weight:500;}
  .label_button input::placeholder{font-weight:400; color:var(--dark_gray);}
  .label_button input[readonly]{background-color:#ededed; font-size:14px; font-weight:400; border:none; color:var(--black);}
  .label_button input[readonly].readonly{border:1px solid var(--border); background-color:#fff; border-radius:6px; font-size:14px; font-weight:500;}
  .label_button .button{width:70px; padding:8px 16px; margin-left:10px; border-radius:6px; border:none; text-align:center; background-color:var(--main); color:var(--white); font-size:16px; font-weight:700; cursor:pointer;}

  /* pagination */
  .pagination{display:flex; align-items:center; justify-content: center; margin-top: 15px; }
  .pagination li{width:26px; height:26px; margin-right:5px;}
  .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(--black);}
  .pagination .page{border-radius:4px; box-shadow: 2px 4px 12px rgba(0,0,0,0.06); background-color: var(--white);}
  .pagination .page.active{border-radius:4px; background-color:var(--main); border: none;}
  .pagination .page.active a{color:var(--white);}
  button[type="button"].payment { border: 1px solid var(--border); background-color: #fff; color: #555; padding:8px 16px; border-radius: 4px;
    font-size: 16px; cursor:pointer;}
  button[type="button"].payment.active { border: 1px solid var(--main); background-color: var(--main); color: var(--white);}
  button[type="button"].cancel { color: var(--white); padding:8px 16px; border-radius: 4px; font-size: 16px; cursor:pointer; background-color: var(--red);}
  button[type="button"].main { background-color: var(--main); color: var(--white); padding:8px 16px; border-radius: 4px; font-size: 16px; cursor:pointer;}

/* mylist_profile */
  .mylist_profile{width:100%;}
  .mylist_profile .img{width:60px; height:60px; border-radius:50%; overflow:hidden; margin:0 auto 12px;}
  .mylist_profile .img img{display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
  .mylist_profile .name{font-size:14px; font-weight:500; color:var(--dark_gray); margin-bottom:4px; text-align:center;}
  .mylist_profile .email{font-size:16px; font-weight:700; text-align:center;}
  .my_list{width:100%;}
  .my_item{width:100%; height:62px; padding:0 20px; border-top:1px solid var(--light_gray); border-bottom:1px solid var(--light_gray);}
  .my_link{display:flex; justify-content:space-between; align-items:center; width:100%; height:100%; font-size:16px; font-weight:700;}
  .my_link:after{content:""; display:block; width:24px; height:24px; background:url("../../assets/img/svg/icon_more.svg") no-repeat center;}
  .my_item:not(:first-child){border-top:none;}
  .my_link { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; font-size: 16px;
    font-weight: 700;}
  .my_item:not(:first-child) { border-top: none;  }
  .my_item { width: 100%; height: 62px; padding: 0 20px; border-top: 1px solid var(--light_gray);
    border-bottom: 1px solid var(--light_gray); }
  .pb30 { padding-bottom: 30px;}
  .pt46 {padding-top: 46px; }

  /* inquiry_tab */
  .inquiry_tab{display:flex; justify-content:center; align-items:center;}
  .inquiry_tab li{width:100%; height:60px; border-bottom:2px solid var(--light_gray);}
  .inquiry_tab li a{display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:16px; font-weight:700;}
  .inquiry_tab .active{border-color:var(--main);}
  .textarea_box { width: 100%; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--border); font-size: 14px; font-weight: 500;
    height: 412px; margin-top: 10px; resize: none;}
  .inquiry_list li a .title { font-size: 16px; font-weight: 700; margin-bottom: 10px; word-break: break-all; }
  .inquiry_list li a .state.wait { color: var(--red);}
  .inquiry_list li a .state { font-size: 16px; font-weight: 700; }
  .inquiry_list li a .date { font-size: 14px; font-weight: 400; color: var(--gray);}
  .inquiry_list li:first-child a { padding-top: 0px; }
  .inquiry_list li a { display: block; width: 100%; padding: 20px 0;}
  .inquiry_list li { width: 100%; border-bottom: 1px solid var(--border_sub);}
  .inquiry_list li a .state.complete {color: var(--green);  }

  .button_box { display: flex; align-items: center;  }
  /* exchange_list */
  .exchange_list{width:100%; overflow:hidden;}
  .exchange_list_no_data{height:68px; text-align:center; border:1px solid var(--border_sub); display:flex; justify-content:center; align-items:center; font-size:18px; font-weight:700; border-radius:6px; box-shadow:1px 1px 2px rgb(226 226 226 / 30%);}
  .exchange_list li{position:relative; margin-bottom:14px;}
  .exchange_list li:last-child{margin-bottom:0px;}
  .exchange_list_info{padding:10px 16px; border:1px solid var(--border_sub); border-radius:6px; box-shadow:1px 1px 2px rgb(226 226 226 / 30%); display:flex; align-items:center; cursor:pointer; position:relative; background-color:#fff; transition:transform 0.3s; display:flex; justify-content:space-between; align-items:center;}

  .exchange_list_info .from{flex:none; width:calc(50% - 20px); padding:0 10px;}
  .exchange_list_info .to{flex:none; width:calc(50% - 20px); padding:0 10px;}

  .exchange_list_info .arrow{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}

  .exchange_list_info .img{width:46px; height:46px; padding:6px; margin:auto; border:1px solid var(--border); border-radius:50%; display:flex; justify-content:center; align-items:center;}
  .exchange_list_info .img img{display:block; width:100%; height:100%; object-fit:contain; object-position:center;}
  .exchange_list_info .text{font-size:16px; font-weight:700; text-align:center;}

  .exchange_list_info.active{transform:translateX(-170px);}
  /* exchange_list_button_box */
  .exchange_list_button_box{display:flex; align-items:center; position:absolute; right:0; top:50%; transform:translateY(-50%);}
  .exchange_list_button_box button{margin-right:10px;}
  .exchange_list_button_box button:last-child{margin-right:0;}
  button[type="button"].exchange_list_button { width: 70px; height: 60px; background-color: var(--main); color: var(--black); font-size: 12px;
  font-weight: 700; cursor:pointer;}
  .exchange_list_button_box button { margin-right: 10px; }
  .mb50 { margin-bottom: 50px;}


  /* send_main */
  .send_main_card{width:100%; border:1px solid var(--border_sub); border-radius:10px; box-shadow:1px 1px 2px rgba(226,226,266,0.3); overflow:hidden; transition:all 0.3s;}
  .send_main_card a{display:block; width:100%; height:100%;}
  .send_main_card a span{display:block;}
  .send_main_card a .img{height:160px; border-bottom:1px solid #fff; display:flex; justify-content:center; align-items:center; }
  .send_main_card a .text{height:52px; line-height:52px; font-weight:700; text-align:center; background-color:var(--main); color:var(--white);}
  .send_main_card:hover{background-color:var(--main);}
  .send_main_card a .img { height: 160px; border-bottom: 1px solid #fff; display: flex; justify-content: center; align-items: center;}

  /* wallet_address */
  .qr_img_box{width:160px; height:160px; margin:auto; border:2px solid var(--border); border-radius:6px; display:flex; justify-content:center; align-items:center;}
  .qr_img_box .qr{width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; object-position: center;}
  .clipboard_guide_text.active{opacity:1;}
  .clipboard_guide_text{font-size:20px; font-weight:700; text-align:center; opacity:0; transition:all 0.3s;}

  /* qr_send_code */
  .qr_img_area{width:220px; height:220px; border:2px dashed #d4d4d4; border-radius:20px; margin:auto; }
  .code_box{padding:10px 16px; border:1px solid var(--border); border-radius:6px; width:fit-content; margin:auto;}

  .dark_bg {display: none; position: fixed; width: 100%; max-width:768px; height: 100%; left:50%; top:0; transform:translateX(-50%); background-color: rgba(0,0,0,0.5); z-index: -1;}
  .dark_bg.active {display: block; z-index: 550;}
  .sidebar_cont {position: fixed; left:-100px; top:50%; transform:translateY(-50%); width:300px; height: 100%!important; max-height: 100%; background-color:#242734; color: var(--black);
    z-index:-1; opacity: 0; transition: 200ms ease; overflow-y: auto!important;}



  .sidebar_cont.active {left: 0; opacity:1; z-index:999; transition: 200ms ease;}
  .sidebar_inner {position: absolute; width: 100%;top: 0;left: 0;}
  .my_info {padding:20px; border-radius:10px; background-color: var(--gray); }
  .home_btn { padding:15px 20px;}
  .sidebar_menu > li { border-radius:10px;}
  .sidebar_menu > li.active { background-color: #555555;}
  .sidebar_menu_tit { padding: 15px 20px;}
  .sub_menu {display: none;}
  .sub_menu > li > a { padding:10px 20px 12px 22px; color: var(--white);}
  .categorybox {display: flex; justify-content: space-between; align-items: center; width:100%; padding:10px; cursor:pointer; border-bottom:1px solid #212121;}
  .not_cursor {cursor:inherit;}
  input[type="radio"]{-webkit-appearance:none; width:16px; height:16px; border:2px solid var(--border); border-radius:50%; flex:none; cursor:pointer; position: relative; top:2px;}
  input[type="radio"]:checked{-webkit-appearance:none; border:2px solid var(--main); border-radius:50%;}
  input[type='radio']:before {content:''; display:block; width:50%; height:50%;margin:25% auto; border-radius:50%;}
  input[type='radio']:checked:before {background:var(--main);}
  .parcel_wrap li {width:49%; text-align: center;}
  .same {position: relative; top:1px !important;}
  .logouticon img { display:block; width:28px; }

  /* 배송지 선택팝업 */
  .choice_listparcel {display: flex; align-items: flex-start; width:max-content; cursor:pointer;}
  .modal_box { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: calc(100% - 20px);
    max-width:767px;padding: 20px; border-radius: 6px; background-color: var(--white); }
  .defalut_parcel {color:var(--red9); font-weight: 700; font-size:14px; margin-left:10px;}
  .percel_listbox {border: 1px solid var(--grayb); padding:10px; margin-bottom:10px; cursor:pointer;}
  .percel_listbox p {padding:4px 0;  word-wrap: break-word; word-break: keep-all;}
  .percel_listbox p:first-child {padding:0;}
  .percel_listbox input[type="radio"] {position: relative; top:6px;}
  .modal_box img {display: inline-block; position: relative; top:2px;}
  .plus_addrtitle {display: block; padding-bottom:6px; color:var(--red); font-size:17px; cursor:pointer; width:max-content;}
  .swal2-container {z-index:100000 !important;}
  /* .total_pop .modal_box { background-color: #242734; height:100svh; height:100vh;} */
  .total_pop .modal_box {  max-height: 91vh; overflow: hidden;  background-color: var(--white);}
  .total_pop .popup_title {color:var(--black); }
  .choice_percel { display:flex; justify-content: space-between; align-items: center; margin-top:6px;}
  .choice_percel button { color:var(--black); outline:none; border:none; padding:6px 12px; font-size:14px; font-weight: 500;
    border-radius: 4px; cursor:pointer; height:32px;}
  .choice_percel button:nth-child(1) { background: var(--red9); color:var(--white); }
  .choice_percel button:nth-child(2) { background: var(--main); color:var(--white);}
  .pay_wrappop .modal_box{ background-color: #fff;}
  .delivery_wrappop .modal_box, .deliverymodify_wrappop .modal_box{ background-color: var(--white);}
  .delivery_wrappop .popup_title {color:var(--black);}

  .pay_wrappop .popup_content, .delivery_wrappop .popup_content, .deliverymodify_wrappop .popup_content  {max-height:520px;}
  .deliverymodify_wrappop .popup_title {color:var(--black);}
  .popup_button_box button:last-child.delete_post { background: var(--red); color:var(--white);}
  .deliverymodify_wrappop .popup_button_box button:nth-child(2) {background: var(--red9); color:var(--white);}
  .change_design { outline: none; border: none; padding: 6px 12px; font-size: 14px; font-weight: 500; border-radius: 4px; cursor: pointer; height: 32px; background: var(--main); color:var(--white);  }
  .choice_boxdelivery .popup_title {margin-bottom:20px;}
  .choice_boxdelivery img {position: absolute; top:30px; right:24px; cursor:pointer; }
  .total_percel_wrap {margin-bottom:20px;  max-height: 90vh; max-height: 90svh;  }
  .total_pop .popup_content {max-height: 80svh; max-height: 80vh; height:100svh; height:100vh; scrollbar-width: none;
  -ms-overflow-style: none; border-bottom:none;}
.total_pop .popup_content::-webkit-scrollbar { display: none;}


  /*//배송지*/

  /*배송지 추가*/
  .receiver_box { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-box);}
  .receiver_box li { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; margin-bottom: 14px;
    border-bottom: 1px solid var(--border);}
  .receiver_box li p:nth-child(2) { text-align: right;  }
  .receiver_box li:last-child {border-bottom:0; margin-bottom:0; padding-bottom:0;}
  .shipping_address { width: 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-box); cursor:pointer;}
  .shipping_addressimg { width:100%;text-align: center;  }
  .shipping_addressimg img { width:44px; }
  select.design.width_select_unset {width:unset;}
  .stploginlogo img {  max-width:100%; }
  .headerstp_logo img {height:30px; display: block;}


  .login_btn {background: var(--white); color:var(--black); padding:6px 20px; border-radius: 4px; font-size: 15px; cursor:pointer;
    font-weight: 700; }
  .login_center {height:calc(100vh - 50px); height:calc(100svh - 50px);}
  .header_not {border-bottom:1px solid #f1f3f5; background: var(--white);}



/*230609 신규 작업*/
.shopping_product_explain p:nth-child(2) {color:#fff !important;}


/*230612 신규작업 */
 .depthwrap { position: fixed; left:0; right:0; top:0; bottom:0; margin:auto; width:100%; height: 100vh; height: 100svh; max-width:768px; background-color:#242734; color: var(--black);
   z-index:-1; transition: 200ms ease; opacity:0; display: flex; flex-direction: column;}
.depthwrap.active { opacity:1; z-index:999; transition: 200ms ease;}
.depth_01 {width:100%; max-width:150px; overflow: scroll; max-height: calc(100vh - 80px); border-right:1px solid #555; max-height: calc(var(--vh, 1vh) * 100 - 80px); }
.depth_01 p, .depth_02 p {font-size:14px;}
.depth_02 {width:100%; overflow: scroll; max-height: calc(100vh - 80px); max-height: calc(var(--vh, 1vh) * 100 - 80px); }
.categorybox.active {background: #00d980;}
.categorybox_details {  display: flex; justify-content: space-between;  align-items: center; width: 100%; padding: 10px; cursor: pointer; border-bottom: 1px solid #37393b;}
.categorybox_details.active {background:#00d980;}
.categorybox_details.active p {color:var(--white);}
.close_img {display: flex; justify-content: flex-end; cursor:pointer; background: var(--main); flex:none; color:var(--white); border-radius: 6px; padding:8px 12px; margin-left:10px;}
.seearch_imgshop {right: 10px;}
.copyright_box {font-size:12px; padding:10px; display: grid; grid-template-columns: repeat(2,1fr); }
.copyright_box .title_copy { flex:none; width:90px;}
.stp_tel a{margin-right:10px;}
.stp_tel a:last-child{margin-right:0;}
.copyright_box li {margin-bottom:4px; border-bottom:1px solid #474646; padding-bottom:4px; border-right:1px solid #474646; padding-left:4px;}
.copyright_box li:nth-child(odd) { padding-left:0;}
.copy_title {font-size:12px; text-align: center; padding-bottom:10px;}

.point_save { display: flex; align-items: flex-end; width:100%;}
.point_save label {display: inline-block; width:100%;}
.point_save button {flex:none; margin-left:10px;}

.container_itemDes, .bullet_point {width:100% !important; word-wrap: break-word; word-break: keep-all;}
.payment_paypop {position: relative; overflow: auto; height:90%; min-height: 90%;}
.pop_payclose { position: absolute; top:20px; right:50px;  z-index:10000;}
.pop_payclose img {cursor:pointer; width:max-content; position: relative;}
.user_levelbox { font-weight: 700; background: var(--black); padding:4px 10px; border-radius: 6px; flex:none;}
.price_sv {color:var(--main); font-weight: 700; margin-top:4px;}
.kakao_linkview {text-align: right; display: flex; justify-content: flex-end; align-items: center;}
.kakao_linkview_wrap {width:max-content;}

.loginwrapbox {display: flex; flex-direction: column; justify-content: center; height:100%; padding:0 20px; width:100%; max-width:767px; margin:0 auto; background: var(--white);}
.hanwool_logo {display: flex;align-items: center;}
.hanwool_logo img {width:34px; margin-right:4px; display: block;}
.hanwoollogobox { background-color: #fff;  width: 32px;height: 32px;border-radius: 50%; display: flex;
    justify-content: center; align-items: center; padding:2px; margin-right:10px;}
.hanwoollogobox img {max-width:100%; display: block;}

.cardbox { border-radius:var(--radius-box); box-shadow:2px 4px 12px rgba(0,0,0,0.06);}
.mypoint {color:var(--white); font-weight: 700; font-size:22px;}
/* media query */


@media all and (min-width:769px){
.sidebar_cont { left: calc((100% - 768px) / 2); }
.sidebar_cont.active {left: calc(50% - 384px);}
.sidebar_cont.active::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}

.percel_listbox:hover { background: #f1f3f5; }
}

@media all and (max-width:767px){
  .stploginlogo img {max-width:75%;}
  select.design.width_select_unset {width:100%;}
  .copyright_box li:nth-child(even) {padding-left:0;}
  .copyright_box {grid-template-columns: repeat(1,1fr); }
  .login_logo {padding-top:20px;}
  .loginwrapbox {padding-bottom:40px;}
}



/*@@@@@@@@@@@@@@@@@@@@@ 태블릿 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width:768px) and (max-width:1024px){


}

/*@@@@@@@@@@@@@@@@@@@@@ 모바일 가로 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width:481px) and (max-width:767px){
  .direct_link_list{width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:10px;}
  .direct_link_list li a img{display:inline-block; width:34px; margin-left:auto;}

  /* 브라우저 최대로 줄였을 떄*/
  @media all and (max-width:500px){
    .direct_link_list{width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:10px;}
    .direct_link_list li a img{display:inline-block; width:34px; margin-left:auto;}
    .send_card_list li { flex-direction: column; align-items: flex-start; }
    .text_card_list li{display:block;}
    .text_card_list .title{margin-bottom:10px;}
    .d_none_500{display:block;}
    .mypointbox {flex-wrap:wrap;}
    .mypointbox .id {width:100%;}

  }
}


/*@@@@@@@@@@@@@@@@@@@@@ 모바일 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width:320px) and (max-width:480px){
  .direct_link_list{width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:10px;}
  .direct_link_list li a img{display:inline-block; width:34px; margin-left:auto;}
  .send_card_list li { flex-direction: column; align-items: flex-start; }
  .text_card_list li{display:block;}
  .text_card_list .title{margin-bottom:10px;}
  .direct_link_list li{aspect-ratio:1/1;}
  .coin_list_info{flex-direction: row-reverse; gap: 20px;}
  .coin_list_info .img{margin-right: 0;}
  .coin_list_info .text_area{flex-direction:column; justify-content:center; align-items:flex-start;}
  .coin_list_info .text_area .price{text-align:left;}
  .d_none_500{display:block;}
  .d_none_480{display:block;}
  .d_none_375{display:block;}
  .d_none_360{display:block;}
  .d_none_330{display:block;}
  .d_none_320{display:block;}
  .shopping_list li a .price .discount {width:100%; margin-left:0;}
  .receiver_box li {display: block;}
  .receiver_box li p:nth-child(2) {text-align: left;}
  .receiver_box li p:nth-child(1) {margin-bottom:6px;}
  .mlabel span.text {display:block; width:100%; margin-bottom:6px;}
  .mlabel {flex-wrap:wrap;}
}

@media all and (max-width:360px) {
  .esc_list_btn{flex-direction: column; gap: 6px; z-index: 30;}
  .list_btn{width: 80px; font-size: 12px; font-weight: 700;}
}

@media all and (max-width:340px) {
  .direct_link_list .direct_txt { font-size: 14px; }
  .direct_link_list li a img{display:inline-block; width:34px; margin-left:auto;}
}

@media all and (max-width:320px) {
  .direct_link_list{width:100%; display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:10px;}
  .coin_list_info{flex-direction: row-reverse; gap: 20px;}
  .coin_list_info .img{margin-right: 0;}
  .coin_list_info .text_area{flex-direction:column; justify-content:center; align-items:flex-start;}
  .coin_list_info .text_area .price{text-align:left;}
}
