/* contents CSS */
/* 01/04 */
.select_box{border: 1px solid #A2ACBD;background-color: #fff;margin: 20px 20px 10px 20px;padding: 8px 15px;border-radius: 6px !important;font-weight: 500;position: relative;}
/* 01/12 언어변경 박스 */
.convert_lang_btn{position: relative;}
.changelan_box{position: absolute;width: 80px;height: 90px;top: 40px;background-color: #fff;display: flex;flex-direction: column;cursor: pointer; z-index: 1100;}
.changelan_btn{cursor: pointer;}
.lan_none{display: none !important;}
.changelan_box a{flex: 1; display: flex;align-items: center; width: 100%; padding-left: 3px;border: 1px solid #eee;}
.changelan_box img{max-width: 36px;}

/* 11/06 클래스 추가 스와이프 페이지니언 위치변경 */
.swiper-pagination { bottom: 160px; }

/* wrap */
.wrap { width:100%; max-width:768px; margin:auto; background-color:#F4F3F8; min-height: 100vh; min-height: 100svh; }

.wrap.full { display:flex; flex-direction:column; min-height:100%; }
.wrap.full .header { flex:none; }
.wrap.full .main { flex:1; }
.wrap.full .footer { flex:none; }
.wrap.white { background-color: #fff; }

/* header */
.header { width:100%; }
.header_safe_area { width:100%; height:50px; }
.header_common_layout { width:100%; max-width:768px; height:50px; padding:0 20px; border-bottom:1px solid var(--gray); background-color:#fff; position:fixed; left:50%; top:0; transform:translateX(-50%); z-index:100; display:flex; justify-content:center; align-items:center; box-shadow: 0px 1px 5px -2px rgba(0,0,0,0.2); }
.header_left { margin-right:auto; }
.header_center { margin-left:auto; margin-right:auto; }
.header_right { margin-left:auto; }
.header_logo { font-size:18px; font-weight:700; color:#000; }
.header_title { font-size:20px; font-weight:700; color:#000; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.header_menu_btn { display:block; justify-content:center; align-items:center; cursor:pointer; }

/* bottom_tab */
.bottom_tab_safe_area { width:100%; height:68px; }
.bottom_tab { width:100%; max-width:768px; padding:6px 20px; background-color:#fff; position:fixed; left:50%; bottom:0; transform:translateX(-50%); display:flex; justify-content:space-between; align-items:center; z-index: 100; }
.bottom_tab li a { display:flex; flex-direction:column; justify-content:center; align-items:center; }
.bottom_tab li a .icon { width:32px; height:32px; }
.bottom_tab li a .icon img { width:100%; height:100%; }
.bottom_tab li a .icon.on { display:none; }
.bottom_tab li a .text { font-size:14px; font-weight:700; color:#949EA5; }
.bottom_tab .active a .text { color:#C51B1F }
.bottom_tab .active a .icon.on { display:block; }
.bottom_tab .active a .icon.off { display:none; }

.banner_swiper img { width:100%; }

/* main_card */
.main_card { width:100%; padding:5px 0; position:relative; overflow:hidden; }
.main_card .top { /*padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.1); */ display:flex; justify-content:space-between; align-items:center; }
.main_card .top .name { font-size:20px; font-weight:700; color:#2E3B4B; }
.main_card .top .email { font-size:14px; font-weight:700; color:#2E3B4B; opacity:0.6; }
.main_card .top .logout { display:block; padding:4px 8px; font-size:12px; font-weight:600; background-color:#abb3b6; border-radius:4px; cursor:pointer; }
.main_card .bottom { padding-top:20px; display:flex; justify-content:space-between; align-items:center; }
.main_card .bottom a { display:flex; flex-direction:column; justify-content:center; align-items:center; }
.main_card .bottom a .img { width:50px; height:50px; }
.main_card .bottom a .img img { width:100%; height:100%; }
.main_card .bottom a .text { font-size:14px; font-weight:500; color:#fff; }

/* sub_card */
.sub_card { width:100%; padding:12px; border-radius:6px; background-color:#f7fbfd; box-shadow:0 2px 10px rgba(0,0,0,.28); display:flex; justify-content:center; align-items:center; }
.sub_card li { width:100%; padding:0 6px; border-right:1px solid #f1f1f1; font-size:16px; font-weight:700; }
.sub_card li:last-child { border-right:none; }
.sub_card li a { display:flex; flex-direction:column; justify-content:center; align-items:center; }

/* 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 { background:#fff; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.28); }
/* .direct_link_list li { background:linear-gradient(120deg, #75B0F6, #3E79EC); border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.28); } */
.direct_link_list .important { background:linear-gradient(120deg, #61C6A3, #4CA297); }
.direct_link_list .important .text, .direct_link_list .main .text { color: #fff; }
.direct_link_list li .text { margin-bottom:10px; }
.direct_link_list li .text .pre { font-size:14px; font-weight:600; }
.direct_link_list li .text .title { font-size:18px; font-weight:700; }
.direct_link_list li .img { width:35px; height:35px; margin-left:auto; }
.direct_link_list li .img img { width:100%; height:100%; }
.direct_link_list .direct_txt { width:100%; font-size: 18px; font-weight: 700; color:#000; }
.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; margin-left:auto; }

/* point_card */
.point_card { width:100%; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.28); background-color:#ccc; overflow:hidden; }
.point_card.blue { background:linear-gradient(120deg, #8199E7, #8F81D3); }
.point_card.green { background:linear-gradient(120deg, #75B0F6, #3E79EC); }
.point_card.black { background:linear-gradient(120deg, #377CBD, #002F67); }
.point_card.red { background:linear-gradient(120deg, #56C1D5, #20A8CA); }
.point_card.main { background:linear-gradient(120deg, #EA4439, #C51B1F); }
.point_card.black .bottom { background-color:rgba(255,255,255,0.1); }
/*231031 소개보너스 추가 신정운*/
.point_card.bonus { background:linear-gradient(120deg, #61C6A3, #4CA297) }

.point_card .top { padding:30px 20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.point_card .top2 { padding:30px 20px 10px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.point_card .top .title { font-size:16px; font-weight:600; color:#fff; }
.point_card .top .amount { font-size:20px; font-weight:700; color:#fff; letter-spacing:-0.2px; display:flex; justify-content:flex-end; align-items:center; gap:4px; }
.point_card .bottom { padding:12px; display:flex; justify-content:space-between; align-items:center; background-color:rgba(0,0,0,0.1); }
.point_card .bottom a { display:block; width:100%; border-right:1px solid rgba(255,255,255,0.3); text-align:center; font-size:22px; font-weight:500; color:#fff; }
.point_card .bottom a:last-child { border-right:none; }

.point_card .change { display: block; }

/* title_card */
.title_card { width:100%; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows: 1fr; gap:20px; }
.title_card .title { padding:12px; background-color:#ccc; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.28); font-size:18px; font-weight:700; color:#fff; text-align:center; position:relative; }
.title_card.blue .title { background-color:#007aff; }
.title_card.green .title { background-color:#00ad55; }
.title_card.black .title { background-color:#000; }
.title_card .title:after { content:""; display:block; width:20px; height:0; border-top:3px solid rgba(255,255,255,0.3); position:absolute; right:-20px; top:50%; transform:translateY(-50%); }
.title_card .content { padding:12px; background-color:#f7fbfd; border-radius:6px; box-shadow:0 2px 10px rgba(0,0,0,.28); grid-column: span 2 }
.title_card .content .percent { margin-bottom:10px; font-size:18px; font-weight:700; color:#000; text-align:center; }
.title_card .content .amount { font-size:14px; font-weight:500; color:#000; opacity:.6; text-align:center; }

/* circle_progress */
.circle_progress { padding:10px; background-color:#f7fbfd; box-shadow:0 2px 10px rgba(0,0,0,.28); border-radius:6px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.circle_progress .icon { position:relative; }
.circle_progress .icon svg { display:block; }
.circle_progress .icon svg .track { fill:none; stroke:#000; stroke-width:5; opacity:0.1; }
.circle_progress .icon svg .runner { fill:none; stroke:var(--main); stroke-width:5; stroke-dasharray:251.2; stroke-dashoffset:calc(251.2 * (100 - var(--percent)) / 100); stroke-linecap:round; animation:circle_progress_motion 1.2s; }
.circle_progress .icon .percent { font-size:16px; font-weight:700; color:#000; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.circle_progress .text { font-size:14px; font-weight:700; text-align:center; }

.circle_progress.red .icon svg .runner { stroke:red; }
.circle_progress.blue .icon svg .runner { stroke:blue; }

@keyframes circle_progress_motion {
 0% { stroke-dashoffset:251.2; }
 }

/* notice_list_card */
.notice_list_card { padding:12px 20px; border-radius:6px; background-color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.28); }
.notice_list_card .card_title { font-size:16px; font-weight:700; color:#000; opacity:0.6; }
.notice_list_card ul li { margin-bottom:5px; border-bottom:1px solid #f1f1f1; }
.notice_list_card ul li:last-child { border-bottom:none; }
.notice_list_card ul li a { padding:5px 0; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.notice_list_card ul li a .title { width:100%; font-size:14px; font-weight:500; color:#000; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.notice_list_card ul li a .date { flex:none; font-size:13px; font-weight:500; color:#000; opacity:0.5; }

/* text_card_list */
.text_card_list { width:100%; padding:12px; background-color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.28); border-radius:6px; }
.text_card_list li { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #f1f1f1; }
.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; word-break:break-all; }
.text_card_list .desc { font-size:14px; font-weight:700; word-break:break-all; }

/* 추천하기 */
.bg_referral { background: #fdeabf; }
.referral_tit { padding: 20px 20px 0; text-align: center; }
.referral_tit p:first-child { font-size: 38px; line-height: 1.2; }
.referral_tit p:last-child { font-size: 16px; }
.referral_box { position: relative; padding: 0 20px 20px; }
.referral_bg { background: linear-gradient(to top, #ffe500 50%, transparent 50%); }
.referral_box img { width:100%; max-width: 620px; height:100%; max-height: 430px; object-fit: contain; aspect-ratio: 6 / 5; margin: auto; }
.referral_box_card { margin: 0 20px 0; padding: 14px 20px; background:#fff; 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:#fff; }
.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:#fff; 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:#F2F2F2; 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:#f2f2f2; 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:#fff; }
footer.referral_receive_footer { padding-bottom: 120px; background-color: #F4F4F4; }
.referral_receive_info { background-color:#f2f2f2; padding: 20px; font-size: 14px; }
.referral_receive_info p:nth-of-type(1) { display: flex; align-items: center; gap: 5px; }

/* inquiry_tab */
.inquiry_tab { display:flex; justify-content:center; align-items:center; }
.inquiry_tab li { width:100%; height:60px; border-bottom:2px solid #e6e6ea; }
.inquiry_tab li a { display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:16px; font-weight:700; color:#000; }
.inquiry_tab .active { border-color:var(--main); }

/* inquiry_list */
.inquiry_list li { width: 100%; margin-bottom:20px; }
.inquiry_list li a { display:block; padding:20px; border-radius:6px; background-color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.28); }
.inquiry_list li a .title { font-size: 16px; font-weight: 700; margin-bottom: 10px; word-break: break-all; }
.inquiry_list li a .state { font-size: 16px; font-weight: 700; }
.inquiry_list li a .date { font-size: 14px; font-weight: 400; color:#B1B1B1; }
.inquiry_list li a .state.wait { color:#f00; }
.inquiry_list li a .state.complete { color: #090; }

/* notice_list */
.notice_list { width:100%; display:flex; flex-direction:column; gap:10px; }
.notice_list li { width:100%; }
.notice_list li a { width:100%; padding:10px; border-radius:6px; background-color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.notice_list li a .title { font-size:16px; font-weight:700; color:#000; }
.notice_list li a .date { font-size:14px; font-weight:500; flex:none; color:#000; }

/* pagination */
.pagination { display:flex; align-items:center; }
.pagination li { width:26px; height:26px; margin-right:4px; }
.pagination li:last-child { margin-right:0; }
.pagination li a { display:flex; justify-content:center; align-items:center; width:100%; height:100%; font-size:14px; font-weight:500; color:#b1b1b1; }
.pagination .page.active { border-radius:4px; background-color:var(--main); }
.pagination .page.active a { color:#fff; }

/* copyright */
.copyright { font-size:12px; font-weight:400; text-align:center; color:#A2ACBD; opacity:0.4; }

/* label */
label.design { display:inline-block; width:100%; font-size:16px; font-weight:500; color:#000; }
label.design small { display:inline-block; width:100%; }
label.design .help { font-size:14px; }

/* input */
input { width:100%; padding:12px 25px; background-color:#fff; border-radius:6px; font-size:16px; font-weight:500; border: 1px solid #A2ACBD; }
input.design { width:100%; padding:12px 25px; background-color:#fff; border-radius:6px; font-size:16px; font-weight:500; border: 1px solid #C51B1F; }
input.design::placeholder, input::placeholder { font-size:16px; font-weight:400; color:#A2ACBD; }

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

input:disabled { background-color:#ddd; }
input.not_disabled:disabled { background-color:#fff; }

/* 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:#A2ACBD; cursor:pointer; position:relative; }
label.checkbox .text { font-size:14px; font-weight:500; color:#A2ACBD; cursor:pointer; }
label.checkbox input + .icon::after { content:"V"; display:block; font-size:14px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#eee; }
label.checkbox input:checked + .icon { background:#000; }
label.checkbox input:checked + .icon::after { color:#fff; }
label.checkbox input:checked ~ .text { color:#000 !important; }


label.checkbox.black .icon { display:block; width:24px; height:24px; border-radius:4px; background-color:#f1f1f1; cursor:pointer; position:relative; }
label.checkbox.black .text { font-size:14px; font-weight:500; color:rgba(0,0,0,0.5); }
label.checkbox.black input + .icon::after { content:"V"; display:block; font-size:14px; font-weight:700; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#ccc; }
label.checkbox.black input:checked + .icon { background:#000; }
label.checkbox.black input:checked + .icon::after { color:#fff; }
label.checkbox.black input:checked ~ .text { color:#000 !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; border-radius:6px; border:1px solid #A2ACBD; background-color:#fff; 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:44%; right:20px; transform:translateY(-50%) rotate(45deg); }

/* textarea */
textarea.design { width:100%; padding:12px 25px; background-color:#fff; border:1px solid #A2ACBD; border-radius:6px; font-size:16px; font-weight:500; resize:none; }
textarea.design::placeholder { font-size:16px; font-weight:400; color:#A2ACBD; }

/* button */
button.design { width:100%; height:50px; background:#C51B1F; border-radius:6px; font-size:18px; font-weight:500; cursor:pointer; color:#fff; }
button.design:disabled { border:solid 1px rgba(0,0,0,.05); background-color:#e6e6ea; color:#fff; }
button.design.red { background-image:none; background-color:red; color:#fff; }
button.design.gray { background-image:none; background-color:#999; }
button.design.blue { background-image:none; background-color:#008; }
button.design.white { background-image:none; background-color:#000; }
button.design.black { background-image:none; background-color:fff; }
button.design.small { width:auto; height:50px; padding:0 16px; font-size:16px; border-radius:4px; }
.link_btn { width:max-content; padding:0 20px; height:40px; background:var(--sub); border-radius:6px; font-size:16px; font-weight:500; cursor:pointer; }
.btn { width:100%; height:50px; background:var(--main); border-radius:6px; font-size:18px; font-weight:700; cursor:pointer; display:inline-flex; justify-content:center; align-items:center; color:#fff; transition:all 0.3s; }
.btn.small { width:auto; height:50px; padding:0 16px; font-size:16px; border-radius:4px; }
.btn.disabled { border:solid 1px rgba(0,0,0,.05); background-color:#e6e6ea; color:#fff; }
.btn.w_100{width: 100%;}

/* badge */
.badge { font-size:16px; padding:8px 16px; font-weight:700; border-radius:100vw; background-color:#ccc; color:#000; }
.badge.red { background-color:red; color:#fff; }
.badge.green { background-color:green; color:#fff; }
.badge.blue { background-color:blue; color:#fff; }
.badge.yellow { background-color:yellow; color:000; }
.badge.gold { background-color:gold; color:000; }
.badge.small { font-size:10px; padding:5px 10px; }
.badge.regular { font-size:11px; padding:5px 10px; }
.badge.medium { font-size:12px; padding:6px 12px; }
.badge.large { font-size:13px; padding:6px 12px; }

/* login logout */
.login { display:block; padding:4px 8px; font-size:12px; font-weight:600; background-color:#f7fbfd; border-radius:4px; cursor:pointer; }
.logout { display:block; padding:4px 8px; font-size:12px; font-weight:600; background-color:#e8eff1; border-radius:4px; cursor:pointer; color: #949EA5; }

/* help_text */
.help_text { font-size:14px; font-weight:500; color:red; }

/* login_logo */
.login_logo { margin:40px 0; font-size:58px; font-weight:700; text-align:center; color:#C51B1F; }
.login_logo img { height: 120px; margin:0 auto; }

/* terms_box */
.terms_box { background-color:#fff; border: 1px solid #A2ACBD; border-radius: 6px; overflow: hidden; }
.terms_box_inner { max-height: 200px; overflow-y: auto; white-space: pre-line; padding: 8px 16px; font-size: 12px; font-weight: 400; }

/*tree*/
.seearch_img { position: absolute; top: 50%; right: 30px; transform: translateY(-50%); cursor: pointer; }
.search_inputbox { position: relative; }
.container_tree { position: relative; overflow: auto; }
.tree1 ul { padding-top: 15px; position: relative; display: flex; }
/* .tree1 a { display:block; height:100%; } */
.tree1 li { text-align: center; position: relative; padding: 18px 5px 0 5px; }
.tree_wrap { width:100%; max-width:768px; margin:0 auto; padding:0 10px; overflow:auto; }
.user_infom { word-break: break-all; border: 2px solid #c3c3c3; display: inline-block; width: 140px; border-radius: 4px; background-color: #002F67; }
.tree_idbox { display:flex; align-items: center; justify-content: center; padding:4px; border-radius: 4px 4px 0 0; color:#fff; background-color:#002F67; min-height:30px; font-weight:600; height:auto; font-size:12px; }
.set1 { width:100%; height:1px; margin:0 auto; }
.tree_imgbox img { width:30px; margin:0 auto; display: block; }
.tree_imgbox, .tree_datebox { padding:8px 0; font-size:10px; font-weight:400; color:#000; background-color: #fff; }
.tree_namebox { font-size:12px; font-weight:600; padding-top:4px; word-break: break-all; color:#000; background-color: #fff; }
.tree_search { padding:0 20px; }
.tree_imgbox { border-bottom:1px solid #ddd; background-color: #fff; }
.tree_datebox { border-radius: 0 0 2px 2px; }
.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: -2px; right: 50%; border-top: 2px solid #c3c3c3; width: 50%; height: 18px; }
.tree1 li::after { right: auto; left: 50%; border-left: 2px solid #c3c3c3; }
.tree1 li:only-child::after, .tree1 li:only-child::before { display: none; }
.tree1 li:first-child::before, .tree1 li:last-child::after { border:none; }
.tree1 li:last-child::before { border-right: 2px solid #c3c3c3; border-radius: 0 5px 0 0; -webkit-border-radius: 0 5px 0 0; -moz-border-radius: 0 5px 0 0; }
.tree1 li:first-child::after { border-radius: 5px 0 0 0; -webkit-border-radius: 5px 0 0 0; -moz-border-radius: 5px 0 0 0; }
.tree1 ul ul::before { content: ''; position: absolute; top: 0; left: 50%; border-left: 2px solid #c3c3c3; width: 0; height: 15px; }

/* hover 이벤트 */
.tree1 li a:hover+ul li::after, .tree1 li a:hover+ul li::before, .tree1 li a:hover+ul::before, .tree1 li a:hover+ul ul::before { border-color: var(--main); }
.tree1 li a div:hover, .tree1 li a:hover+ul li a div { border: 2px solid var(--main); cursor:pointer; }
.tree1 li a div:hover > p:nth-child(1) { background:var(--main); color:#fff; border-radius: 0; }
.tree1 li a:hover+ul li a div p:nth-child(1) { background:var(--main); color:#fff; border-radius: 0; }

/* popup */
.popup_bg { position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.8); z-index:9999; }
.popup_box { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:334px; padding:20px; border-radius:6px; background-color:#fff; }
.popup_title { font-size:22px; font-weight:700; text-align:center; margin-bottom:10px; word-break:break-all; color:#000; padding-bottom:4px; }
.popup_content { font-size:16px; font-weight:400; max-height:300px; overflow-y:auto; margin-bottom:20px; overscroll-behavior:none; word-break:break-all; color:#000; padding-bottom:4px; }
.popup_button_box { display:flex; align-items:center; }
.popup_button_box button { margin-right:20px; font-size:14px; }
.popup_button_box button:last-child { margin-right:0px; }
.popup_content img {max-width:100%; width:100%; margin:30px auto 0;}
/* sweet_alert */
.swal2-html-container { margin-top:14px !important; }
.title_sweet { font-size:22px !important; color:#000 !important; }
.desc_sweet { font-size:16px !important; font-weight:400; color:#000 !important; }
.swal2-styled.swal2-confirm { width:100% !important; height:50px !important; background-color:var(--main) !important; font-size:14px; font-weight:500; color:#fff !important; }
.swal2-styled.swal2-cancel { width:100% !important; height:50px !important; background-color:#999 !important; font-size:14px; font-weight:500; }
.swal2-actions { width:100% !important; padding:0 20px !important; flex-wrap:unset !important; }

/* recommender */
.reco_data { width: max-content; padding: 10px; text-align: center; margin-left: auto; background-color: var(--white); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.28); }

/* 230829 */
/* 로그인 페이지 */
.join_btn { display: flex; justify-content: center; align-items: center; width: 100%; height: 50px; background: #C51B1F; border-radius: 6px; font-size: 18px; font-weight: 500; cursor: pointer; color: #fff; text-align: center; }

/* 출금 신청 페이지 */
.refresh_btn { display: flex; padding:5px 10px; background-color:#00E0ED; border-radius:10px; color:#fff; cursor: pointer; }
/* #46D2D0 */
.point_card.withdraw { box-shadow: 0 1px 3px rgba(0,0,0,0.28); }
.point_card.withdraw .top { display: block; }
.point_card.withdraw .top .amount { font-size: 24px; }

/* 230830*/
/* 공지사항 페이지 */
.card.notice { background-color:#fff; box-shadow: 0 1px 3px rgba(0,0,0,0.28); }

/* sweet alert 버튼 색상 변경 */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus { box-shadow:0 0 0 3px rgba(0,0,0,0) !important; }
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm { background-color:var(--main) !important; }

/* main - level mark */
.level_mark { display: flex; justify-content: center; align-items: center; height:30px; padding:4px 12px; border-radius:20px; background-color: #7061E9; color: #fff; font-size: 14px; font-weight:bold; }
/* height:30px; */
.attend_btn { flex-direction: column; width: 80px; height: 80px; border-radius:6px; background-color: var(--main); color: #fff; text-align: center; font-size: 14px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.28); cursor: pointer; }
.attend_btn img { width: 50px; margin-right: 0; }
.attend_btn.checked { background-color: #fff; color: var(--main); box-shadow:none; cursor:default; }

/* 230831*/
/* main - logo */
.header_logo img { height: 36px; }

/* login */
.main.login_main { display: flex; justify-content: center; align-items: center; }
.find_pw_btn{display: flex;justify-content: center; position: relative;}
.find_pw_btn::before{content: "";position: absolute;left: 50%;bottom: -3px;transform: translate(-50%,-50%);border-bottom: 1px solid #C51B1F;width: 76px;}

/* 23/09/04 */
/* 메인페이지 - 메뉴 버튼 색상 추가 */
.direct_link_list li.blue { background:linear-gradient(120deg, #75B0F6, #3E79EC); }
.direct_link_list li.green { background:linear-gradient(120deg, #56C1D5, #20A8CA); }
.direct_link_list li.purple { background:linear-gradient(120deg, #8199E7, #8F81D3); }
.direct_link_list li.pink { background:linear-gradient(120deg, #FCA6CD, #FA83B9); }
.direct_link_list li.navy { background:linear-gradient(120deg, #377CBD, #002F67); }
.direct_link_list li.yellow { background:linear-gradient(120deg, #F9F871, #FFDF73); }
.direct_link_list li.apricot { background:linear-gradient(120deg, #FFB5A0, #FF9F87); }
.direct_link_list li.main { background:linear-gradient(120deg, #EA4439, #C51B1F); }
.direct_link_list li.navy p { color: #fff; }

/* 23/09/05 */
/* shopping_list */
.shopping_list { display:grid; grid-template-columns:repeat(2,1fr); grid-column-gap:20px; grid-row-gap:30px; }
.shopping_list li a .img { width:100%; height:0; padding-top:100%; margin-bottom:10px; background-color: #fff; border-radius:10px; overflow:hidden; position:relative; }
.shopping_list li a .img img { width:100%; height:100%; object-fit:contain; object-position:center; position:absolute; left:0; top:0; }
.shopping_list li a .discount { margin-left:10px; font-size:12px; font-weight:500; color:var(--gray); text-decoration:line-through; }
hr.type2 { border: 4px solid #F4F3F8; }

/*상품 상세보기*/
.shopping_product_img { width:100%; height:0; padding-top:56.25%; position:relative; }
.shopping_product_img img { width:100%; height:100%; position:absolute; left:0; top:0; object-fit:contain; object-position:center; }
.discount { font-size:12px; font-weight:500; color:var(--gray); text-decoration: line-through; margin-left:6px; }
.shopping_product_explain { max-width: 768px; margin:0 auto; }
.shopping_product_explain p { width:100%; margin:20px 0; font-size:14px; font-weight:500; }
.shopping_product_explain p.font_22 { font-size: 22px; font-weight: bold; }
.shopping_product_explain p img { max-width:100%; margin:0 auto; border:1px solid #efefef; }
button[type="button"].plus.active { background-color: var(--red); color: var(--white); }
button[type="button"].minus { width: 29px; height: 29px; font-size: 18px; border-radius: 50%; padding: 0; border: 1px solid #A2ACBD; }
button[type="button"].minus.active { background-color: var(--red); color: var(--white); border: 1px solid #fff; }
input.shopping_amount { width: 60px; padding:2px; text-align: center; font-size: 16px; font-weight: 700; background-color: #fff; }
button[type="button"].plus { width: 28px; height: 28px; font-size: 18px; border-radius: 50%; padding: 0; }
.buy_btn { position: fixed; bottom:0; left:0; right:0; width:100%; max-width:767px; margin:0 auto; width:100%; background-color: #fff; }
button[type="button"].payment.active { border: 1px solid var(--main); background-color: var(--main); color: #fff; }
button[type="button"].payment { padding:10px 20px; border: 1px solid var(--main); background-color: #fff; color: var(--main); border-radius:8px; }
.text_card_list.order { box-shadow: none; border: 1px solid #A2ACBD; }
/*상품 주문하기*/
.orderimg { flex: none; width: 94px; height: 94px; margin-right: 20px; }
.orderimg img { width: 100%; height: 100%; object-fit: contain; object-position: center; background-color: #fff; border-radius: 4px; border: 1px solid #A2ACBD; }
/*쇼핑내역 */
.shopcomplet_box { border-radius: 10px; margin-bottom:10px; padding:20px; cursor:pointer; background-color: #fff; }
.history_viewtxt { flex: none; font-size: 15px; font-weight: 500; color: var(--dark_gray); }
.addr_box { text-align: right; }
.icon_actionimgbox { width:56px; margin:0 auto; }
.fran_imgbox { width:56px; height:56px; }

/* product_info */
.withdrawal_history_details { display:flex; justify-content: space-between; align-items: center; padding:10px 0; border-bottom:1px solid #f1f3f5; }
.withdrawal_detailsbox div:first-child { padding-top:0; }
.withdrawal_detailsbox div:last-child { border-bottom:none; padding-bottom:0; }
.withdrawl_info li:last-child { border-bottom:none; padding-bottom:0; }
.withdrawal_detailsbox { border:1px solid var(--main); padding:20px; border-radius: 10px; }

/* shopping_order */
.type3 { border:4px solid #fff; }
button.search { width:80px; padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; border: 1px solid var(--main); background-color: var(--main); color: var(--white); }
.btn.cancel { background-color: #fff; border: 1px solid var(--main); color: var(--main); }

/* shopping_history_view */
.withdrawal_detailsbox.history_view { border:none; background-color: #fff; }

/* 23/09/06 */
/* shopping_order 상품 옵션 */
label:has(select.select_buyopt)::before { top: 45%; }
.text_card_list li.d_none { display: none; }

/* 23/09/13 */
/* 메인페이지 - 추천/후원 매출 슬라이드 추가 */
/* point_card */
.point_card.yellow { background:linear-gradient(120deg, #FFDF73, #FFCD6B); }
.point_card.apricot { background:linear-gradient(120deg, #15BEBB, #59BAB7); }
.point_card.yellow .top .title, .point_card.yellow .top .amount { color: #000; }
.point_card.apricot .top .title,.point_card.apricot .top .amount { color: #fff; }

/* 23/10/16 */
/* 전환하기 페이지 */
.point_card.white { background:#ffffff; }
.point_card.white .top .title { padding: 8px 14px; border-radius: 6px; background-color: #ffffff; }
.point_card.white .top .title.red { background-color: #DA5A59; }
.point_card.white .top .title.blue { background-color: #348CF8; }
.point_card.white .top .title.yellow { background-color: #FFC82F; }
.point_card.white .top .title.turquoise { background-color: #20A8CA; }
.point_card.white .top .title.green { background-color: #259839; }
.point_card.white .top .title.purple { background-color: #8F81D3; }

.recom_box { display: flex; align-items: flex-end; }
.recom_box button { background-color: var(--main); color: #fff; min-width: 60px; border-radius: 10px; height: 50px; flex:none; font-size:16px; font-weight: 500; margin-left:10px; }
/* .recom_info { font-size: 14px; color: #ff0000; font-weight: 700; } */
.fileUpload { position: relative; overflow: hidden; cursor:pointer; }
.fileUpload input.upload { position: absolute; top: 0; right: 0; margin: 0; padding: 0; font-size: 20px; cursor: pointer; opacity: 0; width:100%; height:100%; filter: alpha(opacity=0); cursor:pointer; }
.attach { border: none; margin-left:10px; border-radius: 6px; background-color: var(--main); color: var(--white); height: 42px;
 cursor:pointer; flex:none; cursor:pointer; }
.attach span { padding: 10px 14px; display: block; height:100%; width:100%; cursor:pointer; }
.uploadinput { height: 42px; background-color: white; border: none; width: 100%; padding: 0 14px; }
.file_uploadbox { display: flex; align-items: center; }
.line { border:1px solid #dbdbdb; margin:4px 0; }
.imgqnabox img { max-width:30%; }
.exchange_list_button_box { display:flex; align-items:center; position:absolute; right:0; top:50%; transform:translateY(-50%); }
.exchange_list_button_box button { margin-right:10px; }
.exchange_list_button_box button:last-child { margin-right:0; }
.point_card_exchange { position: relative; }
.exchange_list_button { width:70px; height:60px; background-color:var(--main); color:#fff; font-size:12px; font-weight:700; }
.point_card_box.active { transform: translateX(-170px); }
.point_card_box { position:relative; transition:transform 0.3s; }
.exchange_box { overflow: hidden; }
.amount_btn_box { display: flex; gap:10px; }
.amount_btn_box li { width:100%; height: 40px; border-radius: 6px; font-size: 16px; font-weight: 500; background-color: var(--card_bg); border: 1px solid #C51B1F; cursor: pointer; }
/* .amount_btn_box li:last-child { background-color: #ddd; border:none; color: #000; } */

/*231031 은행명 추가 */
.bank_card { background: var(--white); padding:16px; border-radius: 10px; margin:10px 0; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
.bank_card li p { font-size:16px; font-weight: 700; }
.bank_card li p span { display: inline-block; width:73px; }

.card_middle { padding:0 20px 10px; }
.card_middle p { font-size:14px; color:var(--white); text-align: right; font-weight: 700; font-family:"montserrat"; margin-top:6px; }
.card_middle p span { background: var(--black); border-radius: 6px; display: inline-block; padding:4px 10px; }

/*231102 포인트카드 수정 */
.point_card.change .top { padding:30px 20px 30px; }

.dall_box { padding:0 20px; text-align: right; color:var(--white); font-size:18px; padding:4px 20px 10px; }
.dall_box span { font-weight: 700; }
.addr_txt {word-break: break-all; width:100%;}
.copybtn { height: 50px; background: var(--main); border-radius: 6px; font-size: 18px; font-weight: 500; cursor: pointer; color: #fff; padding:0 10px; margin-left:10px;}
.addr_txt span:nth-child(2) {width:auto;}
.addr_boxwrap {display: flex; align-items: center;}
.addr_boxwrap img {cursor:pointer;}
.lang_change {width: 36px;height: 26px;margin-right: 4px;font-size: 16px;}
.lang_change option{font-size: 16px;}

.lang_change img { max-width:100%; height:100%;}
.otp_title { font-weight: 700; font-size:20px; border-bottom:1px solid #cdb9b9; padding:20px 0 10px 20px;}
.play_link img {max-width:100%; height:50px;}
.play_wrap { display:flex; justify-content: center; align-items: center; margin-top:20px; gap:20px; padding:0 20px;}
.qrimgbox img {height:140px; max-width:100%; margin:0 auto;}
.qr_code_wrap { display: flex; justify-content: center; align-items: center; margin-top:20px;}
.qr_code_txt { border:1px solid #f1f3f5; background: var(--white); display: flex; align-items: center; gap:10px; border-radius: 10px;
  padding:6px 20px; font-weight: 700; font-size:16px;}
.qr_code_txt img { cursor:pointer; }
.notice_viewimg img { max-width:60%; margin:30px auto 0;}
@media screen and (max-width:767px){
 .imgqnabox img { max-width:100%; }
  .notice_viewimg img { max-width:100%; }
 }



 @media screen and (max-width:580px){
   .addr_boxwrap img {margin-left:20px; cursor:pointer; margin-top:0;}
  }

@media screen and (max-width:500px){
 .text_card_flex li { flex-wrap:wrap; gap:0; }
 .text_card_flex li p:nth-child(1) { width:100%; margin-bottom:6px; }
 /* .point_card .top .title { width:100%; }
 .change .top .amount { width:100%; }
 .change .top .amount { flex-wrap:wrap; }
 .change .top .amount span:nth-child(1) { display: inline-block; width:100%; }
 .change .top .amount span:nth-child(2) { display: inline-block; width:100%; text-align: left; } */}
/*
@media screen and (max-width:420px){
 .change .top .amount { flex-wrap:wrap; }
 .change .top .amount span:nth-child(1) { display: inline-block; width:100%; }
 .change .top .amount span:nth-child(2) { display: inline-block; width:100%; text-align: left; }
 }*/

@media screen and (max-width:375px) {.amount_btn_box li { font-size:14px; }
 }