:root {
  --quiz-box-gap: 24px;
  --gauge-height: 40px;
  --state-box-pad: 20px;
  --attend-gap: 10px;
}
@media (max-width: 639.98px) {
  :root {
    --quiz-box-gap: 14px;
  }
}
@media (max-width: 479.98px) {
  :root {
    --gauge-height: 30px;
    --state-box-pad: 16px;
    --attend-gap: 5px;
  }
}
@media (max-width: 359.98px) {
  :root {
    --state-box-pad: 12px;
    --quiz-box-gap: 10px;
  }
}

.container:has(.btn-logout) {
  position: relative;
  overflow: hidden;
}

.btn-logout {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: auto;
  margin-top: 40px;
  color: #111;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -1px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: right;
  float: right;
}

.my-section {
  margin-top: 70px;
  overflow: hidden;
  position: relative;
}
.my-section__title {
  margin-bottom: 24px;
}
.my-section__title a.tit:after {
  content: "";
}
.my-section__title .tit {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #111;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.2px;
}
.my-section__title .tit:after {
  display: block;
  width: 11px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='18' viewBox='0 0 11 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.11621 1.11621C1.57387 0.658549 2.29809 0.629789 2.78906 1.03027L2.88379 1.11621L10.7676 9L2.88379 16.8838C2.39563 17.3719 1.60437 17.3719 1.11621 16.8838C0.628055 16.3956 0.628055 15.6044 1.11621 15.1162L7.23242 9L1.11621 2.88379L1.03027 2.78906C0.629789 2.29809 0.658549 1.57387 1.11621 1.11621Z' fill='%23111111'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  margin-left: 8px;
}
@media (max-width: 479.98px) {
  .my-section__title .tit {
    font-size: 22px;
  }
}
.my-section__title .desc {
  margin-top: 13px;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.7px;
}

.my-quiz-history {
  word-break: keep-all;
  padding: 40px;
  border-radius: 0 0 20px 20px;
  border: 1px solid #eee;
  text-align: center;
}
.my-quiz-history .my-section__title .tit {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 479.98px) {
  .my-quiz-history {
    padding: 30px 16px;
  }
}

.quiz-history-state {
  margin-top: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--quiz-box-gap);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.quiz-history-state .box {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  text-align: left;
  width: 100%;
  max-width: 270px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - var(--quiz-box-gap)) / 2);
          flex: 0 0 calc((100% - var(--quiz-box-gap)) / 2);
  width: calc((100% - var(--quiz-box-gap)) / 2);
  background: #f7f9ff;
  border-radius: var(--state-box-pad);
  padding: var(--state-box-pad);
}
.quiz-history-state .box em {
  font-style: normal;
}
.quiz-history-state .box .title {
  width: 100%;
  color: #111;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
.quiz-history-state .box .title em {
  color: #2b66f5;
}
.quiz-history-state .box .count {
  width: 100%;
  color: #666;
  font-weight: 500;
  line-height: 1;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.quiz-history-state .box .count em {
  margin-right: 3px;
  font-family: "Gmarket Sans", "Pretendard", sans-serif;
  color: #111;
  text-align: right;
  font-size: 30px;
  font-weight: 700;
}
.quiz-history-state .box .num {
  color: #666;
  font-family: "Gmarket Sans", "Pretendard", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: -0.12px;
}
.quiz-history-state .box .num em {
  font-size: 21px;
  color: #111;
  font-weight: 700;
  letter-spacing: -0.21px;
}
.quiz-history-state .box .state {
  width: 100%;
}
.quiz-history-state .box .state .txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 7px;
  line-height: 1;
}
.quiz-history-state .box .state .label {
  color: #666;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -1px;
}
.quiz-history-state .box .gauge {
  position: relative;
  height: 16px;
  border-radius: 20px;
  background: rgba(35, 84, 238, 0.1);
}
.quiz-history-state .box .gauge__bar {
  border-radius: inherit;
  background: #10a8fc;
  background: -webkit-gradient(linear, left top, right top, from(#10a8fc), to(#254bed));
  background: linear-gradient(90deg, #10a8fc 0%, #254bed 100%);
  height: 100%;
}
.quiz-history-state .box .exp {
  margin-top: 14px;
  line-height: 1.3;
  font-size: 12px;
  color: #333;
  font-weight: 500;
  letter-spacing: -0.5px;
}
.quiz-history-state .box.box--total {
  background: #edf1ff;
}
.quiz-history-state .box.box--total .gauge__bar {
  background-color: #3b00ff;
  background: -webkit-gradient(linear, left top, right top, from(#3b00ff), to(#6a00ff));
  background: linear-gradient(90deg, #3b00ff 0%, #6a00ff 100%);
}
@media (max-width: 390.98px) {
  .quiz-history-state .box .count em {
    font-size: 26px;
  }
  .quiz-history-state .box .num em {
    font-size: 18px;
  }
  .quiz-history-state .box .gauge {
    height: 12px;
  }
}
@media (max-width: 359.98px) {
  .quiz-history-state .box .title {
    font-size: 14px;
  }
}

.page--my-zzim .comboBx {
  margin-top: 24px;
  margin-bottom: 20px;
}

.nickname {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.nickname .tit {
  display: inline-block;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
.nickname .tit span {
  display: inline-block;
}
.nickname__btn {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.0288 3.38344C15.2342 3.3835 15.4378 3.42456 15.6274 3.50356C15.8168 3.58249 15.9888 3.69783 16.1333 3.8434L17.5181 5.22816L17.6216 5.34145C17.7195 5.45989 17.7996 5.59261 17.8589 5.735C17.9379 5.92469 17.979 6.12815 17.979 6.33363C17.979 6.53911 17.9379 6.74258 17.8589 6.93227C17.78 7.12155 17.6635 7.29262 17.5181 7.43715L17.519 7.43813L8.74854 16.235C8.71249 16.2711 8.66595 16.2952 8.61572 16.3043L4.69385 17.0104C4.61402 17.0247 4.5319 16.9989 4.47412 16.942C4.41666 16.8852 4.38987 16.8041 4.40283 16.7243L5.05713 12.7506L5.08154 12.6764C5.0933 12.6536 5.10811 12.6323 5.12646 12.6139L13.9233 3.8434C14.0679 3.69783 14.2399 3.5825 14.4292 3.50356C14.6189 3.4245 14.8233 3.38344 15.0288 3.38344Z' fill='%23CCCCCC' stroke='%23CCCCCC' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 20.5H18.3782' stroke='%23CCCCCC' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: center;
}

.my-level {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 60px 40px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -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;
  gap: 24px;
  border-radius: 20px 20px 0 0;
  background: #3848f2;
  background: linear-gradient(299deg, #3848f2 40.97%, #672cf0 99.45%);
  color: #fff;
}
.my-level .level-img {
  max-width: 165px;
  width: 35%;
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  overflow: hidden;
  border-radius: 50%;
}
.my-level .level-img[data-level="1"] {
  background-image: url(//cwstatic.asiae.co.kr/pocket/level-1.svg);
}
.my-level .level-img[data-level="2"] {
  background-image: url(//cwstatic.asiae.co.kr/pocket/level-2.svg);
}
.my-level .level-img[data-level="3"] {
  background-image: url(//cwstatic.asiae.co.kr/pocket/level-3.svg);
}
.my-level .level-img[data-level="4"] {
  background-image: url(//cwstatic.asiae.co.kr/pocket/level-4.svg);
}
.my-level .level-img[data-level="5"] {
  background-image: url(//cwstatic.asiae.co.kr/pocket/level-5.svg);
}
.my-level .level-img[data-level="6"] {
  background-image: url(//cwstatic.asiae.co.kr/pocket/level-6.svg);
}
.my-level .level-name {
  font-size: 24px;
}
.my-level .level-name .name {
  color: #fff;
  font-family: "NanumSquareNeo", "Pretendard", sans-serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.0833333333em;
  margin-bottom: 0.5833333333em;
}
.my-level .level-name .num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.0833333333em;
  font-weight: 500;
}
.my-level .level-name .num span {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
}
.my-level .level-name .num .em {
  margin-bottom: -0.1em;
  color: #4effb8;
  font-size: 1.5em;
  font-weight: 900;
}
.my-level .level-gauge {
  width: 100%;
  padding-bottom: 22px;
  position: relative;
  row-gap: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.my-level .level-gauge__range {
  bottom: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.14px;
  position: absolute;
  bottom: 0;
}
.my-level .level-gauge__range:after {
  content: "Exp";
}
.my-level .level-gauge__range--start {
  left: 0;
}
.my-level .level-gauge__range--end {
  right: 0;
}
.my-level .level-gauge .gauge {
  width: 100%;
  height: var(--gauge-height);
  border-radius: var(--gauge-height);
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  color: #111;
  font-size: 15px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.5px;
  overflow: hidden;
}
.my-level .level-gauge .exp {
  border-radius: 0 var(--gauge-height) var(--gauge-height) 0;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #fff;
}
.my-level .level-gauge .exp.txt-in .exp-num {
  width: auto;
  left: 100%;
  right: auto;
  color: #fff;
}
.my-level .level-gauge .exp.txt-zero .exp-num {
  padding: 0 1.33em;
}
.my-level .level-gauge .exp .exp-num {
  display: block;
  position: absolute;
  padding: 0 1.33em 0 0.7em;
  right: 0;
  font-style: normal;
}
.my-level .level-txt {
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.8px;
  letter-spacing: -0.05em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  word-break: keep-all;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  -webkit-column-gap: 0.3em;
     -moz-column-gap: 0.3em;
          column-gap: 0.3em;
}
@media (max-width: 479.98px) {
  .my-level {
    padding: 30px 20px;
    gap: 20px;
  }
  .my-level .level-name {
    font-size: 20px;
  }
  .my-level .level-gauge .gauge {
    font-size: 13px;
  }
}
@media (max-width: 390.98px) {
  .my-level .level-gauge {
    padding-bottom: 20px;
  }
  .my-level .level-gauge__range {
    font-size: 12px;
  }
  .my-level .level-txt {
    font-size: 14px;
  }
}
@media (max-width: 359.98px) {
  .my-level .level-txt {
    font-size: 13px;
  }
}

#popup--rename {
  text-align: center;
  color: #111;
}
#popup--rename .popup__wrap {
  max-width: 300px;
}
#popup--rename .ico {
  font-size: 34px;
}
#popup--rename .tit {
  margin-bottom: 24px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}
#popup--rename .btn {
  margin-top: 24px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 42px;
  padding: 12px 0px;
  min-width: 6em;
  color: #fff;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 10px;
  background: #4958ff;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
}
#popup--rename .input-bx {
  max-width: 210px;
  position: relative;
  margin: 0 auto;
}
#popup--rename .input-bx input {
  width: 100%;
  padding: 24px 0.2em;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #efefef;
  font-size: 18px;
  letter-spacing: 0.1em;
  line-height: 1.5;
  font-weight: 800;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#popup--rename .input-bx input::-webkit-input-placeholder {
  color: #ccc;
  font-weight: 400;
}
#popup--rename .input-bx input::-moz-placeholder {
  color: #ccc;
  font-weight: 400;
}
#popup--rename .input-bx input:-ms-input-placeholder {
  color: #ccc;
  font-weight: 400;
}
#popup--rename .input-bx input::-ms-input-placeholder {
  color: #ccc;
  font-weight: 400;
}
#popup--rename .input-bx input::placeholder {
  color: #ccc;
  font-weight: 400;
}
#popup--rename .input-bx__length {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px 10px;
  color: #666;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.attend-board {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: var(--attend-gap);
     -moz-column-gap: var(--attend-gap);
          column-gap: var(--attend-gap);
  row-gap: 16px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  min-width: 248px;
  padding: 8px 0;
}
.attend-board__wrap {
  top: -8px;
  margin-bottom: -8px;
  position: relative;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .attend-board {
    row-gap: 24px;
  }
}
.attend-board .btn {
  max-width: 110px;
  padding: 16px;
  border-radius: 16px;
  gap: 12px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - var(--attend-gap) * 4) / 5);
          flex: 0 0 calc((100% - var(--attend-gap) * 4) / 5);
  width: calc((100% - var(--attend-gap) * 4) / 5);
  background: #fff;
  -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #111;
}
.attend-board .btn[disabled] {
  cursor: default;
}
.attend-board .btn.active:not(.btn--bonus) {
  color: #fff;
  background-color: #3848f2;
}
.attend-board .btn.active:not(.btn--bonus) .exp {
  background: rgba(255, 255, 255, 0.08);
}
.attend-board .btn.off {
  color: #666;
}
.attend-board .btn.off .exp,
.attend-board .btn.off .tit {
  opacity: 0.5;
}
.attend-board .btn.off .exp {
  background: rgba(17, 17, 17, 0.06);
}
.attend-board .btn.off .exp:before {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.attend-board .btn.off .tit .double {
  background: #ccc;
  color: #111;
}
.attend-board .btn .tit {
  width: 100%;
  font-size: 14px;
  line-height: 1;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1px;
}
.attend-board .btn .tit .em {
  font-size: 1.4285714286em;
  font-weight: 600;
}
.attend-board .btn .tit .double {
  font-size: 0.8571428571em;
  font-weight: 600;
  border-radius: 4px;
  background: #fb0;
  padding: 2px 4px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
  margin-left: 3px;
  color: #111;
}
.attend-board .btn .exp {
  background: rgba(255, 187, 0, 0.1);
  margin: 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  border-radius: 0.3076923077em;
  padding: 0.3076923077em 0.3846153846em;
  gap: 0.2307692308em;
  font-size: 26px;
  font-weight: 900;
}
.attend-board .btn .exp:before {
  content: "";
  height: 20px;
  aspect-ratio: 1;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4.44444 8.66667V4.44444H2.22222V5.55555C2.22222 6.25926 2.42593 6.8937 2.83333 7.45889C3.24074 8.02407 3.77778 8.42667 4.44444 8.66667ZM15.5556 8.66667C16.2222 8.42592 16.7593 8.02296 17.1667 7.45778C17.5741 6.89259 17.7778 6.25852 17.7778 5.55555V4.44444H15.5556V8.66667ZM8.88889 17.7778V14.3333C7.98148 14.1296 7.17148 13.7456 6.45889 13.1811C5.7463 12.6167 5.22296 11.9081 4.88889 11.0556C3.5 10.8889 2.33815 10.2826 1.40333 9.23666C0.468518 8.19074 0.000740741 6.9637 0 5.55555V4.44444C0 3.83333 0.217778 3.31037 0.653333 2.87555C1.08889 2.44074 1.61185 2.22296 2.22222 2.22222H4.44444C4.44444 1.61111 4.66222 1.08815 5.09778 0.653333C5.53333 0.218519 6.0563 0.000740741 6.66667 0H13.3333C13.9444 0 14.4678 0.217778 14.9033 0.653333C15.3389 1.08889 15.5563 1.61185 15.5556 2.22222H17.7778C18.3889 2.22222 18.9122 2.44 19.3478 2.87555C19.7833 3.31111 20.0007 3.83407 20 4.44444V5.55555C20 6.96296 19.5322 8.19 18.5967 9.23666C17.6611 10.2833 16.4993 10.8896 15.1111 11.0556C14.7778 11.9074 14.2548 12.6159 13.5422 13.1811C12.8296 13.7463 12.0193 14.1304 11.1111 14.3333V17.7778H14.4444C14.7593 17.7778 15.0233 17.8844 15.2367 18.0978C15.45 18.3111 15.5563 18.5748 15.5556 18.8889C15.5548 19.203 15.4481 19.467 15.2356 19.6811C15.023 19.8952 14.7593 20.0015 14.4444 20H5.55556C5.24074 20 4.97704 19.8933 4.76444 19.68C4.55185 19.4667 4.44518 19.203 4.44444 18.8889C4.4437 18.5748 4.55037 18.3111 4.76444 18.0978C4.97852 17.8844 5.24222 17.7778 5.55556 17.7778H8.88889Z' fill='%23FFBB00'/%3E%3C/svg%3E");
}
.attend-board .btn--bonus .exp:before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='21' viewBox='0 0 22 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.4528 10.1558L20.2313 12.5094C19.8662 16.3873 19.6838 18.3263 18.5409 19.4954C17.3979 20.6646 15.6849 20.6646 12.259 20.6646H9.63041C6.20442 20.6646 4.49143 20.6646 3.34849 19.4954C2.20556 18.3263 2.02307 16.3873 1.65809 12.5094L1.43659 10.1558C1.26262 8.30735 1.17564 7.38313 1.49185 7.00107C1.6629 6.79441 1.89551 6.66777 2.1442 6.64593C2.60393 6.60556 2.19379 7.12614 3.34849 8.44067C3.94566 9.1205 5.33097 11.5613 5.66406 11.6139C5.84862 11.643 6.03667 11.6131 6.20709 11.5273C6.51466 11.3725 6.62051 10.9881 7.03064 10.1477L9.19242 5.71785C9.96741 4.12975 10.355 3.33569 10.9447 3.33569C11.5344 3.33569 11.922 4.12975 12.6969 5.71784L14.8587 10.1477C15.2689 10.9881 15.4739 11.4083 15.7815 11.5632C15.9519 11.6489 16.14 11.6788 16.3245 11.6497C16.6576 11.5971 17.9437 8.97675 18.5409 8.29692C19.6956 6.98239 19.2854 6.60556 19.7451 6.64593C19.9938 6.66777 20.2264 6.79441 20.3975 7.00107C20.7137 7.38313 20.6267 8.30735 20.4528 10.1558Z' fill='%23FFBB00'/%3E%3Crect x='9' width='4' height='4' rx='2' fill='%23FFBB00'/%3E%3Crect x='18' y='4' width='4' height='4' rx='2' fill='%23FFBB00'/%3E%3Crect y='4' width='4' height='4' rx='2' fill='%23FFBB00'/%3E%3C/svg%3E%0A");
}
.attend-board .btn--bonus.active {
  -webkit-box-shadow: inset 0 0 0 3px #4068f5;
          box-shadow: inset 0 0 0 3px #4068f5;
}
.attend-board .btn--bonus.active .exp {
  background: rgba(64, 104, 245, 0.08);
}
.attend-board .btn--bonus.active .exp:before {
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='21' viewBox='0 0 22 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.4528 10.1558L20.2313 12.5094C19.8662 16.3873 19.6838 18.3263 18.5409 19.4954C17.3979 20.6646 15.6849 20.6646 12.259 20.6646H9.63041C6.20442 20.6646 4.49143 20.6646 3.34849 19.4954C2.20556 18.3263 2.02307 16.3873 1.65809 12.5094L1.43659 10.1558C1.26262 8.30735 1.17564 7.38313 1.49185 7.00107C1.6629 6.79441 1.89551 6.66777 2.1442 6.64593C2.60393 6.60556 2.19379 7.12614 3.34849 8.44067C3.94566 9.1205 5.33097 11.5613 5.66406 11.6139C5.84862 11.643 6.03667 11.6131 6.20709 11.5273C6.51466 11.3725 6.62051 10.9881 7.03064 10.1477L9.19242 5.71785C9.96741 4.12975 10.355 3.33569 10.9447 3.33569C11.5344 3.33569 11.922 4.12975 12.6969 5.71784L14.8587 10.1477C15.2689 10.9881 15.4739 11.4083 15.7815 11.5632C15.9519 11.6489 16.14 11.6788 16.3245 11.6497C16.6576 11.5971 17.9437 8.97675 18.5409 8.29692C19.6956 6.98239 19.2854 6.60556 19.7451 6.64593C19.9938 6.66777 20.2264 6.79441 20.3975 7.00107C20.7137 7.38313 20.6267 8.30735 20.4528 10.1558Z' fill='%234068F5'/%3E%3Crect x='9' width='4' height='4' rx='2' fill='%234068F5'/%3E%3Crect x='18' y='4' width='4' height='4' rx='2' fill='%234068F5'/%3E%3Crect y='4' width='4' height='4' rx='2' fill='%234068F5'/%3E%3C/svg%3E%0A");
}
.attend-board .btn--double {
  max-width: inherit;
  width: calc((80% - var(--attend-gap) * 2) / 2);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((80% - var(--attend-gap) * 2) / 2);
          flex: 0 0 calc((80% - var(--attend-gap) * 2) / 2);
}
.attend-board .btn--double .exp:before {
  aspect-ratio: 35/20;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='20' viewBox='0 0 35 20' fill='none'%3E%3Cpath d='M11.4444 8.66667V4.44444H9.22222V5.55555C9.22222 6.25926 9.42593 6.8937 9.83333 7.45889C10.2407 8.02407 10.7778 8.42667 11.4444 8.66667ZM22.5556 8.66667C23.2222 8.42592 23.7593 8.02296 24.1667 7.45778C24.5741 6.89259 24.7778 6.25852 24.7778 5.55555V4.44444H22.5556V8.66667ZM15.8889 17.7778V14.3333C14.9815 14.1296 14.1715 13.7456 13.4589 13.1811C12.7463 12.6167 12.223 11.9081 11.8889 11.0556C10.5 10.8889 9.33815 10.2826 8.40333 9.23666C7.46852 8.19074 7.00074 6.9637 7 5.55555V4.44444C7 3.83333 7.21778 3.31037 7.65333 2.87555C8.08889 2.44074 8.61185 2.22296 9.22222 2.22222H11.4444C11.4444 1.61111 11.6622 1.08815 12.0978 0.653333C12.5333 0.218519 13.0563 0.000740741 13.6667 0H20.3333C20.9444 0 21.4678 0.217778 21.9033 0.653333C22.3389 1.08889 22.5563 1.61185 22.5556 2.22222H24.7778C25.3889 2.22222 25.9122 2.44 26.3478 2.87555C26.7833 3.31111 27.0007 3.83407 27 4.44444V5.55555C27 6.96296 26.5322 8.19 25.5967 9.23666C24.6611 10.2833 23.4993 10.8896 22.1111 11.0556C21.7778 11.9074 21.2548 12.6159 20.5422 13.1811C19.8296 13.7463 19.0193 14.1304 18.1111 14.3333V17.7778H21.4444C21.7593 17.7778 22.0233 17.8844 22.2367 18.0978C22.45 18.3111 22.5563 18.5748 22.5556 18.8889C22.5548 19.203 22.4481 19.467 22.2356 19.6811C22.023 19.8952 21.7593 20.0015 21.4444 20H12.5556C12.2407 20 11.977 19.8933 11.7644 19.68C11.5519 19.4667 11.4452 19.203 11.4444 18.8889C11.4437 18.5748 11.5504 18.3111 11.7644 18.0978C11.9785 17.8844 12.2422 17.7778 12.5556 17.7778H15.8889Z' fill='%23FFBB00'/%3E%3Cpath d='M3.12735 11.9129C3.31965 11.4253 4.0097 11.4253 4.202 11.9129L4.79792 13.4239C4.85662 13.5728 4.97449 13.6906 5.12334 13.7493L6.6343 14.3452C7.12193 14.5375 7.12193 15.2276 6.6343 15.4199L5.12334 16.0158C4.97449 16.0745 4.85662 16.1924 4.79792 16.3412L4.202 17.8522C4.0097 18.3398 3.31965 18.3398 3.12735 17.8522L2.53142 16.3412C2.47272 16.1924 2.35488 16.0745 2.20602 16.0158L0.695031 15.4199C0.207447 15.2276 0.207452 14.5375 0.695037 14.3452L2.20602 13.7493C2.35488 13.6906 2.47272 13.5728 2.53142 13.4239L3.12735 11.9129Z' fill='%23FFB300'/%3E%3Cpath d='M31.4773 0.245173C31.6063 -0.0817245 32.069 -0.0817245 32.198 0.245173L32.7619 1.67505C32.8013 1.77491 32.8803 1.85393 32.9802 1.89331L34.41 2.4572C34.7369 2.58618 34.7369 3.04888 34.41 3.17786L32.9802 3.74175C32.8803 3.78113 32.8013 3.86015 32.7619 3.96001L32.198 5.38989C32.069 5.71679 31.6063 5.71679 31.4773 5.38989L30.9135 3.96001C30.8741 3.86015 30.7951 3.78113 30.6952 3.74175L29.2653 3.17786C28.9384 3.04888 28.9384 2.58618 29.2653 2.4572L30.6952 1.89331C30.7951 1.85393 30.8741 1.77491 30.9135 1.67505L31.4773 0.245173Z' fill='%23FFB300'/%3E%3C/svg%3E");
}
@media (max-width: 479.98px) {
  .attend-board .btn {
    padding: 10px;
    border-radius: 10px;
    gap: 8px;
  }
  .attend-board .btn .tit {
    font-size: 12px;
  }
  .attend-board .btn .exp {
    font-size: 16px;
  }
  .attend-board .btn .exp:before {
    height: 16px;
  }
  .attend-board .btn--bonus.active {
    -webkit-box-shadow: inset 0 0 0 2px #4068f5;
            box-shadow: inset 0 0 0 2px #4068f5;
  }
}
@media (max-width: 359.98px) {
  .attend-board .btn {
    gap: 5px;
    padding: 8px;
  }
  .attend-board .btn .exp {
    padding: 0.2em 0.3em;
  }
  .attend-board .btn .exp:before {
    height: 12px;
  }
  .attend-board .btn .tit {
    font-size: 11px;
  }
}