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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

/* 색상 변수 설정 */
:root {
  --body_bg : #fff;
  --container_bg : #d7e5fa;
  --header_bg : #fff;
  --card_bg : #fff;
  --bottom_tab_bg : #fff;
  --wrap_bg : #f9f9f9;
  --gradient : linear-gradient(-225deg, #2F9BCC, #50418C);
  --main_blue : #2F9BCC;
  --hr_bg : #ccc;

  /* color */
  --main : #2880FE;
  --sub : #a2c7fa;
  --black : #0a0b20;
  --white : #fff;
  --red : #F00;
  --red9 : #900;
  --orange : #F80;
  --yellow : #FF0;
  --green : #0F0;
  --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;

  /* 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 : #f1f1f1;
  --line2 : #fafafa;
  --line3 : #fbfbfb;

  /* placeholder */
  --placeholder :  rgba(34,34,34,.4);

  /* box-shadow */
  --shadow : 1px 2px 4px rgba(0,0,0,0.08);
  --card-shadow : 2px 4px 12px rgba(0,0,0,0.06);
  --input-shadow :  0 2px 8px 0 rgba(0,0,0,.05);
  --textarea-shadow : 0 2px 8px 0 rgba(0,0,0,.05);
  --select-shadow : 0 2px 8px 0 rgba(0,0,0,.05);

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

  /* border */
  --border : var(--main);
  --input-border :  solid 1px #e6e6ea;
  --textarea-border : solid 1px #e6e6ea;
  --select-border : solid 1px #e6e6ea;

  /* font */
  --kor: 'noto_sans', sans-serif;
  --eng: 'montserrat';
}

/*
  [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; height: 100svh; margin:0 auto; background-color:var(--wrap_bg); position:relative;}
.wrap.wide{max-width:100%;}

/* test */
#toggle{
    display: inline-flex;
    border-radius: 10px;
    padding: 2px;
    background-color: var(--main);
}
#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(--main);
    color: var(--black);
    transition: all 0.3s ease-in-out;
}

/* 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; color: var(--main); display:flex; justify-content: center; align-items: center;}
.header_logo img { width:30px; height:30px; object-fit: contain; display: block; margin-right: 5px;}
.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(--main); 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.footer{min-height:calc(100svh - 120px);}
.container.footer2{min-height:calc(100svh - 170px);}
.container.footer3{min-height:calc(100svh - 140px);}
.container.footer4{min-height:calc(100svh - 100px);}
.container.promo{min-height:calc(100svh - 170px); background-color: var(--wrap_bg); padding-bottom: 10px;}
.container.company{min-height:calc(100svh - 170px); background-color: var(--wrap_bg); padding-bottom: 10px;}
.container.no_header{min-height:calc(100svh - 70px);}
.container.only_container{min-height:100svh;}


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

/* Components CSS */

/* label */
label.design{display:inline-block; width:100%; height: 85px; font-size:16px; font-weight:500;}
label.design small{display:inline-block; width:100%;}

/* input */
input.design{width:100%; height: 50px; padding: 0 25px; box-shadow:var(--input-shadow); border:var(--input-border); border-radius:6px; font-size:16px; font-weight:500; font-family: "Noto Sans KR", sans-serif;}
input.design::placeholder{font-size:16px; font-weight:400; color:var(--placeholder);}

input.design:read-only{background-color:var(--graye); color:var(--black) !important;}
input.not_readonly:read-only{background-color:var(--white);}

input.design:disabled{background-color:var(--graye);}
input.not_disabled:disabled{background-color:var(--white);}

/* 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:var(--line); 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:var(--grayc);}
label.checkbox input:checked + .icon{background:var(--main);}
label.checkbox input:checked + .icon::after{color:var(--black);}
label.checkbox input:checked ~ .text{color:var(--black) !important;}

/* select */
/* select.design{width:100%; padding:12px 25px; box-shadow:var(--select-shadow); border:var(--select-border); border-radius:var(--select-radius); background-color:var(--white); font-size:16px; font-weight:400; position:relative; }
select.design::before{content:""; display:block; width:14px; height:14px; border-top:1px solid var(--black); border-right:1px solid var(--black); position:absolute; top:50%; right:10px; transform:translateY(-50%);} */
label:has(select.design){position:relative;}
label:has(select.design) select.design{width:100%; padding:12px 25px; box-shadow:var(--select-shadow); border:var(--select-border); border-radius:var(--select-radius); background-color:var(--white); font-size:16px; font-weight:400;}
/* label:has(select.design)::before{content:""; display:block; width:8px; height:8px; border-bottom:2px solid var(--black); border-right:2px solid var(--black); position: absolute; top:58%; right:20px; transform: translateY(-50%) rotate(45deg);} */
.select_design_arrow{width:20px; height:20px; position: absolute; top:50%; right:14px; transform: translateY(-50%); background: url(../img/svg/icon_arrow_down.svg);}
.select_design_arrow.send{top:58%;}
.select_design_arrow.sendh{top:46%;}

/* textarea */
textarea.design{width:100%; padding:12px 25px; box-shadow:var(--textarea-shadow); border:var(--textarea-border); border-radius:var(--select-radius); font-size:16px; font-weight:500; resize:none; font-family: "Noto Sans KR", sans-serif;}
textarea.design::placeholder{font-size:16px; font-weight:400; color:var(--placeholder);}

/* button */
button.design{width:100%; height:50px; 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);}
.link_btn { width:max-content; padding:0 20px; height:40px; background:var(--sub); border-radius:var(--radius-btn); font-size:16px; font-weight:500; cursor:pointer; }
.btn{width:100%; height:50px; background:var(--main); border-radius:var(--radius-btn); font-size:18px; 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); color: var(--white);}
.btn.small.register{height: 47px;}
.btn.disabled{border:solid 1px rgba(0,0,0,.05); background-color:#e6e6ea; color:#fff;}
/* 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 */
.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; align-items: center; }
.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 .amount{ display: flex; justify-content: flex-end; align-items: center; font-size:22px; font-weight:700; font-family:"montserrat";}
.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); }

.icon_medal{width: 30px; height: 30px; display: block;}

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

/* main notice area */
.marquee {width: 100%; height: 40px; margin: 0 auto; position: relative; z-index: 1; background-color: #fff; box-shadow: 1px 1px 2px rgba(226, 226, 226,0.3); border-radius: 20px; overflow: hidden;}
.marquee_inner, .marquee_inner_clone {width: 100%; height: 100%; position: absolute; left: 100%; top: 0; display: flex; align-items: center;}

.rollingbanner{width: 100%; height: 40px; margin: 20px 0; padding: 7px 15px; position: relative; display: flex; align-items: center; gap: 10px; background-color: #fff; box-shadow: 1px 1px 2px rgba(226, 226, 226,0.3); border-radius: 20px;}
.rollingbanner .title{ min-width: 60px; font-weight: 700; color: var(--red9);}
.rollingbanner .wrap{width: 100%; height: 100%; position: relative; overflow: hidden; background-color: #fff;}        
.rollingbanner li{ position: absolute; top: -40px; left: 0;}
.rollingbanner li.prev{top: 40px; transition: top 0.5s ease;}
.rollingbanner li.current{top: 0; transition: top 0.5s ease;}
.rollingbanner li.next{top: -40px;}
.rollingbanner a{display: block; display: -webkit-box; text-decoration: none; -webkit-line-clamp: 1; -webkit-box-orient:vertical; overflow: hidden; color: #000;}


/* 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 { background: var(--grayc); }
.coin_swiper .swiper-pagination-bullet-active { background: var(--sub); }

/* direct_link_list */
.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_sub_txt{font-size: 16px; font-weight: 600; color:var(--gray3); font-family: var(--eng);}
.direct_link_list .direct_txt { width:100%; font-size: 18px; font-weight: 700; color:var(--gray3);}
.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;}
.direct_link_list .direct_txt.font_14 {font-size:14px;}
/* 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 var(--white);}
.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(--white); border-radius: var(--radius-box); margin-bottom: 10px; }
.qna_list li:last-child { margin-bottom: 0; }
.qna_list a{display:block; padding:20px;}
.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(--white); 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(--white); padding: 20px; border-radius: 0 0 10px 10px; margin-bottom: 10px; }
.qna_admin_answer { background: var(--white); padding: 20px; border-radius: 10px 10px 0 0; }
/* send_card_list */
.send_card_list { width: 100%; padding: 16px; box-shadow:2px 4px 12px rgba(0,0,0,0.06); font-size: 14px; border-radius:var(--radius-box); background-color:var(--white);}
.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(--grayd); }
.send_card_list li:last-child { margin-bottom: 0; border: none; padding: 0; }


/* text_card_list */
.text_card_list{width:100%; padding:16px; background-color:var(--white); box-shadow:var(--card-shadow); border-radius:var(--radius-box);}
.text_card_list li{display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line);}
.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:400; color:#333; word-break: break-all;}
.text_card_list .desc{font-size:16px; font-weight:700; word-break: break-all;}

/* page : login */
.login_bg {width: 100%; height: 100%; background: url(../img/kainos/index_bg.png) no-repeat; background-size: 100% 100%; position: relative;}
.login_bg_cover{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.1);}
.login_top{width: 100%; padding: 20px; position: absolute; top: 0; left: 0; z-index: 5; display: flex; justify-content: space-between;}
.login_top > p{color: var(--white); font-size: 20px; font-weight: 500;}
.login_top_img{display: flex; justify-content: end; align-items: center;}
.login_top_img > button{width: 60px; height: auto; background: transparent; cursor: pointer;}
.login_top_img > button > img{width: 100%; height: 100%;}
.login_con{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.login_logo{width: 90%; margin-bottom: 40px;}

.login_title_txt { color:var(--main); margin-bottom: 30px; font-size: 28px;}
.design.login_join_btn { background:var(--white); border:1px solid var(--main); color:var(--main); }

/* page : register */
.argree_box {height:90px; border:1px solid var(--bg); background: var(--white); border-radius: var(--radius-box); font-size:14px; padding:10px; font-weight: 500; overflow-y: auto; }

/* page : notice */
.notice_list{width:100%; padding: 10px; background: var(--card_bg); border-radius: var(--radius-box); box-shadow:2px 4px 12px rgba(0,0,0,0.06); }
.notice_list li{width:100%; border-bottom:1px solid var(--line); }
.notice_list li:last-child { border:none; }
.notice_list li a{width:100%; padding:14px 20px; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.notice_list li a .title{font-size:16px; font-weight:700; word-break: break-all;}
.notice_list li a .date{font-size:14px; font-weight:500; flex:none;}
.notice_date{min-width: 80px; text-align: right;}

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

/* 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 var(--line);}
.giftcard_active { outline:2px solid var(--main);}
.giftcard_tab img { max-width:100%;}

.market_tablewrap { border-radius: 10px; border:2px solid var(--line); 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 var(--line); 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 var(--line); 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;}

.total_list_txt { width: max-content; box-shadow: 2px 4px 12px rgba(0,0,0,0.06); }

.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; }
.card_180 { color:#66ad86; 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(--grayc); font-size: 16px; color:var(--white);}
.market_list_view > button.active { 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; }
.table_wrap table td { text-align: center; padding:14px 10px; border-bottom:1px solid var(--bg); white-space: nowrap; }
.table_wrap table tr:last-child td{border-bottom:none;}

/* page : purchase */
.purchase_tab{display:flex; justify-content:center; align-items:center; gap:10px;}
.purchase_tab li{width:100%; height:52px; border-radius:6px; background:var(--grayc); border:1px solid rgba(0,0,0,0.05); font-size:16px; font-weight:700; color:var(--white); display:flex; justify-content:center; align-items:center; cursor:pointer;}
.purchase_tab .active{background:var(--main); color:var(--white);}
.purchase_tab .active_kai{background:#030449; color:var(--white);}
.purchase_tab .active_kpc{background:#072e0f; color:var(--white);}
.purchase_tab .active_kap{background:#6d0c0c; color:var(--white);}
.purchase_tab .active_ktrx{background:#3c0c58; color:var(--white);}
.purchase_tab .active_btt{background:#a80b8e; color:var(--white);}
.purchase_tab .active_nft{background:#0ba88e; color:var(--white);}


/* swal */
.swal2-title { padding: 30px 20px 0 !important;}
.swal2-container.swal2-center>.swal2-popup { padding-bottom:0 !important; width: calc(100% - 20px) !important; max-width:400px !important; min-height: 150px !important; max-height: 582px !important; background-color:var(--card_bg) !important;}
.swal2-styled { width: 100% !important; border-radius: var(--radius-btn) !important; font-size: 18px !important; font-weight: 700 !important; }
.swal2-actions { min-height: 90px !important; padding: 0 20px ! important; margin:0 auto !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; }
.swal2-html-container { margin: 0 !important; }
.swal2-title{font-size:22px !important;}
.swal2-styled.swal2-confirm{background:var(--main) !important; color:var(--white) !important; outline: none !important; border-radius: var(--radius-btn) !important; font-size: 18px !important; font-weight: 700 !important;}
.swal2-popup .swal2-styled:focus { box-shadow: none !important; }
.title_sweet {  min-height: 40px !important;  font-weight: 700 !important; font-size: 18px !important; font-family: "Noto Sans KR" !important;}
.desc_sweet {  min-height: 30px !important;  padding: 0 20px !important; word-break: break-all !important; font-family: "Noto Sans KR", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; max-height:156px !important; overflow: auto !important; }
.sweet_cancel_btn  { background: var(--graya) !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 var(--main); border-top-color:rgba(255,255,255,0); border-bottom-color:rgba(255,255,255,0); animation:loading 3s infinite;}
.loading_text{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; font-weight:700; color:var(--black);}
@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: var(--line); margin-right: 6px; position: relative; overflow: hidden; }
.pin_box .active:before { content: "*"; text-align: center; line-height: 46px; font-size: 20px; color: var(--black); 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:var(--black); display: flex; justify-content: center; align-items: center; font-size:14px; font-weight:700;}
.pagination_item.active a { background:var(--main); border-radius: 4px; font-family:'Montserrat', sans-serif; color: var(--white); }
.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: var(--black); user-select: none; cursor: pointer; }
.pagination_item:first-child, .pagination_item:last-child { color: var(--black); }

/* 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:400px; min-height: 300px; max-height: 582px; padding: 30px 20px 100px; background-color:var(--card_bg); border-radius:8px; z-index: 9920; }
.pop_title { font-weight: 700; text-align: center; padding-bottom: 20px; font-size: 18px; font-family: "Noto Sans KR", sans-serif; line-height: normal; }
.popup_txt { color: var(--black); word-break: break-all; font-family: "Noto Sans KR", sans-serif; line-height: normal; font-size: 16px; font-weight: 400; max-height:156px; overflow: auto;}
.pop_btn { position:absolute; bottom:30px; left: 50%; transform: translateX(-50%); width:calc(100% - 40px); display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }
.pop_btn p { display: block; width: 48%; padding: 13px; text-align: center; color: var(--black); font-size: 16px; background-color: transparent; border-radius: 10px; cursor: pointer; font-weight: 700; }
.pop_btn p.allday_none_btn { background-color: var(--graya); color:var(--white); }
.pop_btn p:nth-child(2) { background-color: var(--sub); color:var(--black); }

/* bottom_tab */
.bottom_tab_safe_area{width:100%; height:70px;}
.bottom_tab{width:100%; max-width:768px; height:70px; 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{ width: 100%; height:100%; display:flex; justify-content:space-between; align-items:center;}
.bottom_tab ul li { width: 100%; height:100%; }
.bottom_tab ul li a{ width: 100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content: center; font-size:12px;  color:var(--gray8); }
.bottom_tab ul li a img{width:30px; height:30px;}
.bottom_tab ul li:nth-child(2) a img, .bottom_tab ul li:nth-child(3) a img{width:27px; height:27px; margin: 2px 0;}
.bottom_tab ul .active a{color:var(--main);}

/* 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 var(--grayc); 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:var(--black); background-color:var(--grayc);
  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 {width: 100%; display: flex; justify-content: center; align-items: center; font-size:12px; font-weight:600; padding-top:4px; word-break: break-all; }
.tree_search { padding:0 20px; }
.tree_imgbox { border-bottom:1px solid var(--grayd); }
.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 var(--grayc); width: 50%; height: 18px; }
.tree1 li::after { right: auto; left: 50%; border-left: 2px solid var(--grayc); }
.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 var(--grayc); 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 var(--grayc); 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:linear-gradient(165deg, var(--main) 0%, var(--main) 100%); }
.tree1 li a:hover+ul li a div p:nth-child(1) { background:linear-gradient(165deg, var(--main) 0%, var(--main) 100%); }


/* 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(--black); }
.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 var(--black)9, -4px -4px 5px 0px var(--black)9, 7px 7px 20px 0px var(--white)2, 4px 4px 5px 0px var(--white)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) { 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; }
#89949c

/* 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:absolute; left:-100px; top:50%; transform:translateY(-50%); width:300px; height: 100%!important; max-height: 100%; background-color: var(--container_bg); color: var(--black); 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);}
.sub_menu > li > a > p{color: var(--white);}
.sidebar_cont { -ms-overflow-style: none; scrollbar-width: none; }
.sidebar_cont::-webkit-scrollbar { display:none; }

/* 추천하기 */
.bg_referral { background: #fdeabf; }
.referral_tit { padding: 60px 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_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; }
.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; }

/* 코인카드 */
.coin_card_bg{width: calc(100% - 100px); height: calc(100svh - 220px); margin: 50px 50px 0; padding: 14px; background: var(--white); border-radius: 20px;}
.coin_card_bg > h1{font-size: 24px; font-weight: 600; color: var(--black); font-family: var(--eng);}
.coin_card_swiper{width: 100%; height: 100%;}
.coin_card_wrapper{width: 100%; height: 100%;}
.coin_card_slide{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
.coin_card{width: 300px; height: 468px; padding: 14px; position: relative; display: flex; flex-direction: column; justify-content: space-between; border-radius: 10px; overflow: hidden;}
.coin_card.cc01{background: linear-gradient(to bottom, #4254fd, #030449);}
.coin_card.cc02{background: linear-gradient(to bottom, #4e9951, #072e0f);}
.coin_card.cc03{background: linear-gradient(to bottom, #fd7676, #6d0c0c);}
.coin_card.cc04{background: linear-gradient(to bottom,  #dd86f8, #3c0c58);}
.coin_card.cc05{background: linear-gradient(to bottom, #acacac, #000000);}
.coin_card.cc06{background: linear-gradient(to bottom,  #ffec42, #a6a80b);}
.coin_card.cc07{background: linear-gradient(to bottom,  #ff88eb, #a80b8e);}
.coin_card.cc08{background: linear-gradient(to bottom,  #61fae0, #0ba88e);}
.coin_card_top{display: flex; justify-content: space-between;}
.coin_card_top > p{font-size: 16px; font-weight: 400; color: var(--white);}
.coin_card_top > p:nth-child(1){font-size: 18px; font-family: var(--eng); font-weight: 500;}
.coin_card_top > p:nth-child(2){text-align: right;}
.coin_card_img{width: 200px; height: 200px; margin: 0 0 30px 76px; display: flex; justify-content: center; align-items: center; }
.coin_card_img > img{object-fit: cover;}
.coin_card_img.w100 > img{width: 100%;}
.coin_card_img.h100 > img{height: 100%;}
.coin_card_txt{width: 100%; padding-bottom: 20px; text-align: right;}
.coin_card_txt > p{color: var(--white); font-family: var(--eng);}
.coin_card_txt > p > span{margin-left: 10px; color: var(--white);}
.coin_card_icon{width: 50px; height: 110px; position: absolute; left: 0; bottom: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 16px; background: rgba(255, 255, 255, 0.4); border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
.coin_card.cc06 .coin_card_icon{background: rgba(0, 0, 0, 0.4);}
.coin_card_copy, .coin_card_mining{width: 100%; display: flex; justify-content: center; align-items: center; background: transparent; cursor: pointer;}
.coin_card_copy > img{width: 70%;}
.coin_card_mining > img{width: 60%;}
.coin_card_next, .coin_card_prev{width: 30px !important; height: 30px !important; opacity: 0.7 !important;}
.coin_card_next{right: 0 !important;}
.coin_card_prev{left: 0 !important;}
.coin_card_next.swiper-button-disabled, .coin_card_prev.swiper-button-disabled{opacity: 0 !important;}

@media all and (max-width:600px){
  .coin_card_bg{width: calc(100% - 40px); margin: 50px 20px;}
  .coin_card_bg > h1{font-size: 22px;}
  .coin_card{width: 200px; height: 312px; padding: 10px;}
  .coin_card_top > p{font-size: 12px; font-weight: 400;}
  .coin_card_top > p:nth-child(1){font-size: 14px;}
  .coin_card_img{width: 130px; height: 130px; margin: 0 0 10px 50px;}
  .coin_card_txt{font-size: 12px;}
  .coin_card_txt > p > span{margin-left: 4px;}
  .coin_card_icon{width: 30px; height: 80px; gap: 12px;}
  .coin_card_copy > img{width: 75%;}
  .coin_card_mining > img{width: 65%;}
  .coin_card_next, .coin_card_prev{width: 26px !important; height: 20px !important;}
}
@media all and (max-width:500px){
  .coin_card_bg{height: calc(100svh - 200px); margin: 40px 20px;}
}

/* 추천합계수당 */
.rec_total{height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.rec_total > p:nth-child(1){font-size: 30px; font-weight: bold; color: var(--main);}
.rec_total > p:nth-child(2){margin: 20px 0 40px; font-size: 22px; font-weight: medium;}
.rec_total > table{width: 85%;}
.rec_total tr > td{border: 3px solid #eee;}
.rec_total tr > td:nth-child(1){width: 40%; max-width: 200px; min-width: 150px;}
.rec_total_table_title{height: 50px; font-size: 18px; font-weight: 600; text-align: center;}
.rec_total_table_con{height: 40px;}
.rec_total_table_con > td:nth-child(1){text-align: center;}
.rec_total_table_con > td:nth-child(2), .rec_total_table_con > td:nth-child(3){text-align: right; font-size: 18px;}

/* 추천혜택 */
.rec_benefit{height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: center;}
.rec_benefit > p{margin-bottom: 14px; display: flex; align-items: start; gap: 10px; word-break: keep-all;}
.rec_benefit_img{width: 100%; height: 300px; margin-top: 30px;}

/* 승급혜택 & 승급설명 */
.promo_benefit{height: 100%; margin: 20px; display: flex; flex-direction: column; justify-content: center;}
.promo_benefit > p{margin-bottom: 20px; display: flex; align-items: start; gap: 10px; font-family: 18px; word-break: keep-all;}
.promo_bg{width: calc(100% - 100px); height: auto; margin: 50px; padding: 30px 14px; background: var(--white); border-radius: 20px;}
.promo_info{height: 100%; padding: 20px;}
.promo_info > p{margin-bottom: 20px; display: flex; align-items: start; gap: 10px;}
.promo_info > p:last-child{margin-bottom: 0;}

@media all and (max-width:740px){
  .promo_info_span.span03{display: block;}
}
@media all and (max-width:690px){
  .container.promo{min-height:calc(100svh - 140px);}
}
@media all and (max-width:650px){
  .container.promo{min-height:calc(100svh - 80px);}
  .promo_info_span{display: block; margin-bottom: 8px;}
  .promo_benefit > p.promo_info_p{flex-direction: column;}
  .promo_benefit > p.promo_info_p > span:nth-child(2){margin-left: 20px;}
  
}
@media all and (max-width:530px){
  .promo_benefit > p{flex-direction: column; gap: 5px;}
  .promo_benefit > p > span:nth-child(2){margin-left: 20px;}
  .container.promo{min-height:calc(100svh - 50px); padding-bottom: 10px;}
}
@media all and (max-width:500px){
  .rec_total > table{width: 90%;}
  .rec_total tr > td:nth-child(1){width: 30%; min-width: 80px;}
  .rec_total_table_title{font-size: 16px;}
  .rec_total_table_con{height: 60px; font-size: 14px;}
  .rec_total_table_con > td:nth-child(2), .rec_total_table_con > td:nth-child(3){font-size: 17px;}
  input.design{padding: 0 16px;}
  input.design::placeholder{font-size:14px;}
}


/* modal(popup) */
.modal{width: 100%; max-width: 350px; max-height: 600px; padding: 20px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1500; background: var(--white); box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.4); border-radius: 10px;}
.modal2{width: 100%; max-width: 90%; height: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1500;}
.modal_bg{content: ""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1400; background: rgba(0,0,0,0.6);}
.modal_bg2{content: ""; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1400; background: rgba(0,0,0,0.8);}

/* 승급실행 modal(popup) */
.modal_txt > p:nth-child(1){font-size: 22px; font-weight: 700; text-align: center;}
.modal_txt > p:nth-child(2){margin: 20px 0; font-size: 16px; font-weight: 400;}
.modal_chk > span{color: #bbb;}
.modal_chkbox{width: 20px; height: 20px; margin-right: 4px;}
.btn_modal{margin-top: 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px;}
.btn_modal > button{width: 100%; height: 50px; border-radius: 10px; font-size: 16px;}
.btn_modal_no{background-color: #ccc;}
.btn_modal_yes{background-color: #eee;}

/* index modal(popup) */
.modal_img{width: 100%; height: 100%; background: var(--white);}
.modal2 img{width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0px 10px 50px rgba(255, 255, 255, 0.4); cursor: pointer;}
.modal2 > video{width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0px 10px 50px rgba(255, 255, 255, 0.4); cursor: pointer;}

/* 회사소개 */
.company_bg{width: calc(100% - 100px); height: auto; margin: 50px; padding: 30px 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--white); border-radius: 20px;}
.company_img{width: 80%; margin: 10px auto 0;}
.company_txt{text-align: left; padding: 5% 34px;}
.company_txt > p:nth-child(1){width: fit-content; box-shadow: inset 0px -0.4em 0 0 var(--sub); font-size: 30px; font-weight: 700; color: var(--main); font-family: var(--eng); }
.company_txt > p:nth-child(2){margin-top: 20px; font-size: 16px; font-weight: 400; line-height: 30px; word-break: keep-all;}

@media all and (max-width:600px){
  .company_bg{width: calc(100% - 40px); height: auto; margin: 40px 20px; padding: 14px;}
  .company_txt{padding: 5% 20px;}
  .promo_bg{width: calc(100% - 40px); height: auto; margin: 40px 20px; padding: 14px;}
}
@media all and (max-width:500px){
  .company_txt > p:nth-child(1){font-size: 22px;}
  .company_txt > p:nth-child(2){margin-top: 10px; font-size: 14px; line-height: 24px;}
}


/* kainos main img */
.kainos_wrap{width: 100%; height: auto; padding-top: 100%; position: relative; overflow: hidden;}
.kainos_center{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; align-items: center;}
.kainos_center > img{width: 50%; object-fit: contain; display: block;}
.kainos_around{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2;}
.kainos_around > img{max-width: 20%; object-fit: contain; position: absolute; display: block; cursor: pointer;}
.kainos_around > img.kai01{top: 4.5%; left: 50%; transform: translateX(-50%);}
.kainos_around > img.kai02{top: 15%; right: 15%;}
.kainos_around > img.kai03{top: 50%; right: 4.5%; transform: translateY(-50%);}
.kainos_around > img.kai04{bottom: 15%; right: 15%;}
.kainos_around > img.kai05{bottom: 4.5%; left: 50%; transform: translateX(-50%);}
.kainos_around > img.kai06{bottom: 15%; left: 15%;}
.kainos_around > img.kai07{top: 50%; left: 4.5%; transform: translateY(-50%);}
.kainos_around > img.kai08{top: 15%; left: 15%;}


/*#################### 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-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_start_start{display:flex; justify-content:start; align-items:start;}
.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_end_start { display: flex; justify-content: flex-end;; align-items: flex-start; }


/* flex-direction */
.flex_dir_col{flex-direction:column;}

/* gap */
.gap5{gap:5px;}
.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_green{color:var(--green9);}
.color_blue{color:var(--blue);}
.color_white { color: #fff; }
.color_main {color:var(--main);}

.text_red{color:var(--red);}
.text_green{color:var(--green9);}
.text_blue{color:var(--blue);}
.text_gray{color:var(--gray5);}
.text_white{color:#fff;}
.text_lightgray{color:var(--graye)}
.text_main {color:var(--main);}

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

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

.minw_70px{min-width: 70px; display: block;}
.minw_100px{min-width: 100px; display: block;}

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

  /* 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;}
.px50{padding-left:50px; padding-right:50px;}

.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;}
.pl50{padding-left:50px;}
.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;}

/* 23.05.22 datepicker 추가 NBR */
.clearfix { display:flex; justify-content: center; align-items: center; }
.clearfix input:read-only { width: 100%; padding: 12px 25px; box-shadow: var(--input-shadow); border: var(--input-border); border-radius: 6px; font-size: 16px; font-weight: 500; font-family: "Noto Sans KR", sans-serif; background: var(--white);  text-align: center;}
.clearfix .demi { margin: 0 10px; }
.clearfix .dset { width:100%;}
.searchDate { width: 100%; display: flex; align-items: center;}
.searchDate li { position:relative; width: 100%; height: 52px; margin-right: 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--black); background-color: var(--white); box-shadow: 2px 4px 12px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.05);}
.searchDate li.active { background-color: var(--main); color:var(--white); }
.searchDate li:last-child { margin: 0 ; }
.searchDate input { display: none; }
.searchDate label { position:absolute; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; cursor: pointer; font-size: 14px; font-weight: 500; }


/* media query */

/*@@@@@@@@@@@@@@@@@@@@@ 태블릿 @@@@@@@@@@@@@@@@@@@@@*/
@media all and (min-width:768px) and (max-width:1024px){

}

/*@@@@@@@@@@@@@@@@@@@@@ 모바일 가로 @@@@@@@@@@@@@@@@@@@@@*/
@media all 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:600px){
  .direct_link_list li a{padding: 10px 5px 5px 10px;}
  .direct_link_list li a img{display:inline-block; width:40px; margin-left:auto;}
  .login_top_img > button{width: 50px;}
  .login_logo{width: 100%;}
}

@media all and (max-width:550px){
  .login_top > p{font-size: 18px;}
  .login_top_img > button{width: 45px;}
}

@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;}
}



/*@@@@@@@@@@@@@@@@@@@@@ 모바일 @@@@@@@@@@@@@@@@@@@@@*/
@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:7/6;}

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

@media all and (max-width:440px) {
  .direct_link_list .direct_sub_txt{font-size: 14px;}
  .direct_link_list .direct_txt { font-size: 16px;}
}

@media all and (max-width:400px) {
  .direct_link_list li a img{display:inline-block; width:30px; margin-left:auto;}
  .direct_link_list .direct_sub_txt{font-size: 12px;}
  .direct_link_list .direct_txt { font-size: 14px;}
  .login_top > p{font-size: 16px;}
  .login_top_img > button{width: 40px;}
  .login_logo{margin-bottom: 10px;}
  .login_con > p{margin: 15px 0;}
  .h_40px{height: 40px !important;}
}

@media all and (max-width:340px) {
  .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;}
}