@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
html,
body {
  width: 100%;
  height: 100%;
  -webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
  -webkit-overflow-scrolling: auto; /* ik */
}

ol, ul, li {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  table-layout: fixed;
  border-spacing: 0;
  border: 0;
}

th, td {
  word-break: break-all;
}

textarea {
  resize: none;
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
}

i {
  font-style: normal;
}

img,
object,
embed {
  max-width: 100%;
}

em {
  font-style: normal;
}

* {
  box-sizing: border-box;
}

/*증감버튼 삭제*/
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 앱 - ios 회색 플리커 현상 삭제 */
* {
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
}
a:focus {
  outline: none;
}

/*리셋*/
/* color */
/* text color */
/*font size*/
/*변수*/
/*포지션*/
/*말줄임*/
/*mixin*/
@font-face {
  font-family: "OneStoreMobileGothicTitleFont";
  font-weight: normal;
  font-display: swap;
  src: url("/fonts/ONEMobileTitle/OneMobileTitle.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  font-display: swap;
  src: local("Pretendard Black"), url("/fonts/pretendard/woff2/Pretendard-Black.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-Black.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  font-display: swap;
  src: local("Pretendard ExtraBold"), url("/fonts/pretendard/woff2/Pretendard-ExtraBold.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  font-display: swap;
  src: local("Pretendard Bold"), url("/fonts/pretendard/woff2/Pretendard-Bold.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-Bold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  font-display: swap;
  src: local("Pretendard SemiBold"), url("/fonts/pretendard/woff2/Pretendard-SemiBold.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  font-display: swap;
  src: local("Pretendard Medium"), url("@/assets/fonts/pretendard/woff2/Pretendard-Medium.woff2") format("woff2"), url("@/assets/fonts/pretendard/woff/Pretendard-Medium.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  font-display: swap;
  src: local("Pretendard Regular"), url("/fonts/pretendard/woff2/Pretendard-Regular.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-Regular.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  font-display: swap;
  src: local("Pretendard Light"), url("/fonts/pretendard/woff2/Pretendard-Light.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-Light.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  font-display: swap;
  src: local("Pretendard ExtraLight"), url("/fonts/pretendard/woff2/Pretendard-ExtraLight.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-ExtraLight.woff") format("woff");
}
@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  font-display: swap;
  src: local("Pretendard Thin"), url("/fonts/pretendard/woff2/Pretendard-Thin.woff2") format("woff2"), url("/fonts/pretendard/woff/Pretendard-Thin.woff") format("woff");
}
/*폰트 관련*/
/*리셋*/
/*변수*/
/* 레이아웃 */
html {
  font-size: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%; /* 크롬, 사파리, 오페라 신버전 */
  -ms-text-size-adjust: 100%; /* IE */
  -moz-text-size-adjust: 100%; /* 파이어폭스 */
  -o-text-size-adjust: 100%; /* 오페라 구버전 */
  --antd-wave-shadow-color: #666 !important;
}

/*
@media screen and (min-height: 680px) {
    html {
      font-size: 18px;
    }
}
*/

@media screen and (min-height: 1000px) {
    html {
      font-size: 20px;
    }
}

@media screen and (min-height: 1500px) {
  html {
    font-size: 30px;
  }
}


html, body {
  height: 100%;
  position: fixed;
}

body {
  padding-top: constant(safe-area-inset-top); /* iOS notch 대응 */
  padding-top: env(safe-area-inset-top); /* iOS notch 대응 */
}
body:has(.bottom__btns) {
  display: flex;
  flex-direction: column;
  height: 100vsh;
  margin: 0;
  padding: 0;
}
body:has(.bottom__btns) .sub-page {
  height: calc(100svh - 6.5rem);
  margin-bottom: 3rem;
}
body:has(.popup__mask.active) .popup__mast {
  z-index: 9999 !important;
}
body:has(.popup__mask.active) .gnb {
  z-index: -1 !important;
}

.page {
  margin-bottom: 5.25rem;
}

.sub-page {
  padding: 1rem;
  margin-top: 3.5rem;
  height: calc(100dvh - 7.1875rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* ikkim subpage need bottom padding */
  padding-bottom: 3.5rem;
}
.sub-page.pd-0 {
  padding: 0;
}
.sub-page.pd-0 .section {
  width: 100%;
  margin: 0 auto;
}

.common-header {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  padding: 1.25rem;
  border-bottom: 1px solid #ebebeb;
  height: 3.5rem;
  background-color: #ffffff;
  color: #fff;
  z-index: 10;
}
.common-header > p {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  line-height: 1.75;

  /* new */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.common-header a {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.common-header .prev {
  width: 2.5625rem;
  height: 3.5rem;
  padding: 0 1rem;
  left: 0;
  background: url(/images/icon/icon-prev.png) no-repeat center/auto;
}
.common-header .alert-setting {
  width: 3.0625rem;
  height: 3.5rem;
  padding: 0 1rem;
  position: absolute;
  right: 0;
  background: url(/images/icon/icon-setting.png) no-repeat center/auto;
}

.nav__alert {
  --width: 30px;
  --height: 28px;
  width: 1.75rem; /* ik */
  height: 1.5rem; /* ik */
  right: 1rem !important;
  background: url(/images/icon/alert--off.png) no-repeat center/contain;
}
.nav__alert--on {
  background-image: url(/images/icon/alert--on.png);
  color: currentColor;
}
.nav__alert--on::after {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  content: "";
  display: block;
  background-color: #dd2959;
  position: absolute;
  right: -2px;
  top: 2px;
  border: 2px solid currentColor;
}

.list-item {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  gap: 0.5rem;
  border-bottom: 1px solid #ebebeb;
}
.list-item i {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3.75rem;
  height: 1.5rem;
  border-radius: 0.75rem;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  -ms-border-radius: 0.75rem;
  -o-border-radius: 0.75rem;
  font-size: 0.75rem;
}
.list-item i.answer-wait {
  color: #999999;
  border: 1px solid #999999;
  background-color: #f4f4f4;
}
.list-item i.answer-complete {
  color: #1ab177;
  border: 1px solid #1ab177;
  background-color: #ebfff7;
}
.list-title {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 700;
  line-height: 1.2;
}
.list-cont {
  font-size: 0.875rem;
  color: #666666;
  font-weight: 400;
  line-height: 1.2;
}
.list-info {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.list-info span + span {
  display: flex;
  align-items: center;
}
.list-info span + span::before {
  width: 1px;
  height: 0.625rem;
  content: "";
  background-color: #999999;
  margin: 0 0.5rem;
}

.board-view-bottom {
  font-size: 0.875rem;
  color: #666666;
  font-weight: 400;
  line-height: 1.2;
  padding: 1.125rem 1rem;
  word-break: keep-all;
}
.board-view + .board-view {
  border-top: 5px solid #f4f4f4;
}

.gnb {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: #ffffff;
  border-top: 1px solid #e3e3e3;
  width: 100%;
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  padding: 0 1rem;
  z-index: 10 !important;
}
.gnb a {
  font-size: 0.625rem;
  color: #999999;
  font-weight: 300;
  display: block;
  padding: 0.625rem 0;
  text-align: center;
  line-height: 1.4;

  --font-size: 0.725rem;
}
.gnb a.active {
  color: #1ab177;
  --font-size: 0.725rem;
  font-weight:600;
}
.gnb a:not(.home) {
  width: 100%;
}
.gnb a:not(.home)::before {
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  display: block;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 auto;

  background-size: contain;
}
.gnb .activity::before {
  background-image: url(/images/icon/icon-activity.png);
}
.gnb .activity.active::before {
  background-image: url(/images/icon/icon-activity--active.png);
}
.gnb .gallery::before {
  background-image: url(/images/new2/menu/gallery.png);
}
.gnb .gallery.active::before {
  background-image: url(/images/new2/menu/gallery--active.png);
}
.gnb .school::before {
  --background-image: url(/images/icon/icon-school.png);
  background-image: url(/images/new2/menu/ranking.png);
}
.gnb .school.active::before {
  --background-image: url(/images/icon/icon-school--active.png);
  background-image: url(/images/new2/menu/ranking--active.png);
}
.gnb .mypage::before {
  background-image: url(/images/new2/menu/mypage.png);
}
.gnb .mypage.active::before {
  background-image: url(/images/new2/menu/mypage--active.png);
}
.gnb .coupon::before {
  background-image: url(/images/new2/menu/coupon.png);
}
.gnb .coupon.active::before {
  background-image: url(/images/new2/menu/coupon--active.png);
}

.gnb .home {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  box-shadow: 0px 0px 4.5px 0.5px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
  margin-top: -3rem;
  background-color: #ffffff;
  font-size: 0;
  position: relative;
  z-index: 10;
}
.gnb .home::before {
  content: "";
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  position: absolute;
  top: 0;
  margin: 0 auto;
  background: url(/images/icon/icon-home.png) no-repeat center/auto;
  
  background-size: 1.4rem 1.3rem;
}
.gnb .home.active {
  background-color: #1ab177;
}
.gnb .home.active::before {
  background-image: url(/images/icon/icon-home--active.png);
  background-size: 1.5rem 1.4rem;
}

.section {
  width: calc(100% + 2rem);
  border-top: 5px solid #f4f4f4;
  padding: 1.25rem 1rem;
  margin: 0 -1rem;
}
.section.service {
  border-top:none;
  padding-top: 0;
}
.section:has(.section__title.sticky) {
  padding-top: 0;
}
.section:has(.section__title.sticky) .section__title.sticky {
  position: sticky;
  top: -1rem;
  background-color: #fff;
  z-index: 10;
  padding-top: 1.25rem;
  padding-bottom: 0.625rem;
  background-position: left bottom 12px;
}
.section .button--large.disabled {
  color: #999999;
  background-color: #cccccc;
}
.section__title {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  line-height: 1.2;
  word-break: keep-all;
  background-position: left center;
  background-repeat: no-repeat;
  padding-bottom: 0.625rem;
}
.section__title > span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.section__title.star {
  background-image: url(/images/icon/icon-star.png);
  padding-left: 1.75rem;
  padding-bottom: 0;
}
.section__title.clock {
  background-image: url(/images/icon/icon-clock.png);
  padding-left: 1.375rem;
  font-size: 1rem;
  padding-bottom: 0;
}
.section__title.light {
  background-image: url(/images/icon/icon-light.png);
  padding-left: 1.25rem;
  padding-bottom: 0;
}
.section__title.notice {
  background-image: url(/images/icon/icon-notice.png);
  padding-left: 2.125rem;
  background-position: left 0.375rem center;
  padding-bottom: 0;
}
.section__title.tips {
  background-image: url(/images/icon/icon-tips.png);
  --padding-left: 2.125rem;
  padding-left: 2.3rem;
  background-position: left 0.0rem center;
  background-size: 30px auto;
  padding-bottom: 0;
}
.section__title.detail {
  background-image: url(/images/icon/icon-detail-b.png);
  --padding-left: 2.125rem;
  padding-left: 1.55rem;
  background-position: left 0.0rem center;
  background-size: 16px auto;
  padding-bottom: 0;
}

.section__txt {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0.5rem;
}
.section__list {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5rem;
  word-break: keep-all;
}
.section__detail {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 1.25rem;
  background: url(/images/icon/icon-detail.png) no-repeat left top 1px/auto;
  padding-left: 1.25rem;
  word-break: keep-all;
}
.section .photo-area {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  border-radius: 0.625rem;
  text-align: center;
  margin-bottom: 0.625rem;
}
.section .photo-before {
  border-radius: 0.625rem;
  padding: 2.75rem 0;
  background-color: #f4f4f4;
}
.section .photo-before p {
  background: url(/images/photo-area.png) no-repeat center top/auto;
  padding-top: 2.625rem;
}
.section .photo-after {
  width: 100%;
  --height: 8.875rem;
  height:40vh;
}
.section .photo-after img {
  height: 100%;
}
.section .photo-notice {
  font-size: 0.75rem;
  color: #dd2959;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0.625rem;
  word-break: keep-all;
}

.common__point .point__wrap {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 3rem;
  border-radius: 0.625rem;
  border: 1px solid #1ab177;
  padding: 0 1.25rem;
  margin: 1.25rem 0;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
}
.common__point .point__wrap > p {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 700;
}
.common__point .point__wrap strong {
  font-size: 1.5rem;
  color: #1ab177;
  font-weight: 700;
}
.common__point .point__wrap span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 700;
}
.mypage .common__point .point__wrap > p, .our-school .common__point .point__wrap > p {
  font-weight: 400;
}
.mypage .common__point .point__wrap strong, .our-school .common__point .point__wrap strong {
  font-size: 1.25rem;
  color: #333333;
}
.mypage .common__point .point__wrap span, .our-school .common__point .point__wrap span {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
}
.our-school .common__point .point__wrap.border-pink {
  --border-color: #dd2959;
  border-color:rgba(221,41,89,0.3); /* ikkim 연하게 */
}
.our-school .common__point .point__wrap.border-main {
  --border-color: #444097;
  border-color:rgba(68,64,151,0.3); /* ikkim 연하게 */
}
.our-school .common__point .point__wrap .text {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  border-radius: 0.625rem;
  background-color: #dd2959;
  padding: 0.1875rem 0.5rem;
  margin-right: 0.25rem;
}
.our-school .common__point .point__wrap .clover {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url(/images/icon/icon-point.png); /* ikkim change */
  background-size: auto;
  margin-right: 0.5rem;
}
.our-school .common__point .point__wrap .prize {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  background-image: url(/images/icon/icon-prize.png);
  background-size: auto;
  margin-right: 0.5rem;
}
.common__point .point__history ul {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.common__point .point__history li {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
}
.common__point .point__history strong {
  font-size: 1.25rem;
  margin-right: 0.3125rem;
}
.common__point.form-column--cc .point__wrap {
  margin: 0;
  margin-top: 0.625rem;
}

.acco__list {
  display: flex;
  flex-direction: column;
}
.acco__item {
  display: flex;
  flex-direction: column;
}
.acco__item.active .acco__body {
  opacity: 1;
  padding: 1rem;
  max-height: 500px;
}
.acco__item.active .acco__body p {
  display: block;
}
.acco__item.active .acco__head span {
  background-color: #1ab177;
}
.acco__item.active .acco__head span::before {
  transform: translate(6px, 6px) rotate(45deg);
}
.acco__item.active .acco__head span::after {
  transform: translate(10px, 6px) rotate(-45deg);
}
.acco__head {
  padding: 1.125rem;
  border-bottom: 1px solid #ebebeb;
}
.acco__head p {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 700;
}
.acco__head span {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: #333333;
  position: relative;
}
.acco__head span::before, .acco__head span::after {
  width: 2px;
  height: 6px;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  content: "";
  transition: all 0.15s ease-in-out;
  position: absolute;
  background-color: #ffffff;
}
.acco__head span::before {
  transform: translate(6px, 6px) rotate(135deg);
}
.acco__head span::after {
  transform: translate(10px, 6px) rotate(-135deg);
}
.acco__body {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  line-height: 1.2;
  padding: 0;
  background-color: #f4f4f4;
  word-break: keep-all;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.2s ease, opacity 0.3s ease;
}
.acco__body p {
  display: none;
}

footer {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 400;
  width: calc(100% + 40px);
  margin: 0 -20px;
  text-align: center;
  padding: 1.25rem 0;
  margin-top: 40px;
  background-color: #f4f4f4;
  border-top: 1px solid #e5e5e5;
}

.gray-bg-txt {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  border-radius: 0.625rem;
  line-height: 1.28;
  background-color: #f4f4f4;
  padding: 1rem;
}
.gray-bg-txt strong {
  font-weight: 700;
}

.nodata {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}
.nodata-full {
  height: calc(100dvh - 7.5rem);
  margin-top: 3.5rem;
}
/* ikkim gallery top margin으로 인해 no data표시가 중앙에 안 나타남 */
.nodata-full.m-t-none {
  margin-top:0;
}

.center .nodata {
  height: calc(100% - 105px);
}
.nodata p {
  font-size: 0.875rem;
  color: #999999;
  font-weight: 400;
}
.nodata p::before {
  width: 5.25rem;
  height: 5.25rem;
  content: "";
  display: block;
  margin: 0 auto;
  background-image: url(/images/nodata.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  margin-bottom: 1.25rem;
}

.list-nodata {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  border-radius: 0.625rem;
  padding: 0.75rem 0;
  text-align: center;
  border: 1px solid #dfdfdf;
  background-color: #f4f4f4;
}

.point-list li {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.625rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid #dfdfdf;
}
.point-list li > div {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  flex-shrink: 0;
}
.point-list li > div span + span {
  display: flex;
  align-items: center;
}
.point-list li > div span + span::before {
  width: 1px;
  height: 0.625rem;
  content: "";
  background-color: #999999;
  margin: 0 0.5rem;
  flex-shrink: 0;
}
.point-list li > div span:first-of-type {
  text-align: right;
  padding-left: 0.375rem;
}
.point-list li > div span:last-of-type {
  min-width: 2.5rem;
  width: auto;
  text-align: right;
}
.point-list li + li {
  margin-top: 0.625rem;
}
.point-list p {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.point-list p.spent {
  color:red;
}

/* ikkim coupon type */
.point-list li .coupon_type {
  margin-left:5px; height:15px;
  content:url(/images/icon/icon-coupon.png);
}
/* ikkim end */
.class-list li {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.625rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid #dfdfdf;
}
.class-list li .info {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  flex-direction: column;
  gap: 0.625rem;
  max-width: calc(100% - 3.75rem);
}
.class-list li .info p {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding-left: 1.375rem;
  background: url(/images/icon/icon-book.png) no-repeat left center/auto;
}
.class-list li .detail {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.class-list li .detail span + span {
  display: flex;
  align-items: center;
}
.class-list li .detail span + span::before {
  width: 1px;
  height: 0.625rem;
  content: "";
  background-color: #999999;
  margin: 0 0.5rem;
  flex-shrink: 0;
}
.class-list li.disabled {
  background-color: #f4f4f4;
}
.class-list li.disabled p {
  color: #999999;
  background-image: url(/images/icon/icon-book--disabled.png);
}
.class-list li.disabled .button {
  background-color: #cccccc;
  color: #999999;
  pointer-events: none;
}
.class-list li + li {
  margin-top: 0.625rem;
}
.class-list .button {
  width: 2.625rem;
}

body, * {
  font-family: "Pretendard";
}

/*마우스더블클릭시 선택되는 영역*/
input[type=checkbox], input[type=radio] {
  accent-color: #1ab177;
}

img {
  object-fit: contain;
}

/*크롬 브라우저 포커스 막기*/
input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
  outline: none;
}

.scroll::-webkit-scrollbar {
  position: absolute;
  width: 8px;
  height: 6px;
}
.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  background-color: #E1E1E1;
}
.scroll::-webkit-scrollbar-track {
  background-color: #fff;
}

.scroll--white::-webkit-scrollbar {
  position: absolute;
  width: 8px;
  height: 6px;
}
.scroll--white::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  background-color: #fefefe;
  border: 1px solid #ddd;
}
.scroll--white::-webkit-scrollbar-track {
  background-color: #fff;
}

.scroll--tran::-webkit-scrollbar {
  position: absolute;
  width: 5px;
  height: 6px;
}
.scroll--tran::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.scroll--tran::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.2);
}

/*텍스트 정렬*/
.t-r {
  text-align: right !important;
}

.t-l {
  text-align: left !important;
}

.t-c {
  text-align: center !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem !important;
}

.w-475 {
  width: 4.75rem !important;
}

.w-6 {
  width: 6rem !important;
}

.w-100p {
  width: 100% !important;
}

.h-a {
  height: auto !important;
}

.h-200 {
  height: 200px !important;
}

.h-250 {
  height: 250px !important;
}

.h-300 {
  height: 300px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

/*font*/
.fw-700 {
  font-weight: 700 !important;
}

/*bg color*/
.bg--main {
  background: #1ab177 !important;
}

.bg--primary-sub {
  background: #1ab177 !important;
}

.bg--primary {
  background: #1ab177 !important;
}

.bg--primary-light {
  background: #57B6FF !important;
}

.bg--guide {
  background: #ee1c1c !important;
}

.bg--bk {
  background: #333 !important;
}

.bg--wh {
  background: #fff !important;
}

.bg--gray {
  background: #f8f8f8 !important;
}

/*text color*/
.txt-red {
  color: #ee1c1c !important;
}

.txt-main {
  color: #1ab177 !important;
}

.txt-lgray {
  color: #999 !important;
}

.txt-darkT {
  color: #333333 !important;
}

.txt-pink {
  color: #dd2959 !important;
}

/*text-style*/
.letter-1 {
  letter-spacing: -1px;
}

/*gap*/
.gap-05 {
  gap: 5px !important;
}

.gap-10 {
  gap: 10px !important;
} /*사용*/
.gap-16 {
  gap: 1rem !important;
}

.gap-20 {
  gap: 1.25rem !important;
}

.gap-30 {
  gap: 30px !important;
}

.gap-40 {
  gap: 40px !important;
}

.gap-50 {
  gap: 50px !important;
} /*사용*/

.pt-10 { padding-top:10px !important }

/*flex-shrink*/
.fs-0 {
  flex-shrink: 0;
}

/*position*/
.positon-r {
  position: relative;
}

/*정렬*/
.df {
  display: flex;
}

.form-column--st {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: flex-start;
  -ms-flex-align: flex-start;
  align-items: flex-start;
  flex-flow: column wrap;
  position: relative;
}

.form-column--ct {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-flow: column wrap;
  position: relative;
}

.form-column--cc {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  flex-flow: column wrap;
  position: relative;
}

.form-row--bc {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-row--sc {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-row--ec {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.form-row--cc {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.justify-fs {
  justify-content: flex-start !important;
}

.justify-fe {
  justify-content: flex-end !important;
}

.justify-sb {
  justify-content: space-between !important;
}

.justify-ct {
  justify-content: center !important;
}

.align-fs {
  align-items: flex-start !important;
}

.align-fe {
  align-items: flex-end !important;
}

.align-ct {
  align-items: center !important;
}

/*말줄임*/
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

.wordwrap {
  white-space:normal; word-break:keep-all;
}

/* arrow*/
.arrow-down {
  position: relative;
  width: 3px;
  height: 10px;
  margin-left: 10px;
}
.arrow-down::before, .arrow-down::after {
  content: "";
  transition: all 0.15s ease-in-out;
  position: absolute;
  background-color: #333;
  width: 1px;
  height: 7px;
}
.arrow-down::before {
  transform: translate(5px, 4px) rotate(45deg);
}
.arrow-down::after {
  transform: translate(0, 4px) rotate(-45deg);
}

.arrow-up {
  position: relative;
  width: 3px;
  height: 10px;
  margin-left: 10px;
}
.arrow-up::before, .arrow-up::after {
  content: "";
  transition: all 0.15s ease-in-out;
  position: absolute;
  background-color: #333;
  width: 1px;
  height: 7px;
}
.arrow-up::before {
  transform: translate(0, 4px) rotate(45deg);
}
.arrow-up::after {
  transform: translate(5px, 4px) rotate(-45deg);
}

.arrow-right {
  position: relative;
  width: 3px;
  height: 10px;
  margin-left: 10px;
}
.arrow-right::before, .arrow-right::after {
  width: 1px;
  height: 7px;
  content: "";
  transition: all 0.15s ease-in-out;
  position: absolute;
  background-color: #333;
}
.arrow-right::before {
  transform: translate(0, 0px) rotate(-45deg);
}
.arrow-right::after {
  transform: translate(0, 4px) rotate(45deg);
}

/*close X */
.icon-x {
  width: 20px;
  height: 20px;
  position: relative;
}
.icon-x::before, .icon-x::after {
  position: absolute;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: 0;
  width: 14px;
  height: 1px;
  display: block;
  content: "";
  background: #333;
  transform: translate(-50%, -50%) rotate(45deg);
}
.icon-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.tab__list {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.625rem;
  border: 1px solid #cccccc;
  --height: 3rem;
  background-color: #f4f4f4;
}
.tab__list .tab-btn {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #999999;
  font-weight: 700;
  width: 100%;
  padding: 15px 0;
  background-color: #f4f4f4;
  height: 3rem;
}
.tab__list .tab-btn.active {
  border-radius: 0.625rem;
  border: 1px solid #1ab177 !important;
  color: #1ab177;
  font-weight: 700;
  background-color: #1ab177;
  color: #ffffff;
  --height: 48px;
  
  pointer-events: none; /* ik active버튼은 다시 누르지 않게 함. */
}
.tab__list .tab-btn:first-of-type {
  border-top-left-radius: 0.625rem;
  border-bottom-left-radius: 0.625rem;
}
.tab__list .tab-btn:last-of-type {
  border-top-right-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
.tab__list .tab-btn.active + .tab-btn, .tab__list:has(.tab-btn:first-of-type.active) {
  border-left: none;
}
.tab__list:has(.tab-btn:last-of-type.active) {
  border-right: none;
}

/* tab_list_sub 추가 ik */
.tab__list__sub {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #ccc !important;
  --height: 3rem;
  border-radius: 2.5rem;
  background-color: #fff;
}
.tab__list__sub .tab-btn {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #999999;
  font-weight: 700;
  width: 100%;
  padding: 15px 0;
  background-color: #fff;
  
  height: 2.4rem;
  border-radius: 1.2rem;
  --margin: 4px;
  margin: 0.2rem;
}
.tab__list__sub .tab-btn.active {
  background-color: #ddd;
  color: #555;
  
  pointer-events: none; /* ik active버튼은 다시 누르지 않게 함. */
}

/*기본공통클래스 관련*/
/*리셋*/
/*변수*/
button {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  border: none;
  outline: none;
}

.button {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  word-break: keep-all;
}
.button.disabled {
  pointer-events: none;
  background-color: #cccccc;
}
/* ikkim service */
.button.withdraw {
  background-color: #dd2959;
}
.button--large {
  font-size: 1.125rem;
  color: #ffffff;
  font-weight: 700;
  width: 100%;
  height: 3.75rem;
  border-radius: 0.625rem;
  background-color: #1ab177;
}
.button--medium {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 700;
  width: auto;
  height: 3rem;
  border-radius: 0.625rem;
  background-color: #1ab177;
}
.button--small {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 700;
  width: auto;
  height: 2.625rem;
  border-radius: 0.625rem;
  background-color: #1ab177;
}
.button.outline-main {
  border: 1px solid #1ab177;
  background-color: #ffffff;
  color: #1ab177;
}

.input-row > p {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.input-row > p span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  margin-left: 0.5rem;
}
.input-row .pw-eye {
  width: 1rem;
  height: 1rem;
  position: absolute;
  right: 1.25rem;
  background: url(/images/icon/icon-pw--off.png) no-repeat center/contain;
  background-color: #ffffff;
}
.input-row .pw-eye.pw-eye--on {
  background-image: url(/images/icon/icon-pw--on.png);
}

.input-row + .input-row {
  margin-top: 2.75rem;
}

.input__area {
  position: relative;
  width: 100%;
}
.input__area:has(.error) input[type=text],
.input__area:has(.error) input[type=number],
.input__area:has(.error) input[type=password] {
  border: 1px solid #ee1c1c;
}
.input__area .button {
  flex-shrink: 0;
}
.input__area .time {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}
.input__area .time-wrap {
  position: relative;
}
.input__area .i_content {
  font-size: 0.75rem;
  color: #ee1c1c;
  font-weight: 400;
  display: none;
  position: absolute;
  top: 3.25rem;
  transition: display 0.3s;
  word-break: break-word;
}
.input__area .i_content.error {
  display: block;
  transition: display 0.3s;
}
.input__area textarea {
  height: calc(100svh - 18.75rem);
}

.input-thumb {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: calc(100% + 2rem);
  margin: -1rem -1rem 1rem;
  border-bottom: 5px solid #f4f4f4;
  padding: 1.25rem 0;
}
.input-thumb .thumb-img {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 0.625rem;
  position: relative;
}
.input-thumb .thumb-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: 1px solid #cccccc;
  max-width: 4.5rem;
  max-height: 4.5rem;
}
.input-thumb .thumb-img::before {
  width: 1.5rem;
  height: 1.5rem;
  content: "";
  display: block;
  background-image: url(/images/icon/icon-camera.png);
  position: absolute;
  bottom: 0;
  right: -0.25rem;
}
.input-thumb span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}

.toggle-input {
  display: none;
}
.toggle-input:checked + .toggle-label {
  background-color: #1ab177;
}
.toggle-input:checked + .toggle-label::before {
  transform: translateX(25px);
}
.toggle-label {
  width: 3.375rem;
  height: 1.75rem;
  border-radius: 0.875rem;
  -webkit-border-radius: 0.875rem;
  -moz-border-radius: 0.875rem;
  -ms-border-radius: 0.875rem;
  -o-border-radius: 0.875rem;
  position: relative;
  display: block;
  background-color: #cccccc;
  border: 1px solid #cccccc;
  transition: background-color 0.3s ease;
}
.toggle-label::before {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: #ffffff;
  transition: transform 0.3s ease;
}

input[type=text],
input[type=number],
input[type=password] {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  width: 100%;
  height: 3rem;
  border-radius: 0.625rem;
  border: 1px solid #cccccc;
  padding: 0 1.25rem;
}
input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder {
  color: #999999;
}
input[type=text]:disabled,
input[type=number]:disabled,
input[type=password]:disabled {
  background-color: #f4f4f4;
  color: #999999;
}
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus {
  border: 1px solid #1ab177;
  transition: all 0.3s ease-in;
  color: #333333;
}

textarea {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  border-radius: 0.625rem;
  width: 100%;
  border: 1px solid #cccccc;
  padding: 1rem 1.25rem;
  line-height: 1.2;
}

/*체크박스*/
.checkbox-n, .checkbox-n--l {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #666666;
  font-weight: 500;
  position: relative;
  min-height: 1.5rem;
  line-height: 1.2;
  padding-left: 2.125rem;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
}
.checkbox-n.checkbox-disabled, .checkbox-n--l.checkbox-disabled {
  color: #ddd !important;
}
.checkbox-n.checkbox-disabled .checkmark, .checkbox-n--l.checkbox-disabled .checkmark {
  background: #ddd !important;
}
.checkbox-n:has(input[type=checkbox]:checked), .checkbox-n--l:has(input[type=checkbox]:checked) {
  color: #333333;
}
.checkbox-n input[type=checkbox], .checkbox-n--l input[type=checkbox] {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  /* When the checkbox is checked, add a blue background */
  /* Show the checkmark when checked */
}
.checkbox-n input[type=checkbox]:checked ~ .checkmark, .checkbox-n--l input[type=checkbox]:checked ~ .checkmark {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  background-color: #1ab177;
  border: 1px solid #1ab177;
}
.checkbox-n input[type=checkbox]:checked ~ .checkmark::after, .checkbox-n--l input[type=checkbox]:checked ~ .checkmark::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.checkbox-n input[type=checkbox]:checked ~ .checkmark:after, .checkbox-n--l input[type=checkbox]:checked ~ .checkmark:after {
  visibility: visible;
  opacity: 1;
  transform: rotate(45deg);
}
.checkbox-n .checkmark, .checkbox-n--l .checkmark {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #fff;
  border: 1px solid #c7c8c4;
  margin-right: 0.625rem;
  transform: translateY(-50%);
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Style the checkmark/indicator */
}
.checkbox-n .checkmark::after, .checkbox-n--l .checkmark::after {
  position: absolute;
  --top: 4px;
  --left: 8px;
  top:0.25rem;
  left: 0.52rem;
  right: auto;
  bottom: auto;
  z-index: 9;
  --width: 4px;
  --height: 9px;
  width: 0.25rem;
  height: 0.562rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  content: "";
  /*display: none;*/
  visibility: visible;
  opacity: 1;
  border: solid #c7c8c4;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*체크박스 none text*/
.checkbox-nonetext, .checkbox-nonetext--l {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 500;
  position: relative;
  padding-left: 0;
  margin: 0 auto;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
}
.checkbox-nonetext.checkbox-disabled, .checkbox-nonetext--l.checkbox-disabled {
  color: #ddd !important;
}
.checkbox-nonetext.checkbox-disabled .checkmark, .checkbox-nonetext--l.checkbox-disabled .checkmark {
  background: #ddd !important;
}
.checkbox-nonetext input[type=checkbox], .checkbox-nonetext--l input[type=checkbox] {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  /* When the checkbox is checked, add a blue background */
  /* Show the checkmark when checked */
}
.checkbox-nonetext input[type=checkbox]:checked ~ .checkmark, .checkbox-nonetext--l input[type=checkbox]:checked ~ .checkmark {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  background-color: #333333;
  border: 1px solid #333333;
}
.checkbox-nonetext input[type=checkbox]:checked ~ .checkmark::after, .checkbox-nonetext--l input[type=checkbox]:checked ~ .checkmark::after {
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.checkbox-nonetext input[type=checkbox]:checked ~ .checkmark:after, .checkbox-nonetext--l input[type=checkbox]:checked ~ .checkmark:after {
  visibility: visible;
  opacity: 1;
  transform: rotate(45deg);
}
.checkbox-nonetext .checkmark, .checkbox-nonetext--l .checkmark {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 50%;
  left: 0;
  background-color: #fff;
  border: 1px solid #cccccc;
  margin-right: 0.625rem;
  transform: translateY(-50%);
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Style the checkmark/indicator */
}
.checkbox-nonetext .checkmark::after, .checkbox-nonetext--l .checkmark::after {
  position: absolute;
  top: 3px;
  right: auto;
  bottom: auto;
  left: 7px;
  z-index: 9;
  width: 6px;
  height: 10px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  content: "";
  /*display: none;*/
  visibility: visible;
  opacity: 1;
  border: solid #ddd;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkbox-nonetext--l {
  width: 50px;
  height: 50px;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
}
.checkbox-nonetext--l input[type=checkbox] {
  /* When the checkbox is checked, add a blue background */
}
.checkbox-nonetext--l input[type=checkbox]:checked ~ .checkmark::after {
  border-width: 0 5px 5px 0;
}
.checkbox-nonetext--l .checkmark {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  width: 50px;
  height: 50px;
  /* Create the checkmark/indicator (hidden when not checked) */
  /* Style the checkmark/indicator */
}
.checkbox-nonetext--l .checkmark::after {
  position: absolute;
  top: 5px;
  right: auto;
  bottom: auto;
  left: 16px;
  z-index: 9;
  width: 17px;
  height: 1.5rem;
  border-width: 0 5px 5px 0;
}

.radiobox {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  min-height: 1.875rem;
  font-size: 1rem;
  padding-left: 2.375rem;
  font-weight: 500;
  color: #999999;
  margin: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  /* Hide the browser's default checkbox */
  /* Create a custom checkbox */
}
.radiobox.radio-disabled {
  color: #ddd;
}
.radiobox.radio-disabled .checkmark {
  background: #ddd !important;
}
.radiobox:has(input:checked) {
  color: #1ab177;
}
.radiobox input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  /* When the checkbox is checked, add a blue background */
}
.radiobox input[type=radio]:checked ~ .checkmark {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border: 1px solid #1ab177;
  background-color: #ffffff;
  position: absolute;
}
.radiobox input[type=radio]:checked ~ .checkmark::after {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  opacity: 1;
}
.radiobox .checkmark {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  position: absolute;
  top: 50%;
  left: 0;
  height: 1.75rem;
  width: 1.75rem;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  margin-right: 10px;
  transform: translateY(-50%);
  background-color: #f1f1f1;
}
.radiobox .checkmark::after {
  width: 1rem;
  height: 1rem;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  content: "";
  background-color: #1ab177;
  border-radius: 50%;
  border: 0.2rem solid #fff;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  opacity: 0;
}
.radiobox.nonetext .checkmark {
  margin-right: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-select {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  font-size: 0.875rem;
  color: #999999;
  font-weight: 400;
  width: 100%;
  height: 3rem;
  border-radius: 0.625rem;
  padding: 0 2rem 0 1.25rem;
  background: #fff url(../images/icon/icon-select.png) no-repeat right 1rem center/auto;
  border: 1px solid #cccccc;
  flex-shrink: 0;
}
.form-select:focus {
  border: 1px solid #1ab177;
  background-image: url(../images/icon/icon-select--active.png);
  color: #333333;
}
.form-select option {
  background-color: #fff;
  color: #333333;
  font-size: 0.875rem;
  padding: 6px 8px;
}
.form-select:disabled {
  background-color: #f4f4f4;
  cursor: not-allowed;
}

/*리셋*/
/*변수*/
.popup__mask {
  width: 100vw;
  height: 100dvh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999 !important;
  transition: opacity 0.3s ease;
  display: none;
  -webkit-transform: translate3d(0, 0, 0);
}
.popup__mask.barcode {
  height:70dvh;
  top:50%;
  transform: translateY(-50%);
}

/* ik */
.popup__mask:has(.gallery__popup) {
  --background-color: rgba(0, 0, 0, 0.8);
  background-color: rgba(0, 0, 0, 0.9);
}

.popup__mask.active {
  display: block;
}
.popup__mask .button {
  width: 100%;
}
.popup__wrap {
  width: calc(100vw - 2.5em);
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  max-width: calc(600px - 1.25rem);
  z-index: 1000 !important;
  text-align: center;
}

/* ik */
.popup__wrap:has(.gallery__popup) {
  background-color: transparent;
  left:50%;
  width:100%;
  max-width:100%;
  height:80%;
  transform: translate(-50%, -50%);
  --background:red;
}

.popup__wrap--modal {
  border-radius: 0.625rem;
  padding: 1.25rem 1rem 1rem;
}
.popup__wrap--modal .popup__cont h5 {
  font-size: 1.125rem;
  color: #333333;
  font-weight: 700;
}
.popup__wrap--modal .popup__cont p {
  font-size: 0.875rem;
  color: #666666;
  font-weight: 400;
  line-height: 1.2;
  margin: 1.25rem 0;
}
.popup__wrap--modal .popup__btns {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}
.popup__wrap--layer {
  border-radius: 0.625rem;
  position: fixed;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
}
.popup__wrap--layer:has(.gallery__popup) {
  /* border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  border: 1px solid #cccccc;
  width: calc(100vw - 2rem); */

  width:calc(100% - 20px);
}
.popup__wrap--layer .popup__close {
  width: 1.125rem;
  height: 1.125rem;
  position: absolute;
  top: -1.75rem;
  right: 0;
  display: block;
  background-image: url(/images/icon/icon-quiz-wrong.png);
  background-size: contain;
}
.popup__wrap--layer .popup__close.ios {
  top:calc((50px - 1.125rem) / 2);
}
.popup__wrap--layer .popup__title {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  padding: 1.125rem;
  border-bottom: 1px solid #cccccc;
  text-align: left;
}
.popup__wrap--layer .popup__cont {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 400;
  padding: 1.25rem 0.5rem 1.25rem 1.25rem;
  line-height: 1.4;
}
.popup__wrap--layer .popup__cont-inner {
  max-height: calc(90dvh - 200px);
  overflow-y: auto;
  padding-right: 0.7rem;
  text-align: left;
}
.popup__wrap--layer .school-search {
  text-align: left;
  padding-top: 1.875rem;
}
.popup__wrap--layer .school-search.nodata {
  padding: 3.375rem 0 2rem;
}
.popup__wrap--layer .school-search > span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.popup__wrap--layer .school-info {
  padding: 0.625rem 0;
}
.popup__wrap--layer .school-info strong {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
}
.popup__wrap--layer .school-info p {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  margin-top: 0.5rem;
}
.popup__wrap--layer .quiz__type1 {
  padding-top: 0.625rem;
}
.popup__wrap--layer .quiz__type1 .radiobox {
  height: auto;
}
.popup__wrap--layer .quiz__type1 .radiobox .checkmark {
  top: 0.625rem;
  transform: unset;
}
.popup__wrap--layer .quiz__type1 .radiobox:has(input:checked) {
  background-color: transparent;
}
.popup__wrap--layer .quiz__type1 .radiobox + .radiobox {
  margin-top: 1.25rem;
}
.popup__toast {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 400;
  border-radius: 0.625rem;
  width: calc(100vw - 2rem);
  background-color: rgba(0, 0, 0, 0.7);
  padding: 1rem 1.25rem;
  opacity: 0;
  transform: translateY(-20px);
  line-height: 1.15;
  word-break: auto-phrase;
}
.popup__toast i {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: inline-block;
  background-color: #1ab177;
  margin-right: 0.625rem;
  position: relative;
  flex-shrink: 0;
}
.popup__toast i::before {
  width: 4px;
  height: 9px;
  content: "";
  display: block;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.popup__toast--container {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  display: none;
}
.popup__toast--container.active {
  display: block;
}
.popup__toast--container.active .popup__toast {
  animation: toastFadeInOut 3s forwards;
}

.gallery__popup {
  --background:blue;
  width:100%;
  height:100%;
}
.gallery__popup .head {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  padding: 7px 9px;

  height:50px;
  color:#fff;
}
.gallery__popup .head.barcode {
  height:100px;
}
.gallery__popup .head > div {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.gallery__popup .profile {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: 9px;
  object-fit: cover;
}
.gallery__popup .cont {
  --border-top: 1px solid #cccccc;
  --width: calc(100% + 2px);
  --margin: 0 -1px;
  overflow-y: auto;
  --max-height: calc(80vh - 120px);

  height:calc(100% - 50px - 50px);
  max-height:calc(100% - 50px - 50px);

  overflow: hidden;

  --background:yellow;
}
.gallery__popup .cont.barcode {
  height:calc(100% - 100px);
  max-height:calc(100% - 100px);
}
.gallery__popup .cont img {
  width: 100%;
  height:100%;
}
.gallery__popup .cont .zoomer {
  width: 100%;
  height:100%;
}
.gallery__popup .cont .zoomer img {
  --background:#fff !important;
}

.gallery__popup .bottom {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  --margin-top: -3px;
  --border-top: 1px solid #cccccc;

  --background:pink;
  height:50px;
}
.gallery__popup .bottom.end {
  -webkit-box-pack: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
}
.gallery__popup .bottom.space-between {
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
}

.gallery__popup .bottom .bottom_text {
  width:100%;
  text-align: left;
  color:#fff;
  font-size:1rem;
  line-height: 120%;
}
.gallery__popup .gallery__btn {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  --width: 100%;
  width:auto;
  --padding: 0.75rem 1.875rem;
  background-color: #ffffff;
  border-bottom-left-radius: 0.3125rem;
  border-bottom-right-radius: 0.3125rem;

  background-color: transparent;
  color:#fff;
}
.gallery__popup .gallery__btn > span {
  display: inline-block;
  flex-shrink: 0;
}
.gallery__popup .gallery__btn.like .icon {
  width: 1.5rem;
  height: 1.25rem;
  border-bottom-left-radius: 0.3125rem;
  background-image: url(/images/icon/icon-like.png);
  margin-right: 2px;
  background-repeat: no-repeat;
}
.gallery__popup .gallery__btn.like.active .icon {
  background-image: url(/images/icon/icon-like--active.png);
}
.gallery__popup .gallery__btn.delete .icon {
  width: 1.5rem;
  height: 1.25rem;
  border-bottom-left-radius: 0.3125rem;
  background-image: url(/images/icon/icon-delete.png);
  margin-right: 0.5rem;
  background-repeat: no-repeat;
}

@keyframes toastFadeInOut {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  10% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}
/*리셋*/
/*변수*/
.login {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3.25rem 1rem 0;
  --height: 100svh;
  flex-direction: column;
  text-align: center;

  position: fixed;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
.login__inner {
  width: 100%;
  --flex: 1;
}
.login__logo {
  margin: 0 auto;
}
.login__logo--wrap p {
  font-size: 0.875rem;
  color: #3a435a;
  font-weight: 400;
  padding-top: 6px;
  font-family: "OneStoreMobileGothicTitleFont", "Noto Sans KR", sans-serif;
}
.login__form {
  margin-top: 3.25rem;
}
.login__form input + input {
  margin-top: 0.625rem;
}
.login__form .checkbox-n {
  margin: 1.25rem 0;
}
.login__form .button {
  height: 3.25rem;
}
.login__sns {
  text-align: center;
  margin-top: 3rem;
}
.login__sns > p {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
}
.login__sns ul {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.25rem;
  padding: 0 0.75rem;
  margin-top: 1.25rem;
}
.login__sns ul a {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: block;
}
.login__btns {
  margin-top: 2rem;
}
.login__btns a {
  font-size: 0.75rem;
  color: #666666;
  font-weight: 400;
}
.login__btns a + a {
  margin-left: 1.25rem;
  position: relative;
}
.login__btns a + a::before {
  width: 1px;
  height: 10px;
  content: "";
  background-color: #666666;
  position: absolute;
  left: -20%;
  top: 50%;
  transform: translateY(-50%);
}
.login__footer {
  position: static;
  margin-top: auto;
  margin-bottom: 1.25rem;
  height: auto;
}

.members {
  --padding: 1.25rem 1rem; /* ikkim remove */
}
.members .agreement-row {
  border-radius: 0.625rem;
  -webkit-border-radius: 0.625rem;
  -moz-border-radius: 0.625rem;
  -ms-border-radius: 0.625rem;
  -o-border-radius: 0.625rem;
  border: 1px solid #cccccc;
  padding: 0.5rem;
}
.members .agreement-row > a {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  background: url(/images/icon/icon-contShow.png) no-repeat right center/auto;
  display: block;
  padding-right: 1rem;
}
.members .agreement-row:has(input:checked) {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  border-color: #1ab177;
}
.members .agreement-row .form-column--sc strong {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}
.members .agreement-row .form-column--sc span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.members__title {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 1.375rem;
}
.members__title p {
  font-size: 1.125rem;
  color: #333333;
  font-weight: 700;
}
.members__steps {
  margin-top: 0.3125rem;
}
.members__steps ol {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.25rem;
}
.members__steps .step {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #999999;
  font-weight: 400;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  position: relative;
  background: #dadada;
}
.members__steps .step--active {
  background: #1ab177;
  color: #fff;
}
.members__steps .step:not(:first-of-type)::before {
  width: 93%;
  height: 1px;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -93%;
  background-color: #c6c7c2;
}
.members__done {
  text-align: center;
}
.members__done .done-check {
  width: 3.875rem;
  height: 3.875rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: #1ab177;
  display: block;
  margin: 1.5rem auto 1rem;
  position: relative;
}
.members__done .done-check::after {
  width: 33px;
  height: 22px;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  background-image: url(/images/icon/icon-check.png);
}
.members__done > p {
  font-size: 1.5rem;
  color: #333333;
  font-weight: 700;
}
.members__done > span {
  font-size: 0.875rem;
  color: #666666;
  font-weight: 400;
  display: inline-block;
  margin-top: 0.5rem;
}
.members__done > .button {
  width: 8.75rem;
  margin: 1.875rem auto 0;
}
.members__done > div {
  border-radius: 0.625rem;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  margin-top: 1.875rem;
  border: 1px solid #cccccc;
  padding: 1rem;
}
.members .register-logo {
  width: calc(100% + 2rem);
  height: 5.625rem;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #cccccc;
  margin: -1.25rem -1rem 1.875rem;
}
.members .register-logo:not(:has(img)) {
  font-size: 1.25rem;
  color: #333333;
  font-weight: 700;
  padding: 0 2rem;
  word-break: keep-all;
  text-align: center;
}
.members .register-logo img {
  width: 12.5rem;
  height: 2.5rem;
  background-color: #1ab177;
}
.members .register-user {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  border-radius: 0.625rem;
  line-height: 1.2;
  padding: 2rem 0;
  background-color: #f4f4f4;
  text-align: center;
}
.members .register-user p {
  margin-top: 1rem;
}
.members .register-user + form {
  margin-top: 1rem;
}
.members .certi {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
}
.members .certi .item {
  text-align: center;
  margin:1rem;
  padding:10px;
  background:#f4f9ff;
  border:1px solid #ddd;
  color:#333;
}
.members .certi .item.active {
  border:2px solid #1ab177;
}
.members .certi_noti {
  color:red;
}

.quiz__area > span {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  width: 2.25rem;
  height: 1.5rem;
  border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  background-color: #1ab177;
  margin-bottom: 0.625rem;
}
.quiz__area p {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.625rem;
  word-break: keep-all;
}
.quiz__area .button {
  margin-top: 1.875rem;
}
.quiz__type1 .radiobox {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  border-radius: 0.625rem;
  min-height: 3rem;
  line-height: 1.2;
  border: 1px solid #cccccc;
  padding-left: 3.25rem;
  padding-right: 0.625rem;
}
.quiz__type1 .radiobox .checkmark {
  left: 0.625rem;
}
.quiz__type1 .radiobox:has(input:checked) {
  border-color: #1ab177;
  background-color: #edfff8;
}
.quiz__type1 .radiobox + .radiobox {
  margin-top: 0.625rem;
}
.quiz__type2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.quiz__type2 .radiobox {
  position: relative;
  width: 100%;
  padding-top: 100%;
  font-size: 1.125rem;
  font-weight: 700;
}
.quiz__type2 .ox-quiz--true {
  border-radius: 0.625rem;
  color: #006bef;
  background-color: #e5f0fd;
  border: 1px solid #e5f0fd;

  /* ikkim add */
  font-size:30px;
  text-align: center;
}
.quiz__type2 .ox-quiz--true .quiz-true {
  --padding-top: 5rem; /* ikkim remark */
  position: relative;
}
.quiz__type2 .ox-quiz--true .quiz-true::before {
  /* ikkim remark
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background-color: transparent;
  border: 0.625rem solid #006bef;
  box-sizing: border-box;
  */
}
.quiz__type2 .ox-quiz--true:has(input:checked) {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  background-color: #006bef;
  color: #ffffff;
  border-color: #0054bb;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.quiz__type2 .ox-quiz--true:has(input:checked) .quiz-true::before {
  border-color: #ffffff;
}
.quiz__type2 .ox-quiz--false {
  border-radius: 0.625rem;
  color: #d64141;
  background-color: #fbecec;
  border: 1px solid #fbecec;
}
.quiz__type2 .ox-quiz--false .quiz-false {
  padding-top: 5rem;
  position: relative;
}
.quiz__type2 .ox-quiz--false .quiz-false::before, .quiz__type2 .ox-quiz--false .quiz-false::after {
  width: 0.6rem;
  height: 3.5rem;
  border-radius: 0.25rem;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  -ms-border-radius: 0.25rem;
  -o-border-radius: 0.25rem;
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  background-color: #d64141;
}
.quiz__type2 .ox-quiz--false .quiz-false::before {
  transform: translateX(-50%) rotate(45deg);
}
.quiz__type2 .ox-quiz--false .quiz-false::after {
  transform: translateX(-50%) rotate(-45deg);
}
.quiz__type2 .ox-quiz--false:has(input:checked) {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  background-color: #d64141;
  color: #ffffff;
  border-color: #c02f2f;
  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}
.quiz__type2 .ox-quiz--false:has(input:checked) .quiz-false::before, .quiz__type2 .ox-quiz--false:has(input:checked) .quiz-false::after {
  background-color: #ffffff;
}
.quiz__type2 .quiz-inner {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ikkim start 정답표시 */
.quiz__type1 .correct_sign {
  font-size:15px; font-weight: 600; color:#fff;
  position:absolute;right:10px;
  background:red;padding:5px 7px; border-radius:5px;
}
.quiz__type2 .correct_sign {
  font-size:15px; font-weight: 600; color:#fff;
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%); 
  background:red;padding:5px 7px; border-radius:5px;
}
/* ikkim end */

.quiz-result {
  text-align: center;
}
.quiz-result .result-status {
  width: 3.875rem;
  height: 3.875rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: block;
  margin: 1.5rem auto 1rem;
  position: relative;
}
.quiz-result .result-status.correct {
  background-color: #006bef;
}
.quiz-result .result-status.correct::after {
  width: 1.875rem;
  height: 1.875rem;
  background-image: url(/images/icon/icon-quiz-correct.png);
}
.quiz-result .result-status.wrong {
  background-color: #d64141;
}
.quiz-result .result-status.wrong::after {
  width: 1.3125rem;
  height: 1.3125rem;
  background-image: url(/images/icon/icon-quiz-wrong.png);
}
.quiz-result .result-status::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.quiz-result + .section {
  margin-top: 1.25rem;
}
.quiz-result + .button--large {
  margin-top: 2.875rem;
}
.quiz-result > p {
  font-size: 1.5rem;
  color: #333333;
  font-weight: 700;
}
.quiz:not(:has(.quiz-result)) .section:first-of-type {
  border-top: none;
}

.coupon {
  padding-top: 1.875rem;
}
.coupon__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.coupon__title {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 700;
  --background: url(/images/icon/icon-coupon-paper.png) no-repeat left center/auto;
  background: url(/images/icon/혜택형쿠폰아이콘.png) no-repeat left center/auto;
  --background-size: 0.875rem 0.875rem;
  background-size: contain;
  --padding-left: 1.5rem;
  padding-left: 1.9rem;
}
/* ikkim mobile coupon icon */
.coupon__title.mobile {
  --background: url(/images/icon/icon-coupon-mobile.png) no-repeat left center/auto;
  background: url(/images/icon/실물형쿠폰아이콘.png) no-repeat left center/auto;
  background-size: contain;
}
.coupon__title.daiso {
  --background: url(/images/icon/icon-coupon-mobile.png) no-repeat left center/auto;
  background: url(/images/icon/다이소쿠폰아이콘.png) no-repeat left center/auto;
  background-size: contain;
}

.coupon__detail {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.coupon li {
  border-radius: 0.625rem;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  padding: 1.25rem 1.25rem 1.25rem 1rem;
}
.coupon .button {
  width: 4.5rem;
}

.gallery .title {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
}

/* ikkim start : 갤러리 컬럼을 2~10까지 지원하기 위함 */
.gallery .title_wrapper {
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-top:5px;
  padding-bottom:10px;
}
.gallery .title.size:first-child { margin-right:10px; }
.gallery .title.category { padding:5px 10px; }
.gallery .title.category.select { background:#e0e0e0; border-radius: 5px; }
.gallery .title img { width:20px; }
.gallery .title img.dimmed { opacity:0.5; }
/* ikkim end */
.gallery .title span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  margin-left: 0.5rem;
}
.gallery__cont {
  display: grid;
  --grid-template-columns: repeat(2, 1fr); /* ikkim remark */
  --gap: 0.875rem; /* ikkim remark */
  grid-template-columns: repeat(4, 1fr);
  gap: 0.1rem;
  margin-top: 0.625rem;
}
/* ikkim start */
.gallery__cont._2 { grid-template-columns: repeat(2, 1fr); }
.gallery__cont._3 { grid-template-columns: repeat(3, 1fr); }
.gallery__cont._4 { grid-template-columns: repeat(4, 1fr); }
.gallery__cont._5 { grid-template-columns: repeat(5, 1fr); }
.gallery__cont._6 { grid-template-columns: repeat(6, 1fr); }
.gallery__cont._7 { grid-template-columns: repeat(7, 1fr); }
.gallery__cont._8 { grid-template-columns: repeat(8, 1fr); }
.gallery__cont._9 { grid-template-columns: repeat(9, 1fr); }
.gallery__cont._10 { grid-template-columns: repeat(10, 1fr); }
/* ikkim end */

.gallery__cont a {
  --border-radius: 0.625rem; /* ikkim remark */
  position: relative;
  border: 1px solid #cccccc;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: block;
}
.gallery__cont img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__cont .my {
  position:absolute;
  right:3px;
  bottom:3px;
  width:6px;
  height:6px;
  border-radius: 3px;
  background-color: orange;
}
.gallery__cont .like {
  position:absolute;
  left:5px;
  bottom:5px;
  width:calc(100% - 4px);
  height:10%;
  background-repeat: no-repeat;
  background-image: url(/images/icon/icon-like--active.png);
  background-size: contain;
  text-align: left;
  font-weight: 300;
  color:#fff;
}
.gallery__cont .like.s2 { font-size:1rem; padding-left:calc(10% + 8px); }
.gallery__cont .like.s3 { font-size:0.8rem; padding-left:calc(10% + 7px); }
.gallery__cont .like.s4 { font-size:0.6rem; padding-left:calc(10% + 5px); }
.gallery__cont .like.s5 { font-size:0.5rem; padding-left:calc(10% + 5px); }
.gallery__cont .like.s6 { font-size:0.4rem; padding-left:calc(10% + 4px); }
.gallery__cont .like.s7 { font-size:0.3rem; padding-left:calc(10% + 4px); }
.gallery__cont .like.s8 { font-size:0.3rem; padding-left:calc(10% + 3px); }
.gallery__cont .like.s9 { font-size:0.3rem; padding-left:calc(10% + 3px); }
.gallery__cont .like.s10 { font-size:0.3rem; padding-left:calc(10% + 3px); }

.tree {
  position: relative;
  width: 12vw;
  max-width: 45px;
  aspect-ratio: 45/81;
  background: url(/images/tree-default.png) no-repeat center/contain;
  overflow: hidden;
}
.tree-planting {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0 1.25rem;
}
.tree__full {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url(/images/tree-full.png) no-repeat center/contain;
  clip-path: inset(calc(100% - var(--fill, 0%)) 0 0 0);
  transition: clip-path 0.5s ease;
}

/* 상태별로 --fill 값 제어 */
.tree.full-25 .tree__full {
  --fill: 25%;
}

.tree.full-50 .tree__full {
  --fill: 50%;
}

.tree.full-75 .tree__full {
  --fill: 75%;
}

.tree.full-100 .tree__full {
  --fill: 100%;
}

.rank__thumb {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: 1px solid #cccccc;
}
.rank__list {
  margin-top: 2.5rem;
}
.rank__top {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  width: 100%;
}
.rank__top .prize {
  width: 33.33%;
  text-align: center;
}
.rank__top .prize .info {
  padding-bottom: 0.5rem;
}
.rank__top .prize .info > p {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 700;
  line-height: 1.2;
}
.rank__top .prize .info > span {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  line-height: 1.5;
}
.rank__top .prize > span {
  font-size: 0.875rem;
  color: #ffffff;
  font-weight: 700;
  width: 100%;
  display: inline-block;
  box-shadow: inset 2.5px -4.3px 5px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.2); /* inner glow */
}
.rank__top .prize > span strong {
  font-size: 1.125rem;
}
.rank__top .prize-1st .info {
  position: relative;
}
.rank__top .prize-1st .info::before {
  width: 1.625rem;
  height: 1.25rem;
  content: "";
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  background: url(/images/icon/icon-winner.png) no-repeat center/auto;
}
.rank__top .prize-1st > span {
  padding: 1.625rem 0;
  background-color: #1ab177;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
}
.rank__top .prize-1st > span strong {
  font-size: 1.5rem;
}
.rank__top .prize-2nd > span {
  padding: 1.125rem 0;
  background-color: #dd2959;
  border-top-left-radius: 0.625rem;
}
.rank__top .prize-3rd > span {
  padding: 0.5rem 0;
  background-color: #444097;
  border-top-right-radius: 0.625rem;
}
.rank__bottom {
  margin-top: 0.625rem;
}
.rank__bottom li {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  padding: 0.625rem 0.625rem 0.625rem 0.5rem;
  gap: 0.5rem;
}
.rank__bottom li > span {
  flex-shrink: 0;
}
.rank__bottom li.my-account {
  background-color: #e8f7f1;
}
.rank__bottom li + li {
  border-top: 1px dashed #cccccc;
}
.rank__bottom .rank__info {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.625rem;
  width: calc(100% - 90px);
}
.rank__bottom .rank__info p {
  line-height: 1rem;
}
.rank__bottom i {
  font-size: 0.875rem;
  color: #1ab177;
  font-weight: 400;
  border-radius: 0.75rem;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  -ms-border-radius: 0.75rem;
  -o-border-radius: 0.75rem;
  width: 2.8125rem;
  border: 1px solid #1ab177;
  text-align: center;
  padding: 0.25rem 0;
  background-color: #ffffff;
  flex-shrink: 0;
}

.mypage .mypage-list {
  display: flex;
  flex-direction: column;
}
.mypage .mypage-list li {
  border-bottom: 1px solid #ebebeb;
}
.mypage .mypage-list li a {
  font-size: 1rem;
  color: #333333;
  font-weight: 400;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.3125rem 0 1.3125rem 0.875rem;
  position: relative;
}
.mypage .mypage-list li a::after {
  width: 6px;
  height: 12px;
  content: "";
  position: absolute;
  right: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  background: url(/images/icon/icon-contShow.png) no-repeat center/contain;
}
.mypage .mypage-list.setting a {
  justify-content: space-between;
  padding: 1.3125rem 1.25rem;
}
.mypage .mypage-list.setting a::after {
  display: none;
}
.mypage .info form {
  padding: 1rem;
}
.mypage .info .mypage-list {
  margin-bottom: 3.75rem;
}
.mypage .info .mypage-list li {
  border-bottom: none;
  border-top: 5px solid #f7f7f7;
}
.mypage .center {
  height: 100%;
}
.mypage .center .section {
  border-top: none;
  border-bottom: 5px solid #f4f4f4;
}
.mypage .center .section + .section {
  border-bottom: none;
}
.mypage .coupon-list li {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.625rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid #cccccc;
}
.mypage .coupon-list li.used {
  background-color: #f4f4f4;
}
.mypage .coupon-list li.used i {
  color: #999999;
  background-color: #cccccc;
}
.mypage .coupon-list .coupon-right {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.mypage .coupon-list .coupon-right > span {
  min-width: 3.125rem;
  text-align: right;
}
.mypage .coupon-list li + li {
  margin-top: 0.625rem;
}
.mypage .coupon-list p {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 700;
}
.mypage .coupon-list span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.mypage .coupon-list i {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  width: auto;
  height: 1.25rem;
  border-radius: 0.625rem;
  background-color: #1ab177;
  padding: 0 0.375rem;
}

.bottom__btns {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  --padding-bottom: env(safe-area-inset-bottom); /* ik remove */
}
.bottom__btns .button {
  font-size: 1rem;
  height: 3rem;
  font-weight: 700;
}
.bottom__btns .button.point {
  background-color: #1ab177;
  color: #ffffff;
}
.bottom__btns .button.point.disabled {
  background-color: #cccccc;
}
.bottom__btns .button.outline-main {
  border: 1px solid #1ab177;
  color: #1ab177;
}

.home.page {
  margin-bottom: 3.75rem;
  max-height: calc(100vh - 3.75rem);
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.home__top {
  width: 100%;
  height: 30vh;
  height: 28vh;
  border-bottom: 1px solid #f4f4f4;
  background-color: #1ab177;
  min-height: 195px;
}
.home__top .common-header {
  background-color: #1ab177;
  color: #1ab177;
  justify-content: flex-start;
  border-bottom: none;
}
.home-profile {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 3.75rem 1rem 0.625rem;
  gap: 1.25rem;
  height: calc(100% - 10vh);

  /* ik */
  padding: 0.625rem 1rem 0.625rem;
  --background:red;
  position: fixed;
  top:3.5rem; /* height of common-header */
  width:100%;
  height:10vh;
}
.home__board {
  padding: 1rem;
  margin: -11vh 0 1rem;
  min-height: 24.375rem;
  height: 67.5vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.home__banner {
  position: relative;
}
.home__banner img {
  border-radius: 0.625rem;
  width: 100%;
}
.home__banner .swiper-pagination {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  position: absolute;
  top: 0.3125rem;
  right: 0.375rem;
  bottom: unset;
  left: unset;
  z-index: 10;
  width: auto;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 2px 4px;
}
.home__banner .swiper-slide a {
  width: 100%;
  height: 100%;
  border-radius: 0.625rem;
  display: inline-block;
}
.home__banner .swiper-slide:first-of-type img {
  --border: 1px solid #f3d929; /* ikkim remark */
}
.home__banner .swiper-slide:nth-of-type(2) img {
  --border: 1px solid #137adb; /* ikkim remark */
}
/* ik */
.home__section .section_body {
  height:100%;
  display: flex;
  flex-direction: column;
}
.home__section .section__title {
  font-size: 1rem;
  color: #333333;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  --margin: 1.25rem 0 0;
}
.home__section .section__title span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  margin-left: 0.375rem;
}
.home__section .section__title i {
  font-size: 0.75rem;
  color: #1ab177;
  font-weight: 700;
}
.home__section:not(:has(.activity__area)) .section__title {
  padding-bottom: calc(0.625rem + 8.4375vh);
}
.home__section:has(.coupon__area) .section__title {
  padding-bottom: 0.625rem !important;
}

.profile-img {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border: 1px solid #18ad73;
  background-color: #ffffff;
  flex-shrink: 0;
  overflow: hidden;
}
/* ikkim for nickname ellipsis in home */
.profile-detail {
   width:100%;
   min-width:0;
   max-width:100%;
   --background:red;
}
.profile-detail > p {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  margin-top: 0.5rem;
  background: url(/images/icon/icon-talk.png) no-repeat left center/auto;
  padding-left: 1.75rem;
  line-height: 1.3;
}
.profile-grade {
  font-size: 1.125rem;
  color: #ffffff;
  font-weight: 400;
  line-height: 1.1;
}

.gpoint__area {
  border-radius: 0.625rem;
  background-color: #ffffff;
  padding: 0.625rem 1.125rem 0.625rem;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  --height: 18.75vh;
  --height: 30.75vh;
  height: 25.75vh;
  height: 20.75vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 0 1.25rem;
}
.gpoint__header {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: space-between;
  -ms-flex-pack: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  height: auto;
}
.gpoint__header .gpoint-info {
  display: flex;
  flex-direction: column;
  margin-top: 0.25rem;
}
.gpoint__header .gpoint-title {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: flex-start;
  -ms-flex-pack: flex-start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 1.125rem;
  color: #333333;
  font-weight: 700;
  display: flex;
}
.gpoint__header span {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  border-radius: 0.625rem;
  margin-left: 0.625rem;
  background: -moz-linear-gradient(-45deg, rgb(61, 203, 127) 0%, rgb(44, 190, 134) 100%);
  background: -webkit-linear-gradient(-45deg, rgb(61, 203, 127) 0%, rgb(44, 190, 134) 100%);
  background: -ms-linear-gradient(-45deg, rgb(61, 203, 127) 0%, rgb(44, 190, 134) 100%);
  padding: 0.25rem 0.375rem;
}
.gpoint__header .gpoint-value {
  font-size: 1.5rem;
  color: #1ab177;
  font-weight: 700;
  margin-top:0.5rem; /* ikkim add make margin of point */
}
/* ikkim 포인트를 총/사용/보유로 구분하여 표시 */
.gpoint__header .gpoint-title .logo { height:20px;margin-right:5px; }
.gpoint__header .gpoint-value .item {
  color: #999;
  margin-left: 0;
  background: none;
  padding: 0;
}
.gpoint__header .gpoint-value .item:not(:first-child) {
  margin-left:0.625rem;
}
.gpoint__header .gpoint-value .value {
  font-size: 1rem;
  color: #1ab177;
  font-weight: 700;
  background:none;
  margin-left:0;
}
.gpoint__header .gpoint-value .value:nth-child(2) {
  color:#1ab177;
}
.gpoint__header .gpoint-value .value:nth-child(4) {
  color:red;
}
.gpoint__header .gpoint-value .value:nth-child(6) {
  color:#333;
}
/* ikkim end */
.gpoint__header img {
  width: auto;
  height: 3.125rem;
}
.gpoint__progress {
  position: relative;
  --padding: 0.625rem 0.125rem 1.15rem;
  padding: 0.625rem 0.125rem 2.3rem;
}
.gpoint__progress .progress {
  /* 단계 */
}
.gpoint__progress .progress-track {
  border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  height: 0.75rem;
  background: #d1efe4;
}
.gpoint__progress .progress-fill {
  border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  height: 0.75rem;
  background: #22c55e;
  position: absolute;
  --top: 10px;
  top: 0.625rem;
  left: 0;
  transition: width 0.3s ease;
}
.gpoint__progress .progress-fill::after {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid #ffffff;
  background-color: #31cf92;
  box-shadow: 0px 0px 2px 0.5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  right: 0;
}
.gpoint__progress .progress-fill.is-low::after {
  right: -12px;
}
.gpoint__progress .progress-fill[style*="width: 100"]::after {
  right: -2px;
}
.gpoint__progress .progress-steps {
  display: flex;
  justify-content: space-between;
  position: absolute;
  --top: 11px;
  top: 0.625rem;
  left: 0;
  right: 0;
}
.gpoint__progress .progress-steps > div:first-of-type {
  position: absolute;
  left: -3px;
}
.gpoint__progress .progress-steps > div:last-of-type {
  margin-right: 3px;
}
.gpoint__progress .step {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: 1;
  color: #9ca3af;
}
.gpoint__progress .step .circle {
  --margin-top:0.047rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background: #e7fbf4;
  z-index: 2;
}
.gpoint__progress .step .status {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  --display: flex;
  --margin-right: -0.375rem;
  margin-right: -0.5rem;
  margin-top: 0.25rem;
}
.gpoint__progress .step.active .circle {
  background-color: #12875a;
}
.gpoint__progress .step.active .status {
  color: #1ab177;
  font-weight: 700;
}

.coupon__area {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 9.375vh;
  border-radius: 0.625rem;
  background-color: #ffffff;
  display: block;
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
  min-height: 60px;
  padding: 0 1.25rem;
}
.coupon__area ul {
  width: 100%;
  height: 100%;
}
.coupon-item {
  width: 2.75rem;
  height: 2.75rem;
  display: block;
  background: url(/images/coupon-default.png) no-repeat center/contain;
}
.coupon-item.coupon--valid {
  background-image: url(/images/coupon-valid.png);
}

.activity__area {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem; /* temp */
  --gap:1px;
  text-align: center;
  min-height: 8.4375vh;
  height: calc(100% - 50px);
  height:100%;
  --background: red;

  position: relative;
}
.activity__area a {
  font-size: 0.75rem;
  color: #000000;
  font-weight: 400;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 0.625rem; /* temp */
  padding: 0;
  flex-direction: column;
  --height: 8.4375vh;

  height:100%;
  --outline: 1px solid #ddd;

  position: relative;
}
/*
.activity__area a img {
  --height: 24px;
  height: 6vh;
  --margin-bottom: 0.25rem;
  margin-bottom: 0.15rem;
}
*/
.activity__area a img {
  position:absolute;
  top:0;
  left:0;
  --width:100%;
  --height: 6vh;
  --height: 65%;
  
  margin:0.4rem 0.4rem 0.3rem;
  width:calc(100% - 0.8rem);
  height:calc(100% - 0.6rem - 1rem); /* 100% - fontSize(0.6rem) - top margin(0.4rem) - bot margin(0.3rem) - 이미지/텍스트간격(0.3rem) */
  --background:blue;
}
.activity__area a img.participated {
  height:calc(100% - 0.6rem);
}

.activity__area a img.active_campaign {
  animation: wobbleY 2s linear infinite;
}
@keyframes spinY {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@keyframes wobbleY {
  from { transform: rotateY(-35deg); }
  to { transform: rotateY(35deg); }
}

.activity__area a.donation {
  background-color: #ffedf8;
  border: 1px solid #fad2ec;
  box-shadow: 2px 2px 0px 0px rgb(250, 210, 236);
}
.activity__area a.quiz {
  background-color: #eaf6ff;
  border: 1px solid #cdeaff;
  box-shadow: 2px 2px 0px 0px rgb(205, 234, 255);
}
.activity__area a.quiz img {
  height: 22px;
}
.activity__area a.class {
  background-color: #eafff7;
  border: 1px solid #c0f6e1; /* temp */
  box-shadow: 2px 2px 0px 0px rgb(192, 246, 225);
}
.activity__area a.local_class {
  background-color: #eee5ff;
  border: 1px solid #d3c0f6; /* temp */
  box-shadow: 2px 2px 0px 0px rgb(211, 192, 246);
}
.activity__area a.zero {
  background-color: #fff3e3;
  border: 1px solid #ffe8c9;
  box-shadow: 2px 2px 0px 0px rgb(255, 232, 201);
}
.activity__area a.energy {
  background-color: #e1f3ff;
  border: 1px solid #b9e3ff;
  box-shadow: 2px 2px 0px 0px rgb(185, 227, 255);
}
.activity__area a.ecobag {
  background-color: #feffce;
  border: 1px solid #f4f5b4;
  box-shadow: 2px 2px 0px 0px rgb(244, 245, 180);
}
.activity__area a.walk {
  background-color: #eaffeb;
  border: 1px solid #d1fad3; /* temp */
  box-shadow: 2px 2px 0px 0px rgb(209, 250, 211);
}
.activity__area a.attendance {
  background-color: #ffebeb;
  border: 1px solid #ffdada; /* temp */
  box-shadow: 2px 2px 0px 0px rgb(255, 218, 218);
}
.activity__area a.environment {
  background-color: #e1fff5;
  border: 1px solid #cbf7e8; /* temp */
  box-shadow: 2px 2px 0px 0px rgb(203, 247, 232);
}

.activity__area a.tbu {
  background-color: #f4f4f4;
  border: 1px solid #e6e6e6; /* temp */
  box-shadow: 2px 2px 0px 0px rgb(230, 230, 230);
}

.activity__area p {
  /*
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  --align-items: center;
  align-items: center;
  */

  position: absolute;
  bottom:0;
  margin-bottom:0.3rem;
  height: 0.6rem;
  width:calc(100% - 0.8rem);

  font-size: 0.6rem;
  
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: keep-all;
  display: block;
  --background: blue;
}
.activity__area p.participated {
  color:#999;
}

.activity.sub-page {
  overflow-x: hidden;
}
.activity .gray-bg-txt {
  text-align: center;
}
.activity .gray-bg-txt p {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@media (max-width: 350px) {
  .activity .gray-bg-txt p {
    align-items: flex-start;
  }
}
.activity .gray-bg-txt p::before {
  content: "";
  width: 26px;
  height: 21px;
  display: block;
  background: url(/images/icon/icon-talk.png) no-repeat center/auto;
  line-height: 1.3;
  margin-top: 1px;
}
.activity .swiper-slide {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 0.75rem;
  margin-top: 1.5625rem;
}
.activity .swiper-pagination {
  position: unset;
  margin-top: 0.875rem;
}
.activity .swiper-pagination-bullet-active {
  background-color: #ffffff;
  border: 2px solid #1ab177;
}
.activity__item {
  font-size: 0.875rem;
  color: #333333;
  font-weight: 400;
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  -o-border-radius: 0.5rem;
  display: block;
  border: 1px solid #18ad73;
  position: relative;
  width: 100%;
  padding-top: 110%;
  text-align: center;
}
.activity__item span {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  margin: 0 auto;
  gap: 0.75rem;
  width: 100%;
  word-break: keep-all;
}
.activity__item:nth-of-type(1) {
  background-color: #eafff7;
  border: 1px solid #c0f6e1;
  box-shadow: 2px 2px 0px 0px rgb(192, 246, 225);
}
.activity__item:nth-of-type(2) {
  background-color: #fff3e3;
  border: 1px solid #ffe8c9;
  box-shadow: 2px 2px 0px 0px rgb(255, 232, 201);
}
.activity__item:nth-of-type(3) {
  background-color: #e1f3ff;
  border: 1px solid #b9e3ff;
  box-shadow: 2px 2px 0px 0px rgb(185, 227, 255);
}
.activity__item:nth-of-type(4) {
  background-color: #feffce;
  border: 1px solid #f4f5b4;
  box-shadow: 2px 2px 0px 0px rgb(244, 245, 180);
}
.activity__item:nth-of-type(5) {
  background-color: #ffedf8;
  border: 1px solid #fad2ec;
  box-shadow: 2px 2px 0px 0px rgb(250, 210, 236);
}
.activity__item:nth-of-type(6) {
  background-color: #eaffeb;
  border: 1px solid #d1fad3;
  box-shadow: 2px 2px 0px 0px rgb(209, 250, 211);
}
.activity__item:nth-of-type(7) {
  background-color: #ffebeb;
  border: 1px solid #ffdada;
  box-shadow: 2px 2px 0px 0px rgb(255, 218, 218);
}
.activity__item:nth-of-type(8) {
  background-color: #e1fff5;
  border: 1px solid #cbf7e8;
  box-shadow: 2px 2px 0px 0px rgb(203, 247, 232);
}
.activity__item.tbu {
  background-color: #f4f4f4;
  border: 1px solid #e6e6e6;
  box-shadow: 2px 2px 0px 0px rgb(230, 230, 230);
}

.walk-count {
  text-align: center;
  padding: 0 1rem;
}
.walk-count > span {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
}
.walk-count .value {
  margin: 1.125rem 0 2rem;
}
.walk-count .current {
  font-size: 1.5rem;
  color: #1ab177;
  font-weight: 700;
}
.walk-count .total {
  font-size: 0.875rem;
  color: #999999;
  font-weight: 400;
}
.walk-count .progress-bar {
  position: relative;
  height: 0.625rem;
}
.walk-count .progress-track {
  width: 100%;
  height: 0.625rem;
  border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  background-color: #d1efe4;
  position: relative;
  --background: red;
}
.walk-count .progress-fill {
  border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  -moz-border-radius: 0.3125rem;
  -ms-border-radius: 0.3125rem;
  -o-border-radius: 0.3125rem;
  height: 0.625rem;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.3s ease;
}
.walk-count .progress-mark {
  position: absolute;
  --top: -25px;
  bottom: -0.1875rem;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}
.walk-count .progress-mark .percent {
  font-size: 0.75rem;
  color: #ffffff;
  font-weight: 400;
  border-radius: 0.625rem;
  background: #1ab177;
  padding: 2px 6px;
  display: inline-block;
  margin-bottom: 4px;
}
.walk-count .progress-mark .percent::before {
  width: 0;
  height: 0;
  content: "";
  position: absolute;
  transform: translateX(-50%);
  bottom: 16px;
  left: 50%;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #1ab177;
}
.walk-count .progress-mark .pointer {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: block;
  background: #1ab177;
  border: 4px solid #d1efe4;
  margin: 0 auto;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
}

.walk-count .progress-step {
  position: absolute;
  --bottom: -32px;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}
.walk-count .progress-step.p_3000 {
  left: calc(100% / 3);
}
.walk-count .progress-step.p_6000 {
  left: calc((100% / 3) * 2);
}
.walk-count .progress-step.p_9000 {
  right: 0.3125rem; transform: translateX(50%);
}

.walk-count .progress-step .percent {
  font-size: 0.75rem;
  color: #999;
  font-weight: 400;
  --padding: 2px 6px;
  display: inline-block;
  margin-top: 1rem;
}
.walk-count .progress-step .percent::before {
  --width: 0;
  --height: 0;
  width: calc(0.625rem - 6px);
  height: calc(0.625rem - 6px);
  content: "";
  position: absolute;
  transform: translateX(-50%);
  top:0;
  left: 50%;
  border-radius: 50%;
  background:#fff;
  border: 3px solid #ccc;
  --padding:5px;
  margin: 0 auto;
}

.calendar {
  border-radius: 0.625rem;
  margin: 2.125rem 0 1.25rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.calendar__header {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 700;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 9vw;
  background-color: #444097;
  text-align: center;
  padding: 1rem 0;
  border-top-left-radius: 0.625rem;
  border-top-right-radius: 0.625rem;
  position: relative;
}
.calendar__header img {
  margin-top: -28px;
}
.calendar__days {
  font-size: 0.75rem;
  color: #333333;
  font-weight: 700;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0 0.5rem;
  text-align: center;
  margin: 1.5rem 0 1.125rem;
  border-left: 1px solid #f4f4f4;
  border-right: 1px solid #f4f4f4;
}
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1rem 0.5rem;
  text-align: center;
  padding-bottom: 1.125rem;
  border: 1px solid #f4f4f4;
  border-top: none;
  border-bottom-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
}
.calendar__grid .day {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 0.75rem;
  color: #999999;
  font-weight: 400;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  background-color: #f4f4f4;
  margin: 0 auto;
  position: relative;
}
.calendar__grid .day:has(span:empty) {
  background-color: transparent;
}
.calendar__grid .day.active {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  background-color: transparent;
  background: url("/images/icon/icon-clover.png") no-repeat center/contain;
  color: #fff;
  font-weight: bold;
  background-size: 1.375rem 1.375rem;
}
.calendar + .button--large.disabled {
  color: #999999;
  background-color: #cccccc;
}


/***********************/
.flex_set { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flex_cc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flex_sc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flex_ec { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
/***********************/


@media screen and (min-width: 768px) {
  .activity .swiper-slide {
    gap: 2rem 1.5rem;
  }
  .gallery__cont {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 300px) {
  .activity__item {
    font-size: 0.75rem;
  }
}

/* ikkim 639px -> 649px : 아이폰 작은 화면에서 로고와 회원가입이 붙어있는 현상을 개선하기 위해 */
@media (max-height: 649px) {
  .login {
    padding-top: 5vh;
  }
  .login__sns {
    margin-top: 5vh;
  }
  .login__footer {
    position: unset;
    margin-top: 1.5rem;
  }
  .home__board {
    --height: auto;
  }
  .activity__area p {
    bottom:0;
  }
  .activity__area a img {
    top:0;
  }
}
/*
클래스명 작성 방법 : BEM 방식 작성
.card // 블록
.card-box // 블록명이 길어지는 경우 '-' 사용
.card__header // __header : 엘리먼트 일경우 '__' 사용
.button--primary // --priamary : 상태명 '--' 사용

[예시코드]
<div class="card card--featured">
	<div class="card__header">
		<h2 class="card__title">카드 제목</h2>
	</div>

	<div class="card__content">
		<p class="card__text">샘플 텍스트가 포함된 추천 카드</p>
	</div>

	<div class="card__footer">
		<a href="#" class="button button--primary">더보기</a>
	</div>
</div>
*/

/*# sourceMappingURL=style.css.map */