*{margin:0; padding:0; box-sizing:border-box; font-family:'noto_sans', sans-serif; color:#fff;}
body{margin:0; padding:0; background-color:#08091B;}
li{list-style:none;}
a:link, a:visited{text-decoration:none;}
select, input, textarea, button, hr{border:none; outline:none;}
table{border-spacing:0px; border-collapse:collapse; width:100%; padding: 0; border: 0;}

/* 색상 변수 설정 */
:root {
  --body_bg : #08091B;
  --container_bg : #0a0b20;
  --header_bg : #0a0b20;
  --card_bg : #10122D;
  --bottom_tab_bg : #0a0b20;
  --gradient : linear-gradient(-225deg, #2F9BCC, #50418C);
  --main_blue : #2F9BCC;
  --hr_bg : #10122D;

  /* color */
  --main : #FF8800;
  --sub : #FFAA00;
  --white : #FFF;
  --black : #000;
  --red : #F00;
  --red9 : #900;
  --orange : #F80;
  --yellow : #FF0;
  --green : #0F0;
  --green9 : #090;
  --blue : #00F;
  --blue9 : #009;
  --blue8 : #0e6f9c;
  --purple : #90f;
  --pink : #f0f;
  --grayd : #ddd;
  --grayc : #ccc;
  --grayb : #bbb;
  --graya : #aaa;
  --gray9 : #999;
  --gray8: #888;
  --gray7 : #777;
  --gray6 : #666;
  --gray5 : #555;
  --gray4 : #444;
  --gray3 : #333;

  /* item */
  --btn : #efefef;

  /* function */
  --warning : #f34;
  --confrim : #65f;
  --excel : #292;
  --active : #FF8800;
  --inactive : #ccc;
  --disabled : #999;

  /* bootstrap */

  /* background-color */
  --bg : #efefef;
  --bg2 : #fafbfa;

  /* border color */
  --line : #f1f1f1;
  --line2 : #fafafa;
  --line3 : #fbfbfb;

  /* box-shadow */
  --shadow : 1px 2px 4px rgba(0,0,0,0.08);

  /* radius */
  --radius-box : 10px;
  --radius-card : 8px;
  --radius-btn : 6px;

  /* border */
  --border : rgba(255,255,255,0.5);

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

/*
  [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; margin:0 auto; background-color:#0a0b20;} */
.wrap {width:100%; max-width:768px; margin:0 auto;}
.wrap.wide{max-width:100%;}

/* header */
.header{width:100%;}
.header_common_safe_area{width:100%; height:50px;}
.header_common_layout{width:100%; max-width:768px; height:50px; padding:0 20px; border-bottom:1px solid var(--border); position:fixed; left:50%; top:0; transform:translateX(-50%); background-color:var(--header_bg); z-index:998; display:flex; justify-content:center; align-items:center;}
.header_logo{font-size:18px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.header_title{ display:flex; justify-content: center; align-items: center; font-size:18px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.header_title img { width:30px; height:30px; object-fit: cover; display: block; margin-right: 5px;}
.header_left{margin-right:auto;}
.header_left img{display:block; width:27px;}
.hamburger .line { width: 25px; height: 2px; background-color: var(--white); display: block; margin: 5px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.hamburger:hover { cursor: pointer; }



.header_left.back img{width:12px;}
.header_right{margin-left:auto;}
.header_right img{display:block; width:24px;}
/* container */
.container{width:100%; min-height:calc(100svh - 50px);}
.container.no_footer{min-height:calc(100svh - 50px);}
.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;}
label.design small{display:inline-block; width:100%;}

/* input */
input.design{width:100%; padding:8px 16px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-weight:500; color:#000 !important; background-color:#fff;}
input.design::placeholder{font-size:14px; font-weight:500; color:#999;}

input.design:read-only{background-color:#666; color:#fff !important;}
input.not_readonly:read-only{background-color:#fff; color:#000 !important;}

input.design:disabled{background-color:#666;}
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:1px solid var(--border); border-radius:6px; font-size:14px; font-weight:500; color:#000 !important; background-color:#fff;}
select.design option{color:#000 !important;}

/* textarea */
textarea.design{width:100%; padding:8px 16px; border:1px solid var(--border); border-radius:6px; font-size:14px; font-weight:500; color:#000 !important; background-color:#fff; resize:none;}

/* button */
button.design{width:100%; height:50px; background:var(--gradient); border-radius:var(--radius-btn); font-size:16px; font-weight:700; cursor:pointer;}
button.design:disabled{background:#999;}
button.design.red{background-image:none; background-color:var(--red9);}
button.design.gray{background-image:none; background-color:var(--gray9);}
button.design.blue{background-image:none; background-color: var(--blue8);}
button.design.small{width:auto; height:38px; padding:0 16px; font-size:14px;}

.btn{width:100%; height:50px; background:var(--gradient); border-radius:var(--radius-btn); font-size:16px; font-weight:700; cursor:pointer; display:inline-flex; justify-content:center; align-items:center;}
.btn.small{width:auto; height:38px; padding:0 16px; font-size:14px;}
/* hr */
hr.design{border-top:10px solid var(--border);}

/* 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 */
.info_card{padding:20px; background:var(--card_bg); border-radius:var(--radius-box);}
.info_card .title{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.info_card .title img{width:50px; height:50px; border-radius:50%; background-color:#fff;}
.info_card .amount{margin-bottom:10px; font-size:22px; font-weight:700; font-family:"montserrat";}
.info_card .desc{font-size:14px; font-weight:500;}
.info_card.border_blue { border:2px solid var(--blue8); }
/* direct_link_list */
.direct_link_list{width:100%; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows: 1fr; gap:10px;}
.direct_link_list li a{width:100%; height:100%; padding:10px; border:1px solid var(--border); border-radius:var(--radius-box); font-size:16px; font-weight:700; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.direct_link_list li a img{width:68px;}
/* 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_blue);}
/* .qna_tab .active a{color:var(--main_blue);} */
.qna_list{width:100%;}
.qna_list li{box-shadow: var(--input-shadow);}
.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;}

/* send_card_list */
.send_card_list { width: 100%; padding: 16px; border: 1px solid var(--border); font-size: 14px; border-radius: 6px; }
.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 #ddd; }
.send_card_list li:last-child { margin-bottom: 0; border: none; padding: 0; }


/* text_card_list */
.text_card_list{width:100%; padding:16px; border:1px solid var(--border); border-radius:6px;}
.text_card_list li{display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border);}
.text_card_list li:last-child{padding-bottom:0px; 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{padding:10px 0 20px; font-size:38px; font-weight:700; text-align:center; font-family:"montserrat";}

/* 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); }
.notice_list li a{width:100%; padding:20px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.notice_list li a .title{font-size:16px; font-weight:700;}
.notice_list li a .date{font-size:14px; font-weight:500; flex:none;}

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

.type2 { border:1px solid #f1f3f5; margin:20px 0; }
.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;}

/* 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;  padding:14px 0;}
.table_wrap table th { border-bottom:1px solid #ededed; padding:10px; white-space: nowrap; }
.table_wrap table td { text-align: center; padding:10px; border-bottom:1px solid #ededed; white-space: nowrap; }

/* page : purchase */
.purchase_tab{display:flex; justify-content:center; align-items:center; gap:20px;}
.purchase_tab li{width:100%; height:34px; border-radius:100vw; background:var(--gray9); font-size:14px; font-weight:700; color:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer;}
.purchase_tab .active{background:var(--gradient)}

/* swal */
.swal2-container.swal2-center>.swal2-popup{background-color:var(--card_bg) !important;}
.swal2-title{font-size:22px !important;}
.swal2-styled.swal2-confirm{background:var(--gradient) !important;}

/* 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(--gradient); 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(--gradient); border-radius: 4px; font-family: 'Montserrat', sans-serif; color: #fff; }
.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; border-bottom:1px solid #fff;}
.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{width:100%; max-width:768px; height:70px; padding:10px 20px; border-top:1px solid var(--border); position:fixed; left:50%; bottom:0; transform:translate(-50%,0); background-color:var(--bottom_tab_bg);}
.bottom_tab ul{display:flex; justify-content:space-between; align-items:center;}
.bottom_tab ul li a{display:flex; flex-direction:column; align-items:center; gap:8px; font-size:12px;}
.bottom_tab ul li a img{width:24px; height:24px;}
.bottom_tab ul .active a{color:var(--main_blue);}

/* tree */
/*tree*/
.seearch_img { position: absolute; top: 50%; right: 10px; 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 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: 120px; 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:#c3c3c3;
  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:4px 0; font-size:12px; 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_blue); }
.tree1 li a div:hover, .tree1 li a:hover+ul li a div { border: 2px solid var(--main_blue); cursor:pointer; }
.tree1 li a div:hover > p:nth-child(1) { background:linear-gradient(165deg, var(--main_blue) 0%, var(--main_blue) 100%); }
.tree1 li a:hover+ul li a div p:nth-child(1) { background:linear-gradient(165deg, var(--main_blue) 0%, var(--main_blue) 100%); }


/* market table 수정작업 : NBR */
.market_table_box { padding: 6px 20px; background-color: var(--card_bg); display: flex; justify-content: space-between; align-items: center;}
.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 > div { padding: 0 20px; background: rgb(0,172,238); background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%); position: absolute; width: 100%; height: 40px; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); border-radius: 5px; 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) { box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; -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) { box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); }
.marketplace_list.active > div:nth-child(2) { opacity: 0; box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); color: transparent; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); } */
.marketplace_list button { width: 70px; height: 30px; font-size: 15px; }


/* 23.05.04 sidebar - NJH */
.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: 1100;}
.sidebar_cont {position: fixed; left:-100px; top:50%; transform:translateY(-50%); width:300px; height: 100%!important; max-height: 100%; background-color: var(--container_bg); color: var(--white); z-index:-1; opacity: 0; transition: 200ms ease; overflow-y: auto!important;}
.sidebar_cont.active {left: 0; opacity:1; z-index:1200; transition: 200ms ease;}
.sidebar_inner {position: absolute; width: 100%;top: 0;left: 0;  padding: 20px;}
.my_info {padding:20px; border-radius:10px; background-color: var(--blue8); }
.home_btn { padding:15px 20px;}
.sidebar_menu > li { border-radius:10px;}
.sidebar_menu > li.active { background-color: var(--border);}
.sidebar_menu_tit { padding: 15px 20px;}
.sub_menu {display: none;}
.sub_menu > li > a { padding:10px 20px 12px 22px; color: var(--white);}
.sidebar_cont { -ms-overflow-style: none; scrollbar-width: none; }
.sidebar_cont::-webkit-scrollbar { display:none; }

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

/* display */
.d_none{display:none;}
.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: 1px solid var(--line); }

/* flex */
.flex_none{flex:none;}
.flex_1{flex:1;}
.flex {display: flex;}
.flex_start{display:flex; justify-content:flex-start; 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-direction */
.flex_dir_col{flex-direction:column;}

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

/* cursor */
.pointer{cursor:pointer;}

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

/* color */
.color_red{color:var(--red);}
.color_green{color:var(--green9);}
.color_blue{color:var(--blue);}

.text_red{color:var(--red);}
.text_green{color:var(--green9);}
.text_blue{color:var(--blue);}

/* background-color */
.bg_red{background-color:var(--red);}

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

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

/* border_bottom */
.border-bottom { border-bottom: 1px solid var(--border); } 


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

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



/* media query */

/*@@@@@@@@@@@@@@@@@@@@@ 태블릿 @@@@@@@@@@@@@@@@@@@@@*/
@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;}

  /* 브라우저 최대로 줄였을 떄*/
  @media all and (max-width:500px){
    .direct_link_list{width:100%; display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:10px;}
    .send_card_list li { flex-direction: column; align-items: flex-start; }
    .text_card_list li{display:block;}
    .text_card_list .title{margin-bottom:10px;}
  }
}

/*@@@@@@@@@@@@@@@@@@@@@ 모바일 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width:320px) and (max-width:480px){
  .direct_link_list{width:100%; display:grid; grid-template-columns:repeat(2,1fr); grid-auto-rows:1fr; gap:10px;}
  .send_card_list li { flex-direction: column; align-items: flex-start; }
  .text_card_list li{display:block;}
  .text_card_list .title{margin-bottom:10px;}
}