@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;
  }

  /* fixed_top_button */
  .fixed_top_button {
    max-width: 328px;
    height: 78px;
    left: calc(50% - 328px / 2);
    padding: 16px 12px 12px 16px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .fxd_txt {
    width: 158px;
    height: 37px;
  }
  .fxd_btn {
    padding: 10px 12px;
    border-radius: 8px;
  }

  /* main */
  .main {
    height: 709px;
  }
  .kv_main {
    width: 360px;
    height: 709px;
  }
  .main_bg {
    width: 419px;
    height: 346px;
    top: 201px;
    left: -27px;
  }
  .main_txt_1 {
    width: 201px;
    height: 124px;
    top: 135px;
    left: 126px;
  }
  .kv_sub_title {
    width: 112px;
    height: 20px;
    top: 113px;
    left: 211px;
  }
  .main_sub_txt {
    width: 75px;
    height: 16px;
    top: 258px;
    left: 161px;
  }
  .card_wrap {
    width: 145px;
    height: 225px;
    top: 303px;
    left: 108px;
  }
  .card_shadow {
    width: 145px;
    height: 8px;
    border-radius: 99px;
    filter: blur(4px);
  }
  .card {
    height: 220px;
    left: 4px;
    border-radius: 8px;
    border: 0.5px solid #858585;
  }

  .kv_btm {
    height: 186px;
  }
  .kv_btm_inner {
    width: 216px;
    height: 54px;
    padding-top: 24px;
    padding-bottom: 16px;
  }
  .img_front {
    width: 66px;
    height: 64px;
    top: -7px;
    left: -44px;
  }
  #go_detail {
    width: 216px;
    height: 54px;
    border-radius: 999px;
    top: 547px;
    left: 72px;
  }
  #go_detail .hover {
    border-radius: 999px;
  }
  #go_detail > .icon_right {
    width: 12px;
    height: 12px;
    top: 21px;
    right: 15px;
  }

  /* event */
  .eve_wrap {
    max-width: 360px;
    padding: 28px 14px;
  }
  .eve_box {
    border-radius: 9px;
  }
  .eve_head {
    gap: 10px;
    padding: 24px;
  }
  .eve_sub {
    height: 24px;
    margin-bottom: 8px;
  }
  .eve_title {
    height: 40px;
  }
  .eve_img {
    width: 284px;
  }
  .eve_cont {
    gap: 16px;
    padding: 24px;
  }
  .eve_cont > .flex_col {
    gap: 4px;
  }
  .eve_cont > .flex_col.step_wrap {
    gap: 10px;
  }
  .eve_cont > .flex_col.step_wrap > .flex_col {
    gap: 4px;
  }
  .eve_tit_tag {
    padding: 3px 6px;
    border-radius: 999px;
    border: 1px solid #553A2E;
    font-size: 12px;
  }
  .eve_cont > .flex_col > .flex_col,
  .step_wrap > .flex_col > .flex_col {
    gap: 2px;
  }
  .step_num {
    width: 20px;
    height: 20px;
  }
  .benefit_item {
    gap: 6px;
  }
  .benefit_tit {
    padding-top: 2px;
  }
  .benefit_desc {
    gap: 2px;
  }
  .eve_foot {
    gap: 4px;
    padding: 16px 24px;
  }
  .star_li {
    padding-left: 10px;
  }
  .star_li::before {
    top: 2px;
  }

  /* event1 */
  .event1_wrap {
    height: 78px;
  }
  .event1_box {
    padding: 14px 16px;
    gap: 10px;
    border: 1px dashed #D87676;
    border-radius: 6px;
    display: none;
  }
  #go_apply {
    width: 79px;
    height: 36px;
    padding: 10px 14px;
    border-radius: 8px;
  }
  .star_icon_li {
    padding-left: 12px;
  }
  .star_icon_li::before {
    width: 8px;
    height: 10px;
  }
  .gray_tag_wrap {
    margin-top: 3px;
  }
  .gray_tag {
    border-radius: 4px;
    padding: 1px 4px;
  }

  /* event2 */
  .coupon_info_wrap {
    gap: 6px !important;
  }
  .split_icon_li {
    padding-left: 16px;
  }
  .split_icon_li::before {
    width: 12px;
    height: 14px;
  }
  .split_icon_li > span.h4.black2 {
    padding-top: 2px;
  }

  /* 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;
  }
}