@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: 18px;
    line-height: 18px;
  }
  .h2 {
    font-size: 17px;
    line-height: 20px;
  }
  .h3 {
    font-size: 16px;
    line-height: 19px;
  }
  .h4 {
    font-size: 14px;
    line-height: 18px;
  }
  .h4.ext_bold {
    line-height: 20px;
  }
  .h5 {
    font-size: 13px;
    line-height: 18px;
  }
  .h5.bold, .h5.ext_bold {
    line-height: 20px;
  }
  .caption1 {
    font-size: 12px;
    line-height: 16px;
  }
  .caption2 {
    font-size: 11px;
    line-height: 16px;
  }
  .caption3 {
    font-size: 9px;
    line-height: 9px;
  }

  .shadow {
    -webkit-box-shadow: 0px 1px 0px 0px #CABCAE, -8px 2px 12px 0px #00000040;
    box-shadow: 0px 1px 0px 0px #CABCAE, -8px 2px 12px 0px #00000040;
  }

  /* fixed_top_button */
  .fixed_top_button {
    height: 90px;
    -webkit-box-shadow: 0px 3px 12px 0px #00000073;
    box-shadow: 0px 3px 12px 0px #00000073;
  }
  .fixed_inner {
    min-width: 360px;
    max-width: 360px;
    gap: 16px;
    padding: 0px 20px;
  }
  .fixed_inner > .flex_col > p.caption2 {
    top: -13px;
  }
  .fxd_txt {
    margin-top: 1px;
    height: 30px;
  }
  .fxd_txt_smol {
    align-items: flex-start;
  }
  .fxd_under {
    width: 48px;
    top: 28px;
    left: 80px;
  }
  .fxd_accent {
    width: 15px;
  }
  .btn_wrap .fxd_accent:first-child {
    top: -6px;
    left: -4px;
  }
  .btn_wrap .fxd_accent:nth-child(2) {
    top: 34px;
    left: 118px;
  }
  .btn_black {
    padding: 4px 18px;
    padding-right: 14px;
    border-radius: 99px;
    gap: 6px;
    width: 120px;
  }
  .icon_more {
    width: 13px;
  }

  /* main */
  .main {
    height: 748px;
    padding-top: 74px;
  }
  .kv_main {
    width: 360px;
    height: 674px;
  }
  .main_split_8 {
    width: 61px;
    bottom: 470px;
    left: calc(50% - 177px);
  }
  .main_split_5 {
    width: 38px;
    height: 52px;
    bottom: 383px;
    left: calc(50% - 116px);
  }
  .main_split_6 {
    width: 32px;
    height: 37px;
    bottom: 375px;
    left: calc(50% + 81px);
  }
  .main_split_9 {
    width: 64px;
    height: 95px;
    bottom: 435px;
    left: calc(50% + 119px);
  }
  .main_split_7 {
    width: 12px;
    height: 24px;
    bottom: 285px;
    left: calc(50% - 82px);
  }
  .main_split_10 {
    width: 20px;
    height: 19px;
    bottom: 606px;
    left: calc(50% + 64px);
  }
  .main_split_11 {
    width: 43px;
    height: 33px;
    bottom: 612px;
    left: calc(50% + 129px);
  }
  .loca_split_4 {
    width: 128px;
    height: 29px;
    bottom: 468px;
    left: calc(50% - 52px);
  }
  .kv_flower_wrap {
    bottom: 512px;
  }
  .kv_flower {
    width: 114px;
    height: 102px;
    margin-left: -6px;
  }
  .kv_flower_bg {
    width: 109px;
    height: 105px;
    top: -7px;
    left: 3px;
  }
  .kv_flower:first-child {
    margin-left: 0px;
  }
  .kv_flower span {
    font-size: 10px;
    line-height: 11px;
    margin-bottom: 2px;
  }
  .main_txt {
    height: 18px;
    margin-bottom: 3px;
  }
  .main_txt::before {
    width: 42px;
    height: 11px;
    left: 1px;
    bottom: -0.5px;
  }
  .line_mark {
    width: 5px;
    height: 11px;
    opacity: 0.88;
    bottom: -0.5px;
  }
  .main_split_arrow {
    width: 12px;
    height: 24px;
    left: calc(50% + 62px);
    bottom: 458px;
  }
  .kv_card_wrap {
    width: 124px;
    height: 197px;
    bottom: 265px;
    left: calc(50% - 60px);
  }
  .kv_card {
    border-radius: 8px;
    border-top: 0.5px solid #F6EEE5;
  }
  .main_title {
    width: 186px;
    height: 111px;
    bottom: 139px;
    left: calc(50% - 83px);
  }
  .main_split_1 {
    width: 25px;
    height: 25px;
    bottom: 208px;
    left: calc(50% - 94px);
  }
  .main_split_2 {
    width: 50px;
    height: 57px;
    bottom: 140px;
    left: calc(50% - 124px);
  }
  .main_split_3 {
    width: 42px;
    height: 41px;
    bottom: 136px;
    left: calc(50% + 86px);
  }
  .kv_btn_wrap {
    width: 320px;
    height: 119px;
    bottom: 12px;
    gap: 8px;
  }
  #go_detail {
    height: 63px;
    border-radius: 999px;
    gap: 8px;
  }
  #go_detail img {
    width: 18px;
  }


  /* event */
  #event1 {
    padding-top: 48px;
    padding-bottom: 36px;
  }
  .body_split_1 {
    width: 70px;
    height: 33px;
    top: 18px;
    left: calc(50% - 191px);
  }
  .body_split_2 {
    width: 49px;
    height: 49px;
    top: 577px;
    left: calc(50% + 146px);
  }
  .eve_wrap {
    min-width: 312px;
    max-width: 312px;
  }
  .body_head {
    width: 344px;
    height: 52px;
    top: -42px;
    left: -16px;
  }
  .body_wrap {
    padding: 18px 32px 34px;
    gap: 14px;
  }
  .eve_title {
    gap: 12px;
  }
  .eve_img {
    width: 94px;
  }
  .body_title {
    width: 120px;
    height: 24px;
  }
  .hightlight {
    width: 5px;
    height: 13px;
    left: 50px;
    bottom: -1px;
  }

  .eve_cont {
    gap: 14px;
  }
  .eve_cont > .flex_col {
    gap: 6px;
  }
  .sec_title::before {
    width: 45px;
    height: 6.5px;
    top: 7px;
    left: -0.8px;
  }
  .eve_cont > .flex_col > .flex_col {
    gap: 2px;
  }
  #steps {
    gap: 4px;
  }
  #steps > .flex_col {
    gap: 8px;
  }
  #steps > .flex_col {
    padding: 14px 20px 14px 24px;
    -webkit-box-shadow: 3px 0px 6px 0px #00000040;
    box-shadow: 3px 0px 6px 0px #00000040;
  }
  #steps > .step1 {
    padding-left: 0px;
    padding-right: 0px;
  }
  .step1 {
    height: 159px;
  }
  .step_num {
    width: 33px;
    height: 33px;
    top: 6px;
    left: -13px;
  }
  .step1 > .gray_tag {
    margin-left: 24px;
  }
  .step1 > p {
    padding-left: 24px;
  }
  .step1_open_box_wrap {
    /* height: 47px; */
    margin-top: 10px;
  }
  .step1_open_box {
    padding: 0px 26px
  }
  .step1_open_box.show {
    /* height: 47px; */
  }
  .step_highlight::before {
    height: 10px;
    bottom: -1px;
  }
  .mt_2_8 {
    margin-top: 2px;
  }
  .gray_tag {
    height: 18px;
    border-radius: 2px;
    padding: 1px 3px;
  }
  #go_detail_step {
    width: 84px;
    height: 31px;
    gap: 5px;
    padding: 8px 12px;
    border-radius: 49px;
  }
  #go_detail_step .hover {
    border-radius: 49px;
  }
  #go_detail_step img {
    width: 13px;
  }
  #go_detail_step img.icon_accent {
    width: 10px;
    height: 15px;
    bottom: 17px;
    right: -11px;
  }

  /* footer */
  .footer_wrap {
    padding: 26px 24px 36px 14px;
    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 .dashed_wrap {
    padding-left: 24px;
  }

  ul.list_wrap li {
    position: relative;
  }
  .list_wrap .li_txt {
    padding-left: 8px;
  }
  ul.list_wrap li.default {
    padding-left: 3px;
  }
  ul.list_wrap li.default::before {
    width: 3px;
    height: 3px;
    top: 7px;
  }
  .list_wrap .dashed_wrap {
    padding-left: 24px;
  }
  ul li.star.default::before {
    top: 0px;
  }

  .step_min_item {
    gap: 2px;
  }
  .step1 .step_min_item {
    padding-left: 24px;
  }
  #steps > .flex_col.step1 {
    gap: 0;
  }

  .num_box {
    gap: 2px;
  }
  .num_wrap {
    gap: 4px;
  }
  .num {
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 11px;
  }

  .cap_accent {
    align-items: flex-start;
    gap: 2px;
  }
  .cap_accent p:first-child {
    padding: 2px 0;
  }
}