.mainwrap { background-color: var(--bg); width: 100%; max-width: 768px; margin:0 auto; padding:70px 0; height: auto;
  min-height: 100%; }
.main_visual { text-align: center; margin:20px 20px 0 !important;  }
.main_visual img { width:100%; }
.main_visual_slide {box-shadow: 0 1px 4px rgb(21 34 50 / 8%); border-radius: 8px;}
.main_visual .swiper-wrapper { padding-bottom:30px; }
.mylist .swiper-wrapper { padding-bottom:16px; }
.lvboximg img { max-width:100%; border-bottom: 4px dotted #dbe6e6;}
.lvboxp {  width:100%; border-radius: 8px; overflow: hidden; margin:0 auto;  background: #fff;}
.level_infotxt { background-color: #fff; padding:20px; text-align: left; }
.level_infotxt p:nth-child(1) { font-size:1.6rem; font-weight: 700; color:var(--main_sub); }
.level_infotxt p:nth-child(2) { font-size:2.6rem; font-weight: 700; color:#171725; }
.level_infotxt span { font-family: "montserrat"; font-weight: 600; }
.level_infotxt button { background:linear-gradient(165deg, var(--main) 0%, var(--main) 100%); border-radius: 8px; }
.lv_agreebuy { border:1px solid #c3c3c3; width:max-content; font-size:1.6rem; font-weight: 500; margin:10px auto 0; padding:10px; }
.button_container { cursor: pointer; z-index: 100; transition: opacity 0.25s ea`se; }
.button_container span { display: block; background: #fff; border: none; height: 2px; width: 24px; transition: all 0.35s ease; cursor: pointer; border-radius: 2px; }
.button_container span:nth-of-type(2), .button_container span:nth-of-type(3) { margin-top: 5px; }
.level_wrap { display: flex; justify-content: space-between; align-items: center; font-size:1.6rem; text-align: center; border: 1px solid #ededed; }
.level_wrap li { width:24%; border-right: 1px solid #ededed; font-weight: 500; }
.level_wrap li:last-child { border-right: none; }
.main_content { margin:20px 0; padding:0 20px;}
.buy_service { font-size:2.0rem; font-weight: 600; color:#01DDAC; font-family: "montserrat"; }
.buy_service span { font-family:noto_sans; font-weight: 700; }
.buy_amount { font-size:1.8rem; display: inline-block; font-weight: 700; }
.main_visual .swiper-pagination-bullets { bottom:0 !important; }
.mylist .swiper-pagination-bullets { bottom:0 !important; }
.main_visual .swiper-pagination-bullet { background:#BEC8CF !important; }
.main_visual .swiper-pagination-bullet-active  { background:var(--main) !important; }
.mylist .swiper-pagination-bullet { background:#BEC8CF !important; }
.mylist .swiper-pagination-bullet-active { background:#01DDAC !important; }
.listbox { background-color: #eef3ff; padding:10px; max-width:164px; height:60px; border-radius: 12px; display: flex; justify-content: center; align-items: center; }
.mylist { text-align: center; box-shadow: 0 1px 4px rgb(21 34 50 / 8%); border-radius: 8px; padding:20px 30px 0 !important; }
.mylist p { font-size:1.6rem; font-weight: 500; text-align: center; padding-top:6px; }
.popup_wrap { display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; 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: 100%; max-width:700px; max-height: 582px;
   background-color: #fff; border-radius: 10px; z-index: 9920; }
.pop_title { font-weight: 700; text-align: center; border-bottom: 2px solid var(--main); padding: 10px; font-size: 2.0rem; font-family: "Noto Sans KR", sans-serif; line-height: normal; }
.popup_txt { color: #000; word-break: break-all; font-family: "Noto Sans KR", sans-serif; padding: 20px; line-height: normal; font-size: 1.8em; font-weight: 700; max-height:300px; overflow: auto;   -ms-overflow-style: none; scrollbar-width: none; }
.pop_btn { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; border-top:1px solid #ddd; }
.pop_btn p { display: block; width: 48%; padding: 6px; text-align: center; color: #fff; font-size: 1.6rem;
   background: linear-gradient(165deg, var(--main) 0%, var(--dark) 100%); border-radius: 10px; cursor: pointer; font-weight: 700; }
.popup_txt::-webkit-scrollbar {  display: none;}
.high_income_wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);  z-index: 10000;}
.high_income_wrap .pop_cont {z-index:9950;}
.popup_wrap { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background-color: rgba(0,0,0,0.5); }
.high_incomebtn button:nth-child(1) {background:#003FFF;}
.high_incomebtn button:nth-child(2) {background:var(--main);}
.high_incomebtn { display: grid; grid-template-columns: repeat(2,1fr); width:calc(100% - 20px); margin:0 auto 10px;
grid-column-gap: 10px;}
.high_incomebtn button {width:100%; border-radius: 6px; color:#fff; padding:4px 10px; font-size:1.6rem;}
.buy_agreeready { background: #20505E; color:#fff; border-radius: 12px; padding:10px; }
.buy_complet { font-size:2.0rem; font-weight: 700; }
.buy_agreetxt { font-size:1.6rem; font-weight: 500; margin:20px 0 2px; }
.new_buy { font-size:1.5rem; font-weight: 400; padding-top:4px; }
.chase_point { display:flex; align-items: center; background-color:#fff; padding:0 20px;}
/*220916 SJW*/
.chase_point button { min-width:110px; height:30px; background: #0E6F9C;}
.chase_point p { font-size:1.4rem; font-weight: 500; margin-left:26px; }
.chase_point p span { font-size:1.4rem; font-weight: 600; font-family: "montserrat"; }


/*220919 SJW */
.ddr_direct {display:flex; justify-content: space-around; align-items: center;}
.ddr_direct li {font-size:1.4rem; text-align: center;}
.ddr_direct li:nth-child(1) {margin-left:0;}
.ddr_direct li p {margin-top:8px;}
.matching_list { background-color:#EFF7FF; margin-top:30px; padding:20px;}
.matching_title { font-size:2.0rem; font-weight: 700;}
.matching_box {background-color: #fff; box-shadow: 0 1px 4px rgb(21 34 50 / 8%);  display:flex; align-items: center; padding:20px; border-radius: 8px;}
.matching_box button {background-color: #121330; border-radius: 8px; width:max-content; height:auto;  padding:6px 10px; }
.matching_leveltxt p:nth-child(1) {font-size:1.4rem; font-family: "montserrat"; font-weight: 700;}
.matching_leveltxt p:nth-child(2) { font-size:1.6rem; margin-top:6px;}
.matching_leveltxt span{font-family: "montserrat";}
.level1txt {color:#FCBD2C;}
.level2txt {color:#003FFF;}
.level3txt {color:#01DDAC;}
.level4txt {color:#FC454F;}

.new_agreeinfo {background-color: #fff; padding:20px; margin-top:30px;}
.new_agreeinfo li:last-child {margin-bottom:0;}
.new_agrbox { display:flex; align-items: center; border-radius: 8px;}

/*구매승인 */
.agree_active {border:1px solid #01DDAC;  padding:20px;}
.agree_compltebtn {background-color:#01DDAC; display: flex; align-items: center; height:32px;  color:#fff; padding:6px 10px; border-radius: 8px;}
.agree_compltebtn p {margin-left:2px; font-size:1.4rem; font-weight: 700;}
.new_leveltxt {display: flex; justify-content: space-between; align-items: center; width:100%;}
.new_agrboxwrap {background-color: #fff; box-shadow: 0 1px 4px rgb(21 34 50 / 8%);  padding:20px;}
.new_leveltxt p:nth-child(1) {font-size:1.4rem; font-family: "montserrat"; font-weight: 700;}
.new_leveltxt p:nth-child(2) {font-size:1.6rem;}
.new_img {margin-right:10px;}
.new_img img {width:56px;height:56px;}
.new_userinfo {background-color: #FBFBFB; border-radius: 8px; font-size:1.4rem; padding:20px; margin-top:10px;}
.new_userinfo li {margin-bottom:10px;}
.new_userinfo li:last-child {margin-bottom:0;}
.agree_readybtn {background-color:#5A607F; display: flex; align-items: center; height:32px;  color:#fff; padding:6px 10px; border-radius: 8px;}
.agree_readybtn p {margin-left:2px; font-size:1.4rem; font-weight: 700;}
.new_agrboxwrap {border-radius: 8px;}
.macting_wrap {display:flex; justify-content: space-between; align-items: center; width:100%;}

.main_icon_box { margin:20px; padding:20px; background-color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; box-shadow: 0 1px 4px rgb(21 34 50 / 8%); border-radius: 8px; text-align: center;  grid-row-gap: 20px;}
.main_icon_box li { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main_icon_box li div { aspect-ratio: auto 1 / 1; }
.main_icon_box > li > p { font-size: 14px; margin-top: 10px; font-weight: 700; min-height:40px;  }
.direct_historybox {width:56px; height:56px; border-radius: 50px; background-color: #FBFBFB; border:1px solid #F1F1F1; position: relative; margin:0 auto;}
.direct_historybox img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:34px;}



/* 23.04.06 메인페이지 리뉴얼 */
.main_my_beans { margin: 20px 20px 0; border-radius: 10px; background: #fff; overflow: hidden;}
.main_my_beans > p:first-child { width:100%; height:100%;  padding:10px 20px; background:linear-gradient(165deg, var(--main) 0%, var(--dark) 100%); color:var(--white);}
.main_my_beans > p:last-child { width:100%; height:100%;  padding:10px 20px; background: var(--white); border:1px solid var(--main); color:var(--ma); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }

.main_visual0 { text-align: center; padding:0 20px 0 !important;  }
.main_visual0 img { width:100%; }
.main_visual0 .swiper-wrapper { padding: 20px 0 20px;  }
.main_visual_slide0 { box-shadow: 0 1px 4px rgb(21 34 50 / 8%); border-radius: 8px; }
.level_infotxt_b { padding: 20px ; }

.main_visual_slide0 .level_infotxt p:nth-child(1) { color:var(--main_sub);}

.main_icon_box0 { margin: 0 20px 20px; padding:10px 20px; background-color: #fff; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; box-shadow: 0 1px 4px rgb(21 34 50 / 8%); border-radius: 8px;}
.main_icon_box0 li { width: 100%; height:110px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.main_icon_box0 li div { aspect-ratio: auto 1 / 1; }
.main_icon_box0 > li > p { font-size: 14px; margin-top: 10px; font-weight: 700; }

.main_section { padding:20px 20px 0; }
.num_tq_box { background: linear-gradient(180deg, var(--main_sub), var(--main_sub2)); border-radius: 10px; overflow: hidden;}
.num_tq { padding:20px 20px 30px; font-size:2.4rem; font-family: "montserrat"; font-weight: 600; text-align: center; word-break: break-all;}
.esc_list_box { position: relative; padding:10px 20px; }
.esc_bg { position: absolute; left: 0; top: 0; width:100%; height:100%; background: rgba(255,255,255,0.1);  z-index: 20;}
.esc_list_box > div:last-child > div { z-index: 30; }
.card_name { padding: 20px 20px 0;}
.card_name img { width: 25px; height:25px; border-radius: 50%; }
.card_name p { font-size: 1.6rem; font-weight: 600; color: var(--white);}
.main_usage_history { display: block; background: var(--gray2); border-radius: 16px; color: var(--white); padding: 6px 16px; font-size: 1.4rem; font-weight: 500; }

.skong_width { width:100%; display:flex; align-items: center; justify-content: flex-end;}
.end_datepop { padding:10px 20px; border-top:1px solid #f1f3f5; font-size:20px; font-weight: 700; color:#212121;}
.end_datepop span { color:red; font-weight: 700;}
.tqlistbtn { display: flex; align-items: center;}
.tqlistbtn a:nth-child(2) {margin-left:12px;}

.center_info {
  font-size:18px;
  font-weight: 700;
  color:#fff;
  padding:0 20px 20px;
}

.center_info_tq {
  padding:20px 20px 10px;
}

.main_icon_box > li:nth-child(1) > p { white-space: nowrap;}
.main_icon_box > li:nth-child(5) > p {  white-space: nowrap;}

@media screen and (max-width:767px){
 .pop_cont { width:90%; }
 .mylist p { font-size:1.4rem; word-break: keep-all; }
 .ddr_direct {display:flex; justify-content: space-between; align-items: center; flex-wrap:wrap;}
 .ddr_direct li { width:28%;}
 }

 @media screen and (min-width:521px) and (max-width:610px){
.main_icon_box > li > p {height:60px;}
 }

@media screen and (max-width:520px){
.main_icon_box {padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr);}
.moblie_enbox {padding-bottom:10px;}
}

@media screen and (max-width:445px){
  .en .pop_btn p {
    height:60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width:390px){
.main_icon_box > .eng_box > p { height:80px;}
}

@media screen and (max-width:375px){
 .mainheader_title { font-size:1.4rem; }
 .main_icon_box { column-gap: 0px;}
 .skong_width {flex-wrap:wrap;}
  button[type="button"].btn_confirm {
    font-size: 13px !important;
  }
}
@media screen and (max-width:347px){
  .main_icon_box > li > p { height: 55%;}
}
@media screen and (max-width:295px){
  .mainheader_title { font-size:1.4rem; }
  .main_icon_box {padding: 10px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 0px;}
}

@media screen and (max-width:293px){
  .mt{padding-top: 30px;}
}