@media screen and (max-width: 680px) {
  .only_pc {
    display: none;
  }
  .only_mo {
    display: block;
  }

  body,
  button,
  p,
  span {
    letter-spacing: -0.05em;
  }

  /* typography */
  .h1 {
    font-size: 22px;
  }
  .h2 {
    font-size: 16px;
  }
  .h3 {
    font-size: 14px;
    line-height: 16px;
  }
  .h4 {
    font-size: 13px;
  }
  .caption1 {
    font-size: 12px;
    line-height: 16px;
  }
  .caption2 {
    font-size: 11px;
    line-height: 16px;
  }

  .min_wrap {
    min-height: 100dvh;
  }
  .min_wrap.fix_layout {
    background-color: #efedea;
    justify-content: flex-end;
  }

  .main_wrap {
    max-width: 360px;
    height: 600px;
  }
  .top_fix_wrap {
    max-width: 360px;
    padding-top: 45px;
  }
  .prev_wrap {
    width: 312px;
    height: 42px;
    top: 15px;
  }
  .prev_button {
    width: 42px;
    height: 42px;
  }
  .prev_button img {
    width: 20px;
    height: 20px;
  }

  /* start */
  .start_wrap {
    min-width: 360px;
    min-height: 100%;
  }
  .start_sub_title {
    border-radius: 999px;
    padding: 4px 16px 3px;
    margin-bottom: 17px;
  }
  .start_title {
    width: 286px;
    gap: 8px;
  }
  .start_title > .flex_row {
    gap: 9px;
  }
  .start_title > .flex_row img {
    height: 44px;
  }
  .title_2 {
    height: 40px;
  }
  #start_btn {
    width: 312px;
    height: 56px;
    top: 510px;
    left: 24px;
  }
  .card_wrap {
    width: 252px;
    height: 206px;
    top: 394px;
    left: 54px;
    border-top-right-radius: 13px;
    border-top-left-radius: 13px;
  }
  .card_chip {
    width: 40px;
    height: 54px;
    top: 30px;
    left: 106px;
  }
  .card_logo {
    width: 48px;
    height: 43px;
    top: 21px;
    left: 188px;
  }
  .card_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    box-shadow: 3.29px 26.34px 31.28px 0px #ffffff80;
    backdrop-filter: blur(30px);
  }

  .ripple_box {
    width: 748px;
    height: 748px;
    top: 11px;
    border-radius: 9999px;
  }
  .circle-box .circle {
    border: 3px solid #c4c3c033;
  }

  .back_money {
    width: 165px;
    top: 413px;
    left: 68px;
  }
  .back_cart {
    width: 81px;
    top: 481px;
    left: 204px;
  }

  .masked_circle {
    width: 530px;
    height: 530px;
    top: 291px;
    left: -85px;
    border-radius: 99999px;
  }

  .moving {
    position: absolute;
    top: 492px;
    /* left: 161px; */
    left: calc(50% - 19px);
  }

  .img_7_shopping {
    width: 66px;
  }
  .loaded .img_7_shopping {
    animation: moveTo_img_7_shopping_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_7_shopping_mo {
    to {
      top: 241px;
      left: 221px;
    }
  }
  .img_2_1_bag {
    width: 147px;
    height: 195px;
  }
  .loaded .img_2_1_bag {
    animation: moveTo_img_2_1_bag_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_2_1_bag_mo {
    to {
      top: 216px;
      left: 69px;
    }
  }
  .img_2_3_bag {
    width: 95px;
  }
  .loaded .img_2_3_bag {
    animation: moveTo_img_2_3_bag_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_2_3_bag_mo {
    to {
      top: 256px;
      left: 156px;
    }
  }
  .img_2_2_bag {
    width: 122px;
  }
  .loaded .img_2_2_bag {
    animation: moveTo_img_2_2_bag_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_2_2_bag_mo {
    to {
      top: 308px;
      left: 111px;
    }
  }
  .img_6_1_money {
    width: 71px;
    height: 66px;
  }
  .loaded .img_6_1_money {
    animation: moveTo_img_6_1_money_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_6_1_money_mo {
    to {
      top: 353px;
      left: 73px;
    }
  }
  .img_5_trip {
    width: 85px;
  }
  .loaded .img_5_trip {
    animation: moveTo_img_5_trip_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_5_trip_mo {
    to {
      top: 308px;
      left: 235px;
    }
  }
  .img_3_golf {
    width: 52px;
    height: 56px;
  }
  .loaded .img_3_golf {
    animation: moveTo_img_3_golf_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_3_golf_mo {
    to {
      top: 325px;
      left: 209px;
    }
  }
  .img_6_2_money {
    width: 68px;
  }
  .loaded .img_6_2_money {
    animation: moveTo_img_6_2_money_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_6_2_money_mo {
    to {
      top: 300px;
      left: -10px;
    }
  }
  .img_8_plane {
    width: 81px;
  }
  .loaded .img_8_plane {
    animation: moveTo_img_8_plane_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_8_plane_mo {
    to {
      top: 181px;
      left: 238px;
    }
  }
  .img_1_calender {
    width: 48px;
  }
  .loaded .img_1_calender {
    animation: moveTo_img_1_calender_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_1_calender_mo {
    to {
      top: 204px;
      left: 138px;
    }
  }
  .img_9_ticket {
    width: 38px;
    height: 33px;
  }
  .loaded .img_9_ticket {
    animation: moveTo_img_9_ticket_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_9_ticket_mo {
    to {
      top: 298px;
      left: 89px;
    }
  }
  .img_4_split {
    width: 18px;
    height: 18px;
  }
  .loaded .img_4_split {
    animation: moveTo_img_4_split_mo 1s ease-in-out forwards;
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  @keyframes moveTo_img_4_split_mo {
    to {
      top: 314px;
      left: 203px;
    }
  }

  .kv_particle1 {
    width: 13px;
    height: 17px;
    top: 238px;
    left: 29px;
    /* animation: moveTo_particle_1 1s ease-in-out forwards; */
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  /* @keyframes moveTo_particle_1 {
    to {
      top: 238px;
      left: 29px;
    }
  } */
  .kv_particle2 {
    width: 21px;
    height: 13px;
    top: 287px;
    left: 86px;
    /* animation: moveTo_particle_2 1s ease-in-out forwards; */
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  /* @keyframes moveTo_particle_2 {
    to {
      top: 287px;
      left: 86px;
    }
  } */
  .kv_particle3 {
    width: 12px;
    height: 13px;
    top: 359px;
    left: 45px;
    /* animation: moveTo_particle_3 1s ease-in-out forwards; */
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  /* @keyframes moveTo_particle_3 {
    to {
      top: 359px;
      left: 45px;
    }
  } */
  .kv_particle4 {
    width: 14px;
    height: 15px;
    top: 249px;
    left: 177px;
    /* animation: moveTo_particle_4 1s ease-in-out forwards; */
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  /* @keyframes moveTo_particle_4 {
    to {
      top: 249px;
      left: 177px;
    }
  } */
  .kv_particle5 {
    width: 20px;
    height: 13px;
    top: 280px;
    left: 319px;
    /* animation: moveTo_particle_5 1s ease-in-out forwards; */
    transition: all 2s cubic-bezier(0.71, -0.53, 0.18, 0.82);
  }
  /* @keyframes moveTo_particle_5 {
    to {
      top: 280px;
      left: 319px;
    }
  } */

  .kv_split_3 {
    width: 84px;
    height: 84px;
    top: 492px;
    left: 302px;
  }
  .kv_split_2 {
    width: 78px;
    height: 78px;
    top: 337px;
    left: -20px;
  }
  .kv_split_1 {
    width: 55px;
    height: 55px;
    top: 80px;
    left: -9px;
  }

  /* question */
  .question_wrap {
    min-width: 360px;
    min-height: 100dvh;
  }
  .question_wrap .main_wrap {
    min-height: 100dvh;
  }
  .quest_cont {
    /* padding-top: 50px; */
    padding-bottom: 24px;
  }
  .quest_num_list {
    width: 104px;
    gap: 8px;
    margin-bottom: 28px;
  }
  .quest_num_list .dot {
    width: 8px;
    height: 8px;
  }
  .question_wrap[data-quest-idx="1"] .dot:nth-child(1),
  .question_wrap[data-quest-idx="2"] .dot:nth-child(2),
  .question_wrap[data-quest-idx="3"] .dot:nth-child(3),
  .question_wrap[data-quest-idx="4"] .dot:nth-child(4),
  .question_wrap[data-quest-idx="5"] .dot:nth-child(5),
  .question_wrap[data-quest-idx="6"] .dot:nth-child(6) {
    width: 24px;
    height: 32px;
    border-radius: 999px;
  }
  .question_wrap[data-quest-idx="1"] .dot:nth-child(1) .dot_num,
  .question_wrap[data-quest-idx="2"] .dot:nth-child(2) .dot_num,
  .question_wrap[data-quest-idx="3"] .dot:nth-child(3) .dot_num,
  .question_wrap[data-quest-idx="4"] .dot:nth-child(4) .dot_num,
  .question_wrap[data-quest-idx="5"] .dot:nth-child(5) .dot_num,
  .question_wrap[data-quest-idx="6"] .dot:nth-child(6) .dot_num {
    font-size: 13px;
  }

  .question_wrap[data-quest-idx="1"] .img_box,
  .question_wrap[data-quest-idx="1"] #img_canvas {
    width: 186px;
    height: 185px;
  }
  /* .question_wrap[data-quest-idx="1"] .img_box {
    margin-top: 46px;
  } */
  .question_wrap[data-quest-idx="2"] .img_box,
  .question_wrap[data-quest-idx="2"] #img_canvas {
    width: 248px;
    height: 302px;
  }
  /* .question_wrap[data-quest-idx="2"] .img_box {
    margin-top: 34px;
  } */
  .question_wrap[data-quest-idx="3"] .img_box,
  .question_wrap[data-quest-idx="3"] #img_canvas {
    width: 290px;
    height: 222px;
  }
  /* .question_wrap[data-quest-idx="3"] .img_box {
    margin-top: 38px;
  } */
  .question_wrap[data-quest-idx="5"] .img_box,
  .question_wrap[data-quest-idx="5"] #img_canvas {
    width: 184px;
    height: 238px;
  }
  /* .question_wrap[data-quest-idx="5"] .img_box {
    margin-top: 50px;
  } */
  .question_wrap[data-quest-idx="6"] .img_box,
  .question_wrap[data-quest-idx="6"] #img_canvas {
    width: 282px;
    height: 262px;
  }
  /* .question_wrap[data-quest-idx="6"] .img_box {
    margin-top: -6px;
  } */

  .question_wrap .img_box > lottie-player {
    transform: scale(1);
    margin-top: none;
  }

  .question_wrap[data-quest-idx="6"] .img_box > lottie-player {
    margin-top: 80px;
  }

  .quest_btm_wrap {
    width: 312px;
    height: 56px;
    gap: 8px;
    bottom: 24px;
  }
  .quest_btm_wrap button {
    max-width: 152px;
  }

  .roll_bg {
    width: 66px;
  }
  .roll_wrap {
    width: 360px;
    padding-top: 120px;
  }
  .roll_wrap .rolling_list .item {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    margin-right: 20px;
  }
  .roller.roller_reverse {
    margin-top: 2px;
  }

  /* result */
  .result_wrap {
    min-width: 360px;
  }
  .result_wrap .main_wrap {
    overflow-x: hidden;
  }
  .body_split_1 {
    width: 60px;
    height: 60px;
    top: 8px;
    left: calc(50% - 154px);
  }
  .body_split_2 {
    width: 194px;
    height: 194px;
    top: 8px;
    left: calc(50% + 62px);
  }
  .body_split_3 {
    width: 94px;
    height: 94px;
    top: 550px;
    left: calc(50% - 193px);
  }
  .result_tit_wrap {
    padding-top: 50px;
    padding-bottom: 24px;
    gap: 24x;
  }

  .result_tit_wrap .title_2 {
    height: 28px;
    padding-top: 8px;
  }

  .icon_check {
    width: 31px;
  }

  .card_box_wrap {
    width: 296px;
    gap: 12px;
    padding-bottom: 24px;
  }
  .card_box_wrap_list.only_pc {
    display: none;
  }

  .card_box_wrap > p.caption2 {
    padding: 0px 20px;
  }
  .cap_txt {
    gap: 2px;
  }
  .cap_txt::before {
    font-size: 11px;
    line-height: 15px;
    padding-top: 2px;
  }
  .card_box {
    width: 296px;
  }
  .card_box_top {
    width: 296px;
    padding-top: 45px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    gap: 10px;
    box-shadow: 4px 0px 4px 0px #0000001a;
  }
  .card_box_top img {
    width: 97px;
  }
  .card_box_top.vertical img {
    width: 154px;
  }
  .card_box_top::after {
    width: 266px;
    height: 1px;
    left: 14px;
    border-bottom: 1px dashed #d0cdc8;
  }
  .card_box_btm {
    width: 296px;
    padding-top: 24px;
    padding-right: 16px;
    padding-bottom: 16px;
    padding-left: 16px;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    gap: 20px;
    box-shadow: 4px 0px 4px 0px #0000001a;
  }
  .card_box_btm .li_txt {
    padding-left: 8px;
  }
  .card_box_btm ul {
    gap: 8px;
  }
  .card_box_btm ul li.default {
    padding-left: 8px;
    padding-right: 8px;
  }
  .card_box_btm ul li.default::before {
    width: 3px;
    height: 3px;
    top: 6px;
  }

  .card_button_wrap {
    gap: 8px;
  }
  .card_button_wrap button {
    width: 128px;
    height: 56px;
    gap: 6px;
  }
  .card_button_wrap button img {
    width: 4px;
    height: 8px;
  }

  #result1 .main_wrap,
  #result2 .main_wrap,
  #result3 .main_wrap,
  #result4 .main_wrap,
  #result5 .main_wrap,
  #result6 .main_wrap {
    width: 360px;
    max-width: 360px;
  }

  /* result1 */
  #result1 {
    min-width: 360px;
  }
  #result1 .card_box_top.vertical {
    padding-top: 45px;
    padding-bottom: 37px;
  }
  .gray_box {
    padding: 8px 12px;
    gap: 8px;
    margin-top: 8px;
  }
  .gray_box .brown_tag {
    border-radius: 2px;
    padding-top: 2px;
    padding-right: 4px;
    padding-bottom: 1px;
    padding-left: 4px;
  }

  /* result2 */
  #result2 {
    min-width: 360px;
  }
  #result2 .card_box_top {
    padding-top: 25px;
    padding-bottom: 17px;
  }

  /* result3, result6 */
  #result3,
  #result6 {
    min-width: 360px;
  }
  #result3 .card_box_top,
  #result6 .card_box_top {
    padding-top: 33px;
    padding-bottom: 25px;
  }

  /* result4, result5 */
  #result4,
  #result5 {
    min-width: 360px;
  }
  #result4 .card_box_top,
  #result5 .card_box_top {
    padding-top: 45px;
    padding-bottom: 37px;
  }
  #result4 .card_box_top.vertical,
  #result5 .card_box_top.vertical {
    padding-top: 71px;
    padding-bottom: 64px;
  }

  /* 디지로카 Pet, Edu, Wellness, Golf 카드 gap 예외 처리 (모바일만) */
  #result4 .slide1 .card_box_btm,
  #result4 .slide2 .card_box_btm,
  #result4 .slide5 .card_box_btm {
    gap: 60px;
  }

  #result4 .slide4 .card_box_btm {
    gap: 64px;
  }

  #result5 .slide2 .card_box_btm {
    gap: 44px;
  }

  #result5 .slide5 .card_box_btm {
    gap: 24px;
  }

  #result5 .slide1 .card_box_btm {
    gap: 32px;
  }

  #result6 .slide1 .card_box_btm,
  #result6 .slide3 .card_box_btm {
    gap: 36px;
  }

  .question_wrap .img_box > lottie-player {
    transform: scale(1);
    margin-top: none;
  }

  .question_wrap[data-quest-idx="6"] .img_box > lottie-player {
    margin-top: 80px;
  }

  .quest_btm_wrap {
    width: 312px;
    height: 56px;
    gap: 8px;
    bottom: 24px;
  }
  .quest_btm_wrap button {
    max-width: 152px;
  }

  .roll_bg {
    width: 66px;
  }
  .roll_wrap {
    width: 360px;
    padding-top: 120px;
  }
  .roll_wrap .rolling_list .item {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    margin-right: 20px;
  }
  .roller.roller_reverse {
    margin-top: 2px;
  }

  /* footer */
  .footer_wrap {
    padding: 26px 20px 36px 12px;
    gap: 10px;
  }
  .footer_title {
    gap: 6px;
    padding-left: 8px;
  }
  .alert {
    width: 18px;
  }
  .footer ul p {
    padding-left: 20px;
    margin-bottom: 4px;
  }
  .footer ul li {
    position: relative;
  }
  .footer .li_txt {
    padding-left: 12px;
  }
  .footer ul li.default {
    padding-left: 8px;
  }
  .footer ul li.default::before {
    width: 4px;
    height: 4px;
    top: 6px;
  }
  .footer ul li.default.star::before {
    top: 0px;
  }
  .footer .dashed_wrap {
    padding-left: 24px;
  }
}