@charset "UTF-8";

/* 메인 페이지 배너영역- swiper 레이아웃 */
/* 배너 */
.banner li {width: 100%; max-width:800px; padding:10px 0;}
.banner li a img {max-height: 150px; border-radius: 10px; margin:0 auto;}
.swiper {overflow:hidden; position:relative; width: 100%; max-width: 800px; margin:0 auto; padding-bottom:10px; background-color: var(--bg);}
.swiper-wrapper {height:unset;}
.swiper-container-horizontal>.swiper-pagination-bullets{bottom: 0px; }
.swiper-pagination-bullet-active {background-color:var(--main);}
.swiper-button-next {background-image: url(../img/svg/icon_next.svg);}
.swiper-button-prev {background-image: url(../img/svg/icon_prev.svg);}
/* //배너 */

/*패널박스*/
.pannel_container { position: fixed; top:0; left:-300px; width:300px; height:100svh; min-height:100svh; max-height:1500px; background-color: #444444; z-index:999; transition: 500ms; overflow-y: auto;}
.pannel_container.active { left: 0; }
.pannel_box { width: 100%; height:100%; padding:20px; color:var(--white);}
.container.active { width:100%; overflow: hidden;}
.logout_btn { margin-left:10px; padding: 14px; width:50px; height:50px; border-radius: 10px; background-color: #222222;}
.home_active { width:100%; padding:5px; border-radius: 10px; background-color: #555555; }
.home_active > div { width:100%; padding:10px 15px; border-radius: 10px; background-color: #555555; }
.pannel_menu > li { width:100%; padding:5px; border-radius: 10px;}
.pannel_menu > li.active { background-color: #555555;}
.pannel_menu > li > div { padding: 10px 15px; }
.pannel_detail { display: none; transition: 500ms;}
.pannel_detail.active { display: block; transition: 500ms;}
.pannel_detail > li { border-radius: 10px; }
.pannel_detail > li > a > div { width: 100%; padding: 10px 20px; }
.pannel_detail > li:active { background: #777777; }
/* width */
.pannel_menu::-webkit-scrollbar { width: 5px; }
/* Track */
.pannel_menu::-webkit-scrollbar-track { background: #444444; }
/* Handle */
.pannel_menu::-webkit-scrollbar-thumb { background: #333; }
/* Handle on hover */
.pannel_menu::-webkit-scrollbar-thumb:hover { background: #555; }


.slider_img img {width:24px; height:24px;}

/*로그인 이미지 */
/* .login_img {width:30px; height:30px; display: inline-block; overflow: hidden; border-radius: 50%; margin-right:8px;} */
.login_img img {width:36px; margin-right: 5px;}

/*프로필 이미지 CSS */
.add_pro_icon { position: relative; width: 60px; height: 60px; border: 1px solid #BCC1CE; border-radius: 50%; overflow: hidden; flex:none;}
.pro_add { position: relative;width: 100%; padding:20px 20px 10px 20px;  display: flex;}
.mainlogoimgbox {width:60px; height:60px; overflow: hidden; border-radius: 50%; flex:none;}
.mainlogoimgbox img {width:100%; height:100%; object-fit: cover;}
.myinfo {  margin-left:30px;}
.mylevel {background-color: #212121; color:#fff; display: inline-block; padding:6px 16px; border-radius: 10px; font-size:14px;}


/*flex 섹션*/
.flex_section {display:grid; grid-template-columns:repeat(3,1fr); grid-gap:10px; padding:10px; text-align: center; border-radius: 10px; background: linear-gradient(-225deg, #2F9BCC, #50418C); }

/*주간 리포트*/
.week_report_title {background-color: #E31D2E; display: flex; align-items: center; padding:4px 10px; border-radius: 10px; color:#fff; height:30px;}
.weekbtnbox {display:flex; justify-content: space-between; align-items: flex-end; margin-bottom:4px;}
.weekbtnbox button {padding:4px 10px;}
.week_report_title img {width:24px; margin-right:6px;}
.no_comp {background: #e31d2e; border:none; font-size:14px; width:max-content; margin:0 auto; padding:4px 12px; border-radius: 10px; color:#fff;}
.week_padding {display:flex; justify-content: space-between; align-items: center;  text-align: center;}
.week_padding li {width:33%; word-break: break-all;}
.week_flexbox {padding:10px 20px; border-radius: 10px; background: linear-gradient(-225deg, #2F9BCC, #50418C);}

/*카드 이미지 영역*/
.card_logobox img {width:40px; height:40px; margin-right:4px;}
.list_card { padding:10px 20px; border-radius: 10px; background-color: var(--sub_dark);}
.card_logobox {display:flex; align-items: center; }
.update_box {display: flex; align-items: end;}

/*멤버십 영역*/
.no_target {background-color: #fff; width:48%; border-radius: 10px; position: relative; padding:20px 30px; width:100%;}
.no_txt {background-color: #e31d2e; position: absolute; top:-12px; left:-12px; color:#fff; padding:4px 6px; border-radius: 10px; font-size:14px;}
.membership_imgbox {width:110px; height:110px; margin:0 auto; border:1px solid var(--border); border-radius: 10px; overflow: hidden;}
.membership_imgbox img {width:100%; height:100%; object-fit: cover;}


/*qr코드 p2p 받기/전송*/
.icon_swap { border:1px solid var(--sub); padding:20px; border-radius: 10px; display:flex; align-items: center;}
.icon_action {border:1px solid var(--border); padding:10px 20px; border-radius: 10px;}
.icon_action img {margin:0 auto;}
.icon_action p {text-align: center;}
/* .icon_boxwrap {display: flex; align-items: center; justify-content: space-between; padding:0 20px; margin-top:20px; flex-wrap:wrap;} */
.icon_boxwrap { display: grid; grid-template-columns: repeat(4,1fr); grid-gap:10px; padding:0 20px;}
/*공지사항 영역*/
.notice_card {border:1px solid var(--border); padding:10px 20px; display:flex; border-radius: 10px; }
.notice_card > p {color:#e31d2e; font-weight: 700;}
.date_txtwrap {color:gray; font-size:13px;}

/*하단 라인*/
.line {border:1px dashed #ddd;margin:30px 20px;}

.services_telbox {text-align: center; background-color: #3E79F7;  border-radius: 10px; padding:6px 10px; font-weight: 400px; font-size:14px;}
.services_telbox a {display:block; color:#fff;}


/*주간 리포트 */
.today_rollupbox {border:1px solid var(--border); border-radius: 10px;  font-size:15px; }
.today_rollupbox li:nth-child(1) {border-bottom:1px solid #ddd; padding-bottom:12px;}
.calc_method {font-size:13px; color:gray; margin-top:4px;}
.today_weekimg img {width:30px;}

/*약관 동의*/
.services_terms {border:1px solid var(--border); border-radius: 10px;}
.services_title {border-bottom:1px solid #ddd;  padding:10px 20px; text-align: center;}
.services_details {padding:0 20px; margin:10px 0; height:250px; overflow: auto;}
.services_radiochk {border-top:1px solid #ddd; padding:10px; text-align: center;}


/*공지사항*/
.search_inputbox {  position: relative;}
.seearch_img {position: absolute; top:60%; right:10px; transform: translateY(-50%); cursor:pointer;}
.search_inputbox .input_design { padding:8px 36px 8px 16px}
.notice_titlebox {width: 100%; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all;}
.notice_box {border-bottom:1px solid #ddd; padding:10px 20px; }
.noticebox_wrap {border-radius: 10px;}
.notice_date {color:#999; font-size:12px; margin-top:6px;}
.notice_viewtitlebox {border-bottom:1px solid #ededed; padding:10px 20px; word-break: break-all;}
.notice_viewdetails {border-bottom:1px solid #ededed; padding:10px 20px; word-break: break-all;}

/*출금 신청*/
.mybalance_box {background-color: #3E79F7; color:#fff; border-radius: 10px; padding:20px ; text-align: center;}
.mybalance_amount {font-size:30px; font-weight: 700;}
.withdrawl_info {border:1px solid var(--border); padding:20px; border-radius: 10px;}
.withdrawl_info li {border-bottom:1px solid #ededed; padding:10px 0;}
.withdrawl_info li:nth-child(1) {padding-top:0;}
.bank_info {margin-top:4px; padding:20px; border:1px solid var(--sub); border-radius: 10px;}
.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(--border); padding:20px; border-radius: 10px;}

/*마이페이지*/
.mypage_listbox li {margin-bottom:8px;}
.terms_link {display:flex; justify-content: space-between; align-items: center;  background-color: #ddd;  padding:20px; cursor:pointer;}
.terms_link.bo_b {border-bottom:1px solid #fff;}


/*tree*/
.container_tree { position: relative; overflow: auto; }
.rem_box { background-image: url("../img/svg/icon_search.svg"); background-repeat: no-repeat; background-position: 98%, center;  }
.tree1 ul { padding-top: 20px;  position: relative; display: flex; }
.tree1 li { text-align: center; position: relative; padding: 20px 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(--border); display: inline-block; width: 190px;  border-radius: 6px;  }
.tree_idbox { display:flex; align-items: center; justify-content: space-between; padding:10px; border-radius: 4px 4px 0 0; color:var(--white); background-color:var(--border); min-height:40px; font-weight:600; height:auto; font-size:12px;}
.set1 {width:100%; height:1px; margin:0 auto;}
.tree_imgbox img { width:30px; margin:0 auto;}
.tree_imgbox, .tree_datebox { padding:8px 0; font-size:12px; font-weight:400;}
.tree_namebox {font-size:12px; font-weight:600; padding-top:4px; word-break: break-all;}
.tree_search{padding:0 20px;}
.tree_imgbox {border-bottom:1px solid #ddd;}
/*스크롤 제거 이벤트 */
/* .scroll_box {  -ms-overflow-style: none; scrollbar-width: none; overflow:auto;}
.scroll_box::-webkit-scrollbar { display: none; } */
.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(--border); width: 50%; height: 18px; }
.tree1 li::after{ right: auto; left: 50%; border-left: 2px solid var(--border); }
.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(--border); 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(--border); width: 0; height: 20px; }

/* 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(--sub); }
.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); }
.tree1 li a:hover+ul li a div p:nth-child(1) {  background:var(--sub); }
.input_box  {width:100%; max-width:768px; margin:0 auto;}
.se_bu {white-space: nowrap;}
.button_boxi {position: fixed;  right: 30%;  bottom: 2%; z-index: 100;}
.button_boxi_admin { position: fixed;right: 20%; bottom: 2%;  z-index: 100;}

/* 뉴스 : NBR - 2023.03.09 */
.news_list_btn { display:flex; flex-wrap: wrap;}
.news_list_btn > li { display: flex; padding: 5px 15px; background-color: #fff; border:1px solid #ededed; border-radius: 20px; margin: 0 2px 5px;}
.news_list_btn > li > p { font-weight: 400; color: #000; font-size: 14px;}
.news_list_btn > li.active { background-color: #3E79F7; }
.news_list_btn > li.active > p { color:#fff;}
.new_box { border-bottom: 1px solid #ddd; padding: 10px 20px; height: 122px; }
.news_title_box { width: 100px; }
.news_title_box img { width: 100%; border-radius: 10px; object-fit: cover; }
.news_list_title { padding: 5px 15px; border:1px solid #3E79F7; color:#3E79F7; border-radius: 20px; font-size:14px; text-align: center;}
.news_titlebox {width: 100%; display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; word-break: break-all; }
.news_txt_box { display: flex; flex-direction: column; justify-content: space-between; height:100%;}

/* 뷰 */
.news_view_img_box { width: 100%; }
.news_view_img_box img { width: 100%; aspect-ratio: 4 / 3; }
.add_file_name { margin-right: 5px; padding: 3px 15px; background-color: #e31d2e; border-radius: 10px; color: var(--white); font-size: 14px;}
 .news_view_img_box video {max-width:100%;}
/*입금신청*/
.deposit_admin {border:4px solid var(--sub); padding:20px; font-size:18px; font-weight: 700; border-radius: 10px;}

/* 입출금내역 */
.dep_with_tab {display:flex; justify-content:center; align-items:center;}
.dep_with_tab li {width:100%; border-bottom:2px solid var(--light_gray); }
.dep_with_tab li a{display:block; text-align: center;  width:100%; height:100%; font-size:16px; font-weight:700; padding:10px 20px;}
.dep_with_tab .active{border-color:var(--main);}
.dep_with_cont {padding: 0 20px;}


/* 23.03.10 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: 550;}
.sidebar_cont {position: fixed; left:-100px; top:50%; transform:translateY(-50%); width:300px; height: 100%!important; max-height: 100%; background-color: var(--sidebar); color: var(--white); z-index:-1; opacity: 0; transition: 200ms ease; overflow-y: auto!important;}
.sidebar_cont.active {left: 0; opacity:1; z-index:999; transition: 200ms ease;}
.sidebar_inner {position: absolute; width: 100%;top: 0;left: 0;  padding: 20px;}
.my_info {padding:20px; border-radius:10px; background-color: var(--border); }
.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);}

/*회원 문의*/
.inquiry_tab{display:flex; justify-content:center; align-items:center;}
.inquiry_tab li{width:100%; border-bottom:2px solid var(--light_gray);}
.inquiry_tab li a{display:block; text-align: center; width:100%; height:100%; font-size:16px; font-weight:700;  padding:10px 20px;}
.inquiry_tab .active{border-color:var(--main);}
.textarea_box textarea {width: 100%; min-height: 330px; resize: none; padding: 8px 16px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 500;}
.inquiry_list{width:100%;}
.inquiry_list li{width:100%; border-bottom:1px solid var(--border_sub);}
.inquiry_list li a{display:block; width:100%; padding:20px 0;}
.inquiry_list li:first-child a{padding-top:0px;}
.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 .state.complete{color:var(--green);}
.inquiry_list li a .state.wait{color:var(--red);}
.inquiry_list li a .date{font-size:14px; font-weight:400; color:var(--gray);}
hr.type2 { border: 4px solid var(--white);}

/*mybalance 페이지 */
.progress_bar{width:100%; background-color: #EAEAEA; border-radius: 10px;}
.gage_bar { width: 0%; background-color:var(--main); border-radius: 10px; text-indent: 10px;}
.progress_figures { font-weight:bold;  font-size:16px;}
.progress_figures img { width:60px; height:60px; }

/* shopping_list */
.shopping_list{display:grid; grid-template-columns:repeat(2,1fr); grid-column-gap:20px; grid-row-gap:20px;}
.shopping_list li a .img{width:100%; height:0; padding-top:100%; margin-bottom:10px; border:1px solid var(--border); 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;}


/*상품 상세보기*/
.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 p{margin:20px 0; font-size:14px; font-weight:500;}
.shopping_product_explain p img{width:100%; border:1px solid #efefef;}
button[type="button"].plus.active { background-color: var(--red); color: var(--white);}
button[type="button"].minus {width: 28px;height: 28px;font-size: 18px;border-radius: 50%;padding: 0;}
button[type="button"].minus.active {background-color: var(--red); color: var(--white);}
input.shopping_amount {width: 40px; text-align: center; font-size: 16px; font-weight: 700;}
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 2px; width:100%;}
button[type="button"].payment.active { border: 1px solid var(--main); background-color: #fff; color: var(--main);}
button[type="button"].payment {border: 1px solid var(--border); background-color: #fff; color: #555;}
.option {font-size: 14px;font-weight: 500;color: #b1b1b1;margin:4px 0;}
/*상품 주문하기*/
.orderimg {flex: none; width: 54px; height: 54px; margin-right: 20px;}
.orderimg img {width: 100%; height: 100%; object-fit: contain; object-position: center;}
/*쇼핑내역 */
.shopcomplet_box {border:1px solid var(--border);border-radius: 10px;margin-bottom:10px;padding:20px; cursor:pointer;}
.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;}


/*230322 전환페이지내 사용할 클래스 추가 : 신정운 */
.swap_img img {width:38px; height:38px; position: relative; top:2px;}
.swap_linebar {height:1px; border:1px solid #f1f3f5; margin:20px 0;}

/*230322 가이드 : 신정운*/
.guide_tab_container {width: 100%;height: 64px;}
.guide_tab_box {position: fixed;width: 100%;max-width: 768px; background-color: var(--bg); z-index: 33;}
.guide_tab { width: 100%;text-align: center;padding: 24px 0 14px;border-bottom: 2px solid #f1f1f1;cursor: pointer; font-size: 16px; font-weight: 500;color: var(--dark_gray);}
.g_active {border-bottom: 2px solid var(--main); color: var(--main); font-weight: 700;}

.accor_tit {cursor: pointer;font-weight: 700; height: 60px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd;}
.accor_tit > span {font-size: 16px;}
.accor_cont {display: none; padding: 20px; border-bottom: 1px solid #f1f1f1;}
.accor_tit.active+.accor_cont {display: block;}
.accor_txt {  font-size: 16px;font-weight: 500; word-break: keep-all; line-height: 30px;}
.img video, .img img { width: 100%; height: 100%;}
.img { position: relative; width: 100%; max-width: 500px; margin: 20px auto; background-color: lightgrey; display: block; border: 1px solid #F1F1F1;}
.accor_tit.active .arrow {transform: rotate(180deg);}
.cms_guidelink {width:100%; text-align: center; margin-top:40px; font-size:20px; padding-bottom:10px; }
.cms_guidelink a {color:#3E79F7; text-decoration: underline;}

/* 230413 회원가입 - 주소 정보 관련 내용 추가 :NJH */
.post_search {height: 36px; padding:6px 10px; margin-top: 6px; margin-left:10px; color:#fff; font-weight:bold; border-radius:6px; background-color: var(--main); white-space: nowrap;}
.divide_line_top {border-top: 1px solid var(--light_gray);}

/* 230413 main - popup 추가 :NJH */
.dark_bg {position: fixed; left:0; top: 0; width: 100%; height: 100%; background-color: rgba(34,34,34, 0.6); z-index: -1; opacity: 0;}
.pop_up {position: fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 40px); max-width:300px; background-color: #fff; border-radius: 10px; box-shadow: 0px 10px 50px rgb(0 0 0 / 40%); text-align: center; z-index: -1; opacity: 0; transition: opacity 300ms ease, z-index 300ms ease;}
.dark_bg.active_pop {display: block; max-width: unset; transform:translateX(0); opacity: 1; z-index: 120; transition: opacity 300ms ease,z-index 300ms ease;}
.pop_up.active {opacity: 1; z-index: 150; transition: opacity 300ms ease, z-index 300ms ease;}
.pop_txt {padding-left:20px; padding-right: 20px;}
.pop_txt h3{color: var(--main);}
.pop_btn {display: block; padding:6px 10px; margin-top:20px; background-color: var(--main); border-radius:6px; color:#fff; font-weight: bold; cursor: pointer;}
a.pop_btn {color: #fff;}
.pop_close {display: flex; justify-content: flex-end;padding:10px 20px; font-size: 24px; cursor: pointer;}


/* 230417 추천인 - leg 색상 추가 :NJH */
.leg_red {background-color: #AD0000;}
.leg_orange {background-color: #FF693E;}
.leg_yellow {background-color: #FFBB33;}
.leg_yellowgreen {background-color: #ACF88B;}
.leg_green {background-color: #00AC3C;}
.leg_aqua {background-color: #00FFDD;}
.leg_blue {background-color: #00BEFF;}
.leg_cobalt {background-color: #0A00FF;}
.leg_pink {background-color: #E90067;}
.leg_purple {background-color: #6C4D99;}
.level_index {display: flex; justify-content: space-evenly; align-items: center;flex-wrap: wrap; padding-top: 10px;}
.level_index li {min-width:8%; padding-top: 10px; margin-right: 10px;}
.level_index span {width: 12px; height: 12px;}

/* 230419 메인 - 출석체크버튼 추가 :NJH */
.attend_check_btn {height: 50px; border-radius:25px; background: linear-gradient(-225deg, #2F9BCC, #50418C); text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 2px rgba(34,34,34, 0.6); box-shadow: 0 0 3px 1px rgba(0,0,0,0.2); cursor: pointer;}
.attend_check_btn img {width: 30px;}
.attend_check_btn.inactive {background:var(--gray); color: var(--light_gray); text-shadow: none; box-shadow: none;}

/* 230502 메인페이지 - 요약영역 레이아웃 변경 */
.main_summary {padding:10px 20px; text-align: center; border-radius: 10px; background: linear-gradient(-225deg, #2F9BCC, #50418C);}
.link_btn {padding:6px 10px; border-radius:30px; border: 1px solid #fff; color: #fff; font-size: 16px; font-weight: bold; box-shadow: 0 0 3px 1px rgba(0,0,0,0.2); cursor: pointer;}

/* 230502 메인페이지 - Taracoin에 주소복사/보내기/내역 버튼 추가 */
.taracoin_card {position: relative; height: 136px; margin-bottom: 20px;}
.taracoin_card > img {position: absolute; right: 20px; top: 20px; width: 36px; height: 36px; z-index: 25;}
.taracoin_card .list_card {position: absolute; left: 0; transition: left 200ms ease; z-index: 20; background:98% 10px / 36px no-repeat url('../img/svg/icon_ellipsis_dot.svg') , var(--sub_dark);}
.taracoin_card .list_card.active { left: -360px; transition: left 200ms ease;}
.taracoin_card .list_card.two_btn.active { left: -250px; transition: left 200ms ease;}
.taracoin_card .btn_list {position: absolute; left: unset; right: 20px; top: 14px; display: flex; justify-content: space-between; align-items: center; z-index: 10;}
.btn_list li{margin-right: 10px; white-space: nowrap;}
.btn_list li:last-child{margin-right: 0;}
.btn_list li.cursor, .btn_list li a {width:100px; height:96px; padding: 6px 10px; border-radius:10px; background-color: var(--sub); color: #fff; text-align: center;}

/*230502 send> send 관련 페이지 */
select.form_box {-webkit-appearance:none; /* for chrome */-moz-appearance:none; /*for firefox*/appearance:none;}
select.form_box::-ms-expand{display:none;/*for IE10,11*/}
select {background: url('../img/svg/icon_arrow_down.svg') no-repeat 97% 50%/15px auto;}
.form_box { display:block; width:100%; height:auto; padding:10px; box-sizing: border-box; margin-top:6px; outline:none; color:#fff; resize:none; font-size:16px; border-radius: 10px; border:1px solid #ced4da; }
input.form_box {color: var(--sub_dark);}
.button_i { width: 100%; padding:12px 0; border-radius: 10px; background-color:var(--main); color:#fff; font-size:16px; font-weight:bold;}
.button_i:hover { background-color:var(--sub);}
.send_button { width: 33%; padding: 10px; margin-bottom: 2px; font-size: 20px; border-radius: 10px; background-color: #efefef; outline: none; border: none; }
.ch_p > li, .ch_p02 > li { border-bottom:1px solid var(--border_sub); padding:4px; }
.ch_p, .ch_p02 { padding:10px; margin-top:10px; border-radius: 10px; border:1px solid var(--border); background-color:var(--sub_dark);  }
.ch_p span:last-child { width:70%; overflow:hidden; text-overflow: ellipsis; text-align: right; white-space: nowrap; }
.ch_p02 span:last-child { width:68%; text-align: right; word-break: break-all; }
.ch_p span, .ch_p02 span { font-size:16px; padding-top:6px; padding-bottom:6px; }
.margin_T10 label { font-size:16px; }
.re_spa p:nth-child(1) { color:red; font-size:16px; font-weight:bold; }
.re_spa .m_send, .pc_send { font-size:14px; font-weight:bold; margin-top:4px; }
.button_img { width:50px; height:36px; background:transparent; outline:none; }
.button_img img {display: inline; width: 24px; margin-bottom: -10px;}
.m_send { display:none; }
.addrbox { padding: 10px; margin-top: 10px; border-radius: 10px; border: 1px solid var(--border); background-color:var(--sub_dark);}
.addrbox input { width:100%; }
.addrbox li:nth-child(1) { padding-bottom:10px; border-bottom:1px solid var(--border); }
.addr_txt { position: relative; top:4px; }
.addr_box { width:80%; }
.addr_box small { color:red; font-weight:bold; }
.crypto_txt { color:red; font-size:14px; margin-top:4px; line-height:20px; font-weight:bold; }

/* send3 CSS */
.sender_txt { text-align: center; font-size:16px; border:1px solid #6c757d; border-radius: 10px; padding:6px; word-break: break-all; }
.sender_txt p { padding:10px 0; }
.sender_txt p:nth-child(1) { border-bottom:1px solid #ededed; }
.stage { height:100px; }
/* //send3 CSS */

/* send4 CSS */
/* .key_input { margin-bottom:20px; } */
.key_input p:nth-child(1) { text-align: center; font-weight: bold; font-size:16px; color:#fff; margin-bottom:8px; }
.key_input input:read-only { background:transparent; border:none; outline:none; text-align: center; }
.key_input input::placeholder { font-size:12px; }
/* //send4 CSS */

/* send5 */
.complet_txt { text-align: center; color:#3f51b5; font-weight: bold; font-size:16px; margin-bottom:20px; }
/* //send5 */

/*send history*/
.send_history li { margin-bottom:20px; }
/*//send history*/

/* 기존 효과 (send3) */
.dot-flashing { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main); color: var(--main); animation: dotFlashing 1s infinite linear alternate; animation-delay: .5s; top:50%; left:50%; transform: translate(-50%, -50%); }
.dot-flashing::before, .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0; }
.dot-flashing::before { top: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main); color: var(--main); animation: dotFlashing 1s infinite alternate; animation-delay: 0s; }
.dot-flashing::after { top: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: var(--main); color: var(--main); animation: dotFlashing 1s infinite alternate; animation-delay: 1s; }

@keyframes dotFlashing {
 0% { background-color: var(--main); }
 50%,
 100% { background-color: var(--light_gray); }
 }

/* send4.html / qr_send_step3.html pinNumber-keypad */
.number_box { padding-top:5vh; text-align: center; }
.key_input .number_box input { width: 40px; height: 40px; margin: 0 0 5vh; padding: 0; border-radius: 40px; text-align: center; background-color: var(--inactive); /*background-color: #3f51b5; */ color: transparent; }
.key_input .number_box input.pin_active { background-color: var(--main); }

/* send_main.html */
.send_method_type { flex-wrap:wrap; padding: 30px 0; }
.send_method_type > li { width:48%; padding:20px; margin-bottom: 20px; border-radius: 18px; box-shadow: 0 0.5px 5px rgb(0 0 0 / 10%); }
.send_method_type > li h3 { margin-bottom: 10px; }
.send_type li { display: flex; justify-content: center; align-items: center; height: 48px; background-color: #aaacff; border-radius: 10px; }
.send_type li:first-child { margin-right: 5%; }
.send_type a { display: block; padding: 8px 10px; text-align: center; color:#fff; transition: color 300ms ease; }
.send_type li:hover a { color:#fff; color: var(--main); }
.wallet_address { padding:20px 0; }

/* send_history_list.html */
.clip { width: 100%; line-height: 90px; text-align: center; opacity: 1; transition: opacity 300ms ease-in-out; }
.clip.inactive { width: 100%; line-height: 90px; text-align: center; opacity: 0; transition: opacity 300ms ease-in-out; }
.o_icon { width: 6px; height: 6px; color: #FF6464; border-radius: 50%; }
.send_history_item {padding: 10px 20px; margin-top: 20px; margin-bottom: 20px; border: 1px solid var(--border); border-radius:10px; background-color: var(--sub_dark);}
.send_list_box { width:100%; padding:10px 0 20px 0; border-top: 1px solid var(--border_sub);}
.send_list_box > li {padding: 10px 0; border-bottom: 1px solid var(--border_sub);}
.send_list_box > li:last-child {border-bottom: none;}
.send_history_item .send_list_box:last-child {padding-bottom: 0;}
.send_contxt { font-size: 16px; color:#fff; word-break: break-all;}
.send_top_txt {width: 100px; font-size: 14px; font-weight: bold; color: var(--gray); white-space: nowrap;}
.send_bottom_txt { font-size: 12px; text-align: right; color:#04b904; }
.send_icon { width:30px; margin-right: 10px; }
.flex_left { display: flex; justify-content: left; }
.history_top_box { display: flex; justify-content: space-between; margin-bottom:20px; }
.history_top_icon { padding-right:10px; }
.history_inner_box { width:50%; text-align: left; display: flex; justify-content:center; align-items: center; border-radius: 10px; border: 1px solid #dddddd; padding:10px; }
.history_left { margin-right: 4px;}
.history_right { margin-left:4px; }

/* send main */
.by_wallet, .by_qr { width:100%!important; background-color: #7f85a5; }
.send_type.resend_type { display: flex; justify-content: space-around; }
.wallet_send.rewallet_send { width:50%; background-color: #fff; max-width: 200px; color:#3f51b5}
.wallet_address.rewallet_send { width:50%; background-color: #fff; max-width: 200px; color:#3f51b5}
.by_qr h3 { margin-bottom:20px!important; color:#fff; }
.by_wallet h3 { margin-bottom:20px!important; color:#fff; }

/* send_history_view */
.send_view_card {padding: 24px; border-radius: 20px 20px 0 0; border: 1px solid var(--border); background-color: var(--sub_dark);}
.send_view_line {display: flex; justify-content: space-between; padding: 10px 0;border-bottom: 1px solid var(--border_sub); word-break: break-all;}
.txn_mark {padding: 0 10px; margin-left: 10px; border-radius:20px; background-color: #f04086; color: #fff; font-size: 12px; line-height: 24px;}
.txn_mark.receive {background-color: #059cef;}
/* //send */

/* 23.05.04 main 공지 팝업창 NJH */
.pop_dark_bg { position: fixed; left:0; top: 0; width: 100%; height: 100%; background-color: rgba(34,34,34, 0.6); z-index: -1; opacity: 0;}
.pop_dark_bg.active {opacity: 1; z-index: 1000; transition: opacity 300ms ease,z-index 300ms ease;;}
.pop_up {position: fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 76px); max-width:300px; background-color: #fff; box-shadow: 0px 10px 50px rgb(0 0 0 / 40%); text-align: center; z-index: -1; opacity: 0; transition: opacity 300ms ease, z-index 300ms ease;}
.pop_up.active {opacity: 1; z-index: 1050; transition: opacity 300ms ease, z-index 300ms ease;}
.pop_cont {padding: 20px; }
.pop_close_x {font-size: 18px; font-weight: bold; cursor: pointer; color: #000;}
.pop_close_btn {display: inline-flex; padding: 4px 20px; border-radius:20px; background-color: var(--main); box-shadow: 0px 1px 5px rgb(0 0 0 / 40%); color: #fff; cursor: pointer;}
.pop_type {padding: 4px 10px; border-radius:20px; background-color: var(--main); text-align: center; font-size: 14px;}

/* 23.05.15 stock_purchase- tq 페이 비번 확인 버튼 추가 */
.tq_pw_check {margin-top:6px; margin-left:10px; padding: 10px 20px;border-radius: 8px;font-size: 14px;font-weight: 700;border: 1px solid var(--main);background-color: var(--main);color: var(--white);}


/* 231214 주식주문하기 선택창 */
.stock_product ul {display:grid; grid-template-columns:repeat(4,1fr); grid-gap:10px; }
.stock_product li label span { color:	var(--white); display: block; width: 100%;  font-size: 16px; text-align: center;
word-break: break-all; font-weight: bold; cursor:pointer; }
.stock_product li {width:100%; border:1px solid var(--border); padding: 10px 20px; border-radius: 10px; cursor:pointer;}
/* .stock_product input[type=radio]:checked + span {color: #fff; background:var(--main);} */
.stock_product li.stock_active {color: #fff; background:var(--main); border:none;}
.stock_choiceimg {width:56px; margin:0 auto;}

.select_white select.input_design {
  background: url(../img/svg/icon_arrow_down_black.svg) no-repeat 97% 50%/15px auto;
  background-color: #fff;
}





/*미디어 쿼리*/
@media (min-width:769px){
  .sidebar_cont {left: calc((100% - 768px) / 2);}
  .sidebar_cont.active {left: calc(50% - 384px);}
  .sidebar_cont.active::-webkit-scrollbar {display: none; /* Chrome, Safari, Opera*/}
}

@media (max-width:767px){
  .icon_boxwrap { grid-template-columns: repeat(3,1fr);}
  .icon_action p {word-break: keep-all; font-size:15px;}
  .stock_product ul {grid-template-columns:repeat(2,1fr); }
}

@media(max-width:576px){
  .banner li a { width: calc(100% - 40px); margin: 20px; padding:0;}
  .swiper-button-next,.swiper-button-prev {display: none;}

  /* 230502 메인페이지 - Taracoin에 주소복사/보내기/내역 버튼 추가 */
  .btn_list li:first-child, .btn_list li a {width:72px; }
}
@media(max-width:545px){
  .banner li a img {width: calc(100% - 40px);}
  .banner li {padding:0;}
}

@media (max-width:500px){
  .icon_boxwrap { grid-template-columns: repeat(2,1fr);}
  /* 230413 메인 페이지 상단 레이아웃 변경 :NJH */
  .week_flexbox {padding:6px 0; background-color: #fff; background-image: none;}
  .week_padding {display: block;}
  /* .week_flexbox {padding:0;}
  .week_padding {flex-wrap:wrap;} */
  .week_padding li { width:100%; padding:10px; margin-bottom:10px; background-image: linear-gradient(-225deg, #2F9BCC, #50418C); border-radius:6px;}
  .week_padding li:last-child {border-bottom:none;}
  .swap_box {flex-wrap:wrap;}
  .swap_img img {margin:0 auto;}
  .swap_img {width:100%;}

  .level_index li {width: calc(20% - 10px);}

  /* 230502 메인페이지 - Taracoin에 주소복사/보내기/내역 버튼 추가 */
  .taracoin_card .list_card.active, .taracoin_card .list_card.two_btn.active { left: -200px; }
  .btn_list {flex-direction: column; align-items: flex-end;}
  .btn_list li{margin-right: 0; margin-bottom: 6px;}
  .btn_list li:last-child{margin-bottom: 0;}
  .btn_list li:first-child, .btn_list li a {width:150px; height:unset; font-size: 14px;}


}

@media (max-width:430px) {
  .withdrawal_history_details {flex-wrap:wrap;}
  .withdrawal_history_details p:nth-child(1) {width:100%;}
  .addr_box {text-align: left;}
  .level_index li {margin-right: 6px;}
  .level_index li p{white-space: nowrap;}
  }


@media (max-width: 375px){
  /* .icon_boxwrap { grid-template-columns: repeat(2,1fr);} */
  .level_index li {width: calc(25% - 10px); margin-right: 0px;}
}